2. css-CSDN博客

本文链接：https://blog.csdn.net/qq_44949002/article/details/120278243

1.CSS:层叠样式表（Cascading Style Sheet).W3C要求页面内容和样式分离(HTML专门用来展示内容,CSS专门用来排版写样式).
CSS文件后缀名:.css

2.页面引入CSS的方式:优先级:就近原则.
2.1:行内样式:在标签中直接用style属性写样式.
优点:直接方便
缺点:代码复用性差;内容和样式混在一起,违反W3C要求.
eg:

大家今天写代码要细心

2.2:内部样式:在<head>标签中写
	优点:可以实现页面内样式复用
	缺点:不能实现页面间的样式.
	eg:<!--内部样式-->
	<style type="text/css">
		h2{
			color:red;
		}
	</style>

2.3:外部样式:先写一个外部css文件,那个页面要用这个文件,就在这个页面的<head>中			用<link/>引入就可.
	优点:可以实现页面间样式复用;符合W3C规范.
	eg:<!--引入外部样式-->
	  <link rel="stylesheet" href="css/1.css" />

2.4:(了解)导入样式:在<head>中<style>标签中用@import导入外面css
	<!--导入外部CSS文件-->
	<style type="text/css">
		@import url("css/1.css");
	</style>
	注意:导入样式 VS 外部样式
	  2.4.1:导入样式只有部分浏览器支持;外部样式所有浏览都支持.
	  2.4.2:加载时机不同:导入样式,先加载完html页面,再加载导入css文件;
				外部样式,执行时就将CSS文件中代码引用了.

3.CSS的总语法:
选择器{
样式名1:样式值1;
样式名2:样式值2;
…
}

4.注释:/注释内容/

5.选择器:优先级: id选择器>类选择>标签选择器
5.1:标签选择器:选中页面上同一种标签.
eg:/标签选择器/
h1{
color:blue;
}

5.2:类选择器:先给标签取类名,然后以.类名开头.
	eg:<!--给标签取类名-->
	  <h3 class="c2 c3">活的,女的</h3>
	  /*类选择器*/
		.c2{
			color: yellow;
		}
		.c3{
			border: solid 1px red;
		}

5.3:ID选择器:先给标签取id名,然后以#id名开头.
	注意:在一个 HTML 文档中，每个ID 选择器会使用一次，所以同一个页面中不能有相同			名称ID名,但是同一个页面中可以有多个不同ID选择器。
	eg:<!--给标签取id名-->
	  <h4 id="d2">潘金莲这款</h4>
	  /*id选择器*/
		#d2{
			color: green;
		}

5.4:通用选择器(全局选择器):用*表示选中页面上所有标签.
	eg:	/*通用选择器*/
		*{
			color: orangered;
		}

5.5:后代选择器:选择器之间以空格分隔
	eg:/*后代选择器*/
		body span{
			color: red;
		}
		
5.6:子选择器:选择器之间以>分隔
	eg:/*子选择器*/
		body>span{
			color: red;
		}

5.7:相邻兄弟选择器:(选中当前标签紧跟着弟弟标签),选择器之间以+分隔
	eg:/*相邻兄弟选择器*/
		h2+h3{
			color: red;
		}

5.8:群组选择器:选择器之间以,分隔
	eg:/*群组选择器*/
		h1,h2,h3{
			color: red;
		}

5.9:属性选择器:标签名[属性1][属性名2=值]
	eg:/*属性选择器:标签名[属性1][属性名2=值]*/
		h3[class]{
			color: red;
		}

6.超链接伪类样式
/鼠标单击前样式/
a:link{
color: red;
}

		/*鼠标经过样式*/
		a:hover{
			color: green;
		}
		
		/*鼠标单击时样式*/
		a:active{
			color: blueviolet;
		}
		
		/*鼠标单击后样式*/
		a:visited{
			color: deeppink;
		}

7.CSS中常用样式
7.1:字体样式
font-family:字体类型,eg:宋体,楷体
font-size:字体大小
font-style:字体倾斜类型,eg:italic,normal
font-weight:字体粗细
color:字体颜色
eg:/字体样式/
div{
/font-size: 30px;
font-family: “宋体”;
font-style: italic;
font-weight: bolder;
color: red;/

			font:italic bolder 30px "宋体";
		}

7.2:文本样式
	letter-spacing:设置字符间距。
	line-height:设置行高。
	text-align:规定文本的水平对齐方式。
	text-decoration:规定添加到文本的装饰效果。
	text-indent:规定文本块首行的缩进。
	eg:
		/*文本样式*/
		p{
			text-indent: 50px;
			letter-spacing: 20px;
			line-height: 100px;
			text-align: center;
			text-decoration: underline;
		}
		
		/*去掉超链接下划线*/
		a{
			text-decoration: none;
		}

7.3:背景样式
	background-color:设置元素的背景颜色。
	background-image:设置元素的背景图像。
	background-position:设置背景图像的开始位置。
	background-repeat:设置是否及如何重复背景图像。
	eg:/*背景样式*/
		body{
			/*background-color: red;
			background-image:url(img/gameBg2.jpg);
			background-repeat: no-repeat;
			background-position: 500px 200px;*/
			background: url(img/gameBg2.jpg) 500px 200px no-repeat;
		}

7.4:列表样式
	list-style:在一个声明中设置所有的列表属性。
list-style-image:将图象设置为列表项标记
list-style-position:设置列表项标记的放置位置。
list-style-type:设置列表项标记的类型。
	eg:/*列表样式*/
		li{
			border: solid 1px red;
			list-style-position:inside;
			/*list-style-type: decimal;
			list-style: none;*/
			list-style-image: url(img/sub-3.gif);
		}

8.盒子模型:将html页面每个标签看作是一个盒子模型.
8.1:盒子模型的组成:标签内容,边框(border),内边距(padding),外边距(margin)
8.2:盒子模型的属性(border,padding,margin)按方位来设值:上-右-下-左
border:5px;上-右-下-左每个边框线都是5像素.
border:1px 2px; 上下边框线1px,左右边框线2px
border:1px 2px 3px; 上边框线1px,左右边框线2px,下边框线3px
border:1px 2px 3px,4px; 上边框线1px,右边框线2px,下边框线3px,左边框线4px

	border-方位名:直接给指定方位设值

8.2:边框(border):
		border-color:边框颜色
		border-style:边框类型,eg:solid(实线),dashed
		border-width:边框粗细
		border:类型,粗线,颜色.
8.3:内边距(padding):标签内容与边框之间距离.
8.4:外边距(margin):标签边框与其他标签边框之间距离.
8.5:盒子模型的宽度=元素的宽度+左右内边距+左右边框线.
8.6:盒子模型的高度=元素的高度+上下内边距+上下边框线.
8.7:每个页面从里到外的结构:
		margin->背景颜色->背景图片->padding->content->border
	 
	注意:客户从外到里看的.
8.8:能用外边距微调距离时,就不要用内边距.

9.position定位:静态定位(static,默认),相对定位(relative),绝对定位(absolute),
固定定位(fixed).
9.1:相对定位(relative):相对标签原来位置发生偏移,不影响其他标签.没有脱离标准文档流.
eg:/相对定位/
position: relative;
left: 200px;
top:50px;
9.2:绝对定位(absolute):相对当前标签的设置了position的父标签或父父级标签或视窗原点来发生偏移.脱离标签文档流,所以当前标签后面标签会将当前标签位置占着.
eg:/绝对定位/
position: absolute;
left:400px;
top:150px;
9.3:固定定位(fixed):生成绝对定位的元素，相对于浏览器窗口进行定位。
z-index:数字; 设置标签所在页面层次,默认页面在0层

	eg:/*制作流氓广告*/
		img{
			/*固定定位*/
			position: fixed;
			z-index: 1;
			left:500px;
			top:150px;
		}

9.4:定位一般用来微整标签的位置,能用相对定位,就不要用绝对定位.

10.浮动(float):将块级元素变成行级元素.float:left/right;
清除浮动:clear:left/right/both;
注意:如果一个元素浮动了,后面的元素受到浮动影响,如果后面的元素不想受浮动影响, 就要清除浮动.
eg:#d1,#d2{
float: left;
}

		#d3{
			clear: both;
		}

11.CSS布局:(重点)
11.1:div+css:整体布局.
11.2:div+ul-li:做导航条/左右侧菜单
11.3:div+dl-dt-dd:做图文混排功能
11.4:form+table:做规整的表单
11.5:margin:0px auto; 页面整体居中
11.6:text-align:center;文字水平居中
11.7:line-height:高度; 文字在这一行垂直居中
11.8:vertical-align: middle;当前这一行如果有文字和图片时,想让图片垂直居中,
用这个属性

回顾:
1.超链接
2.框架集
3.内联框架,特殊字符
4.CSS定义及作用
5.页面引入CSS的方式
6.css的总语法
7.css的选择器(标签,类选择器,id选择器,通用,后代选择器,子选择器,相邻兄弟选择器, 群组选择器,属性选择器)
8.css的新式(文本,字体,背景,列表样式)
9.超链接伪类式(a:link,a:hover,a:active,a:visted)
10.盒子模型:(标签内容,内边距,外边距,边框)
盒子模型的宽度=内容宽度+左右内边距+左右边框

11.定位(静态定位,相对定位,绝对定位,固定)
12.浮动/清除浮动