CSS语言笔记

最新推荐文章于 2024-06-16 20:55:56 发布

爱吃大猫的小鱼

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量385

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/Gou_Hao_Liang/article/details/139707522

版权

Cascading Style Sheets(级联样式表)

CSS是一种样式表语言，用于HTML文档的控制外观，定义布局。

HTML与CSS关系：

HTML是网页内容

CSS是网页样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				color: red;
				font-size: 24px;
				font-family: 楷体;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<!--
		css为html标签修饰外观
		-->
		<!--a href="">
			<font color="red">
				<b>百度</b>
			</font>
		</a>
		-->
		<!--a href="" style="color: red;font-size: 20px">百度</a-->
		<a href="" class="p1">百度</a>
		<a href="" class="p1">搜狐</a>
		<a href="" class="p1">新浪</a>
		<br />
		<a class="p1">QQ浏览器</a>
		
	</body>
</html>

选择器优先级

<head>
		<meta charset="utf-8" />
		<title></title>
<style>
			/*css注释
			内嵌样式表
			*/
		   .t1{
			   color: blue;
		   }
			/*
			类选择器
			*/
		   a{
		   	color: blue;
		   }
			p{
				color: red;
			}
			/*
			通配选择器
			*/
			*{
				font-size: 15px;
			}
			/*
			id选择器 唯一的*/
			#aid{
				color: chocolate;
			}
			
			/*选择器优先级
			匹配标签越多，优先级越低，重叠选中标签时，使用优先级高的样式，但低优先级与高优先级没有重叠的样式
			也会添加上去
			*/
			
		</style>
</head>
	<body>
		<!-- 
		行内样式表，只对所在标签进行修饰，优先级最大。
		行内样式表>aid选择器>类选择器>标签选择器>通配选择器.
		-->
		<a href="" style="color: black;font-size: 20px;font-family: 楷体;" class="t1" >腾讯</a>
		<a href="" id="aid">新浪</a>
		<a href="" >微博</a>
		<p>段落1</p>
		<p>段落2</p>
		
	</body>
</html>

css里的部分文本

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				color: #C6EB94;
				font: size 20px;/* px是像素单位，css中的尺寸需要加单位*/
				font-family: 楷体;
				font-weight: 700;/*加粗*/
				/*text-align: center;  文字水平对齐*/
				font-style: italic;/*斜体文本*/
				/* text-decoration: underline;  修饰文本下添加下划线*/
				/*text-decoration: line-through; 修饰文本  添加删除线*/
				/*line-height: 50px;控制行高*/
				/*letter-spacing: 20px;控制字符单词间距*/
				/*word-spacing: 20px;控制英文单词间距*/
				text-indent: 2em;
				/*text-indent: 2em; em当前文本中一个字符的大小的像素*/
				
				
			}
			a{
				text-decoration: none;
			}
			/*
			控制字符被鼠标指示后的浮动变化。
			*/
			a:hover{
				text-decoration: underline;
				color: #C6EB94;
			}	
		</style>
	</head>
	<body>
		<p class="p1">
			列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。
			列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。
			列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。
			
		</p>
		<a herf="">百度1</a>
		<a herf="">百度2</a>
		<a herf="">百度3</a>
		<a herf="">百度4</a>
	</body>
</html>

段落背景和列表

1.段落背景：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				background-color: aqua;
				width: 900px;
				height: 900px;
				background-image: url(img/rw.png) ;/*添加背景图片*/
				background-repeat:no-repeat;/*背景不重复*/
				background-position: center ;/* 背景位置 水平（left center right ）垂直（top  bottom  ） */
			}
			
		</style>
	</head>
	<body>
		<p>
			段落标签
		</p>
		
	</body>
</html>

2.列表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
			后代选择器 对某个父类标签下的子类进行修饰
			*/
			.u1 li{
				color: aqua;
				list-style-type: none;/*控制列表前的排序标志符号*/
				list-style-image: url(img/rw1.png);/*在列表前的标志改为图标*/
				list-style-position: inside;/*图标位置  是在列表里面还是列表外面（inside  outside）*/
				/*list-style: none outside url(img/rw1.png);  对列表项一种简写的修饰方式*/
			}
		</style>
	</head>
	<body>
		<ul class="u1">
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
		<ul class="u2">
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
	</body>
</html>

css伪类和图片透明度：

鼠标移入移出标签以及相应操作时，标签发生特殊变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				color: aqua;
			}
			/*
			当鼠标移动到选择器对应的标签时，自动切换到此样式表
			*/
		   a:hover{
			   color: red;
			   font-size: 20px;
		   }
		   /*
		   当鼠标点击选择器对应的标签时，自动切换到此样式表
		   */
		   a:active{
			   color: blue;
		   }
		   p:hover{
			   color: red;
			   background-color: aqua;
		   }
		   p:active{
			   color: blue;
		   }
		   .both:hover{
			   background-color: blue;
		   }
		   .both:active{
			   background-color: crimson;
		   }
		   
		   /*当拥有输入功能的标签，获得鼠标焦点时，自动切换到此样表达式*/
		   input:focus{
			   background-color: aquamarine;
		   }
		   img{
			   opacity: 0.5;
		   }
		   img:hover{
			   opacity: 1;/*图片透明度范围为0-1.0*/
		   }
		   
		</style>
	</head>
	
	<a href="">百度</a>
	<p>段落</p>
	<input type="button" value="保存" class="both"/><br />
	<input /><br />
	<input /><br />
	<input /><br />
	<input /><br />
	<img src="img/rw.png"/>
	
	</body>
</html>

块级，行级，行级块标签

1.块级标签：无论内容多少都会独自占据一行的。

2.行级标签：只占自身大小的标签，不会占一行。

3.行级块标签：不占一行，又可以设置宽高.

div和span:

块级标签和行级标签中的两个纯净标签；

1.块级:div.

2.行级:span.

display:

可以修饰标签的类型

1.block：改为块级标签

2.inline：改为行级标签

3.inline-block：改为行级块标签

4.none：改为空标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		块级标签:可以设置宽高,主要用来进行网页的布局.例如 p  h1-h6
		其中div是一个纯洁的块级标签,没有任何附加样式，我们给它设置什么样式，它变为什么样式。
		-->
		<!--
		display:特定条件下可以修饰标签的类型.
		1.block：改为块级标签
		2.inline：改为行级标签	
		3.inline-block：改为行级块标签		
		4.none：改为空标签
		-->
		<p style="background-color: chartreuse; ">aaa</p>
		ppp
		<h1 style="display: inline;">bbb</h1>
		<div style="background-color: chartreuse; width: 200px;height: 200px; display: inline-block;">div是一个纯洁的块级标签</div>
		<!--
		行级标签:只占内容的大小，不会占一行，设置宽高也无效，例如a b  s i
		主要用来对网页上的文字进行修饰。
		span是一个纯洁的行级标签，对网页上的文字进行选中，修饰。
		-->
		<a href="" style="width: 100px;height: 100px;">cccc</a>
		<s style="display:block;">BBBB</s>
		<span style="color: red; text-decoration: underline;">DDDD</span>
		<!--
		常用标签  div   span   a    表格    表单     列表
		-->
		<!--
		行级块标签：不占一行，又可以设置宽高
		-->
		<img src="img/rw.png" width="50" height="50"/><br />
		<input style="width:50px ; height:10px;"/>
	</body>
</html>

盒子模型：

盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。每个盒子分为了4个区域：内容区：放内容的区域，内边距：内容区到外边的距离，边框：标签的最外层，外边距：一个标签距离另一个标签之间的距离。

标签大小：内容区+内边距+外边距的大小。

设置内容区和内边距：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color: aqua;
				/*width和height仅仅只是设置内容区的大小，不是标签的大小
				标签大小是内容区大小+内边距+外边距的大小。
				*/
				width: 100px;
				height: 100px;
				/* 设置内边距  padding- /padding  */
				/*padding:10px;*/
				/*简化
				padding: 5px 10px 15px 20px;   上  右  下  左
				padding:10px 20px;  上下  左右  
				*/
				
				
			}
			.box1{
				width: 65px;
				height: 25px;
				padding: 10px 25px;
				background-color: greenyellow;
			}
			
			.box2{
				width:270px;
				height: 70px;
				padding: 15px 65px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<!--
		盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。
		每个盒子分为了4个区域：
		内容区：放内容的区域，
		内边距：内容区到外边的距离，
		边框：标签的最外层，
		外边距：一个标签距离另一个标签之间的距离。
		-->
		<div class="box">
			A
		</div>
		<div class="box1">
			新闻热点
		</div>
		
		<div class="box2">
			<img src="img/ffyc.png"  style="display: block;"/>   
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				/*去掉所有标签默认的外边距和内边距。*/
				margin: 0px;
				padding: 0px;
			}
			/*
			body{
				margin: 0px;默认会有8px的外边距，此处去除body标签默认外边距。
				}
				*/
			.box{
				background-color:aqua;
				width: 180px;
				height: 180px;
				margin-top: auto;
			}
			.box1{
				background-color:red;
				width: 180px;
				height: 180px;
				/*
				margin设置外边距。
				margin-top: 10px;
				margin-left: 10px;
				*/
			   margin: 10px;
			}
			.box2{
				background-color:greenyellow;
				width: 180px;
				height: 180px;
				/*
				auto设置距离为自动最大
				左右都为auto时，标签只有居中，才会左右都最大。
				上下的外边距不能设置为自动，设置自动时为0，
				*/
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
				margin-bottom: 10px;
			}	
			</style>
	</head>
	<body>
		<div class="box">
			盒子模型
		</div>
		<div class="box1">
			盒子模型1
		</div>
		<div class="box2">
			盒子模型2
		</div>
	</body>
</html>

文档流

文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

网页布局就是打破默认的文档流。

浮动：

浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				background-color: greenyellow;
				padding: 10px 30px;
				float: left;
			}
		</style>
	</head>
	<body>
		<!--
		浮动：浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。
			float:left/right/none;
			浮动后的标签不会占用原来文档流中的位置，下面的标签就会上移，
			跑到浮动标签的下面，影响后面网页的布局。
		-->
		<div class="nav">新闻首页</div>
		<div class="nav">体育新闻</div>
		<div class="nav">科技前沿</div>
		<div class="nav">娱乐快报</div>
		<div style="clear: left;"></div><!--清除浮动-->
		<div>abcd</div>
	</body>
</html>

定位

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

1.相对定位：

相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height: 100px;
				position: relative;/*开启相对定位，以自己为参照物，不脱离原来的文档流*/
				left: 100px;
			}
			.box2{
				background-color: blue;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1">div1</div>
		<div class="box2">div2</div>
	</body>
</html>

2.绝对定位：

移动时的参照物：离他最近的开启了定位的父级标签，如果所有父级标签都没开启定位，那么它以浏览器的边框为参照物。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height: 100px;
				position: absolute;/*开启绝对定位，立即脱离原来的文档流*/
				left:100px;
				top: 100px;
				/*
				移动时的参照物：
				离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，
				那么它以浏览器的边框为参照物。
				一般情况下开启另一个标签的绝对定位，父类一般开启相对定位。
				*/
			}
			.box2{
				background-color: blue;
				width: 100px;
				height: 100px;
			}
			.main{
				background-color: antiquewhite;
				width: 200px;
				height: 200px;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="main">
			div3
				<div class="box1">div1</div>
		</div>
		
		<div class="box2">div2</div>
	</body>
</html>