css学习

目录

css三种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    1、通过link标签引入外部的css文件
    2、在head中通过style标签定义样式
    3、在标签中通过style属性定义样式
    -->
    <!--    <link rel="stylesheet" href="./css/mian.css">-->

    <style type="text/css">
        div {
            color: #fff;
            background: blue;
            font-size: 24px;
            height: 100px;
            width: 200px;
        }
    </style>

</head>
<body>


<!--<div id="box1">-->
<!--    python天下无敌-->
<!--</div>-->

<div id="box2" style="height: 300px;width: 100px;background: yellow">
    python天下无敌
</div>


</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    1、通过link标签引入外部的css文件
    2、在head中通过style标签定义样式
    3、在标签中通过style属性定义样式
    -->
    <!--    <link rel="stylesheet" href="./css/mian.css">-->

    <style type="text/css">
        div {
            color: #fff;
            background: blue;
            font-size: 24px;
            height: 100px;
            width: 200px;
        }
    </style>

</head>
<body>


<!--<div id="box1">-->
<!--    python天下无敌-->
<!--</div>-->

<div id="box2" style="height: 300px;width: 100px;background: yellow">
    python天下无敌
</div>


</body>
</html>

css选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
         css选择器
         1、标签选择器： 通过标签名进行选择
         2、id选择器：  通过标签的id属性进行选择 (#id)
         3、类选择器：  通过标签的class属性进行选择(.class属性)
         */

        li {
            color: red;
        }

        #sp01 {
            color: yellow;
        }

        .box {
            height: 300px;
            width: 200px;
            background: royalblue;
        }


    </style>


</head>
<body>

<div class="box">
    <ul>
        <li>111</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>

    <span id="sp01">python001</span>

</div>
<hr>

<div class="box"></div>


</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 组选择器 */
			a,div,p{
				color: #FF0000;
				font-size: 30px;
			}
			li{
				list-style: none;
				
			}
			/* 伪类选择器 */
			li:hover{
				background: #00FFFF;
			}
			
			
			
		</style>
		
	</head>
	<body>
		<a href="">python</<!-- a>
		<div>java</div>
		<p>python0001</p> -->
		<ul>
			<li>菜单1</li>
			<li>菜单2</li>
			<li>菜单3</li>
			<li>菜单4</li>
		</ul>
		
		
		
		
	</body>
</html>

css背景设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* 设置背景颜色 */
			/* body{
				background: yellow;
			} */
			/* 设置图片作为背景
			 background-repeat: 
				no-repeat; 不进行平铺
				repeat-y; y轴平铺
				repeat-x; x轴平铺
			 /* 设置图片作为背景 */
			 /* background-image: url('./images/bj.png'); */
			 /* 设置背景是否平铺 */
			 /* background-repeat: no-repeat; */
			 /* 设置背景的定位 */
			 /* background-position:50px 100px; */
			 /* 固定背景位置 */
			 /* background-attachment:fixed; */
			 /* 设置背景大小 */
			 /* background-size:200px 100px ; */
			 */
			body{
				height: 10000px;
				/* 设置图片作为背景 */
				background-image: url('./images/bj.png');
				/* 设置背景是否平铺 */
				background-repeat: no-repeat;
				/* 设置背景的定位 */
				background-position:50px 100px;
				/* 固定背景位置 */
				background-attachment:fixed;
				/* 设置背景大小 */
				background-size:200px 100px ;
			}
			
			.box{
				background: red;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box">
			musen123
		</div>
		
		
		
	</body>
</html>

css 文本样式的设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			/* 
			 color: #FF0000; 字体颜色
			 font-size: 36px;  大小
			 font-weight: bold; 是否加粗
			 font-style: italic;  是否倾斜
			 font-family: '微软雅黑';  字体样式
			 line-height  行高
			 font： 字体是否加粗   字体大小/行高  字体样式
			 text-indent: 36px;  设置文字首行缩进
			 
			 text-align:设置文件对齐位置
			  
			  */

			ul li {
				/* color: #FF0000;
				font-size: 36px;
				font-weight: bold;
				font-style: italic;
				font-family: '微软雅黑';
				line-height: 100px; */
				/*   font： 字体是否加粗   字体大小/行高  字体样式 */
				font: bold 24px/50px "microsoft yahei";
				color: aqua;

			}

			p {
				text-indent: 36px;
			}
			.box2{
				width: 300px;
				height: 200px;
				background: yellowgreen;
				text-align: center;
				line-height: 200px;
			}
			
		</style>

	</head>




	<body>
		<div class="box">
			<ul>
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>5555</li>
			</ul>

			<p>
				CSS：层叠样式表(英文全称：Cascading Style
				Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)或[XML](https://baike.baidu.com/item/XML)（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS
				能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

			</p>
			<div class="box2">
				python
			</div>
			
			
		</div>


	</body>
</html>

css盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			盒模型：
			 
			 边框：border
			 
			 内边距：padding
			 
			 外边距：margin
			 
			 
			 
			 */
			
			.box1,.box2,.box3{
				background: #00FFFF;
				height: 200px;
				width: 200px;
				margin: auto;
			}
			.box1{
				border: 2px solid #FF0000;
				padding: 20px;
			}
			.box2{
				border: 2px double #9ACD32;
				/* margin-top: 20px; */
			}
			.box3{
				border-right:3px solid  antiquewhite ;
			}
			
			
		</style>
		
		
	</head>
	<body>
		
		<div class="box1">
			1111
		</div>
		<div class="box2">
			222
		</div>
		<div class="box3">
			3333
		</div>
		
	</body>
</html>

css页面布局浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 浮动：
			 为什么要进行浮动：页面横向布局
			 float:  left   right
			 浮动塌陷的问题：
			 父级元素在没有设置高度的情况下，子元素浮动会造成浮动塌陷（父元素后面的元素会显示到浮动的元素下面）
			 解决方案1、：给父元素设置：/* overflow: hidden; */
			 /* 解决方案2:  在父元素中，最后一个浮动元素后面添加一个块元素（div）,给这个元素设置clear:both */
			 
			 */
			
			.box1,
			.box2,
			.box3 {
				height: 200px;
				width: 200px;
				float: left;
				margin-left: 20px;

			}

			.box1 {
				background: #00FFFF;
			}

			.box2 {
				background: yellow;

			}

			.box3 {
				background: red;
			}
			
			#app{
				/* height: 900px; */
				/* 缺陷：父元素中子元素内容量不确定的情况，此方案会有bug */
				/* overflow: hidden; */
			
			}
			.content{
				height: 300px;
				background: #000;

			}
			.clear{
				clear: both;
			}
		</style>


	</head>
	<body>

		<div id="app">
			<div class="box1">
				1111
			</div>
			<div class="box2">
				222
			</div>
			<div class="box3">
				3333
			</div>
			<div class="box1">
				3333
			</div>
			<div class="box2">
				3333
			</div>
			<div class="clear"></div>
		
		</div>

		<div class="content">
			python8888
			
		</div>


	</body>
</html>

css定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 相对定位 relative:相对于原来在文档流的位置进行偏移
			 绝对定位： 根据已经进行定位的父级元素进行偏移
			 注意点：通常在使用决定定位时  会将腹肌元素设置为相对定位
			 固定位置定位
			 
			 */
			.box11{
				height: 200px;
				position: relative;
				background: yellowgreen;
			}
			
			.box1,
			.box2,
			.box3 {
				height: 200px;
				width: 200px;
	
				margin-left: 20px;

			}

			.box1 {
				background: #00FFFF;
				position: fixed;
				left: 20px;
				top: 100px;
			}

			.box2 {
				background: yellow;
				/* position: relative; */
				position: absolute;
				left: 200px;
				top: 50px;
			}

			.box3 {
				background: red;
			}
			#app{
				position: relative;
				height: 2000px;
			}
			
			.left,.right{
				height: 50px;
				width: 20px;
				background: blue;
			}
			.left{
				position: absolute;
				left: 20px;
				top: 40%;
			}
			.right{
				position: absolute;
				right: 20px;
				top: 40%;
			}
		</style>
	</head>
	<body>
		<div class="box11">
			<div class="left"></div>
			<div class="right"></div>
			
			
		</div>
		
		<div id="app">
			<div class="box1">
				1111
			</div>
			<div class="box2">
				222
			</div>
			<div class="box3">
				3333
			</div>

			<div class="clear"></div>

		</div>



	</body>
</html>

css页面布局案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 相对定位 relative:相对于原来在文档流的位置进行偏移
			 
			 绝对定位： 根据已经进行定位的父级元素进行偏移
			 注意点：通常在使用决定定位时  会将腹肌元素设置为相对定位
			 
			 固定位置定位
			 
			 */
			.box11{
				height: 200px;
				position: relative;
				background: yellowgreen;
			}
			
			.box1,
			.box2,
			.box3 {
				height: 200px;
				width: 200px;
	
				margin-left: 20px;

			}

			.box1 {
				background: #00FFFF;
				position: fixed;
				left: 20px;
				top: 100px;
			}

			.box2 {
				background: yellow;
				/* position: relative; */
				position: absolute;
				left: 200px;
				top: 50px;
			}

			.box3 {
				background: red;
			}
			#app{
				position: relative;
				height: 2000px;
			}
			
			.left,.right{
				height: 50px;
				width: 20px;
				background: blue;
			}
			.left{
				position: absolute;
				left: 20px;
				top: 40%;
			}
			.right{
				position: absolute;
				right: 20px;
				top: 40%;
			}
		</style>
	</head>
	<body>
		<div class="box11">
			<div class="left"></div>
			<div class="right"></div>
			
			
		</div>
		
		<div id="app">
			<div class="box1">
				1111
			</div>
			<div class="box2">
				222
			</div>
			<div class="box3">
				3333
			</div>

			<div class="clear"></div>

		</div>


	</body>
</html>
posted @   进击的bug~  阅读(26)  评论(0)  编辑  收藏  举报
相关博文：
·  Javascript学习
·  学习HMTL（表单）
·  css的三种引入形式
·  css基础
·  认识CSS
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示