CSS 层叠样式表

: : 为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁

长度和颜色

CSS属性值中的长度单位

​ px 像素 图像中的最小元素

​ em 一个相对单位, 2em表示浏览默认大小的2倍

​ % 相对于上一级元素的百分比

CSS属性值中的颜色单位

​ 1) 颜色名称: red, green, blue, yellow, purple, pink, white, black

 2) 十六进制: 可以用#开头的6位16进制表示. 每两位分别用来表示红色,绿色,蓝色 三种自然色

     \# AA   BB   CC

​ 红 绿 蓝

      2位16进制可以表示 0~255, 即把每种颜色分为256份,来表示颜色的艳丽程度

​ 如果两位相同,那么可以简写, #AABBCC 可以简写为 #ABC

 3) rgb(红,绿,蓝): 里面可以是0~255的十进制数值

行内样式

通过标签的style属性，在标签上直接写样式

1
2
<img src='./1.jpg' style="width:200px;height:100px;"> 
<p style="color:#ff0000;">老师不认真讲课就是王八蛋</p>

内嵌样式

通过style标签，在网页上创建嵌入的样式表

1
2
3
<head>
	<style type="text/css"> ...具体样式代码 </style> 
</head>

选择器

​ CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素

​ 用来选中 元素的 代码称为 选择器, 或 选择符

​ html元素是指, 标签与标签包裹内容的整体

基本选择器

标签选择器 此种选择器影响范围大，建议尽量应用在层级选择器中。

id选择器 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器

类选择器 通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html> 
<html>
	<head>
		<meta charset='utf-8' /> 
		<style> 
            /* css代码的注释 */ 
            /*样式的书写格式
            选择器{
                    属性名:属性值; 
                    属性名:属性值; 
                } 
            */
            #one{			/* 1. ID选择器   	   选择 id='one' 的元素 */ 
                color:red;
                width:200px;
                height:200px;
            } 
            .two{color:red;} /* 2. 类选择器 	   选择 class='two' 的元素 */ 
            h3{color:red;} 	 /* 3. 标签选择器  	  选择 标签名称是 h3 的元素 */ 
		</style> 
	</head> 
	<body>
        <p id='one'>锄禾日当午</p> 
        <p class='two'>白日衣衫尽</p> 
        <h3>汗滴河下土</h3> 
	</body> 
</html>

关系选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style> 
	ul li{color:red;} 	/* 后代选择器 ul中的所有li 不管是儿子,还是孙子 */
	ul>li{color:green;} /* 父子选择器 ul中的li, 要求li是它的子级元素 选中abcdef */ 
	ol+li{color:blue;} 	/* 相邻选择器 ol后面的同级的li元素 选中 d */ 
	ol~li{color:gold;} 	/* 兄弟选择器 ol后面的所有li兄弟元素 选中 def */ 
</style>
<body>
	<ul>
		<li>aaaaa</li> 
		<li>bbbbb</li> 
		<li>ccccc</li> 
		<ol>
			<li>11111</li> 
			<li>22222</li> 
			<li>33333</li> 
		</ol> 
		<li>ddddd</li> 
		<li>eeeee</li> 
		<li>fffff</li> 
	</ul>
</body>

组合&关联选择器

1
2
3
4
5
<style>
	h1,h2,h3,h4,h5,h6{ color:red; } /* 用逗号隔开, 它们是并列关系, 即同时选中这些元素 */ 
	
	p.c1{ color:blue; } /* 选中p标签元素, 并且要求 p标签中有 class='c1' */ 
</style>

选择器之间的优先级别

一个元素被多个选择器选中,其中一个选择器设置属性为红色,另一个选择器设置属性为蓝色,

元素最终为 红色 还是 蓝色 ? 这就是优先级问题

高 => 低 :

​ !important => style行内样式 => ID选择器 => 类选择器 => 标签选择器 => 标签原属性

权重问题

​ !important 10000

​ 行内样式 1000

​ ID选择器 100

​ 类、伪类、属性选择器 10

​ 标签选择器 1

​ 关系选择器 拆开后 权重值相加

注意:

  1. 数值越大, 权重越高

  2. 权重值相同的情况下, 后面的胜出

伪类选择器

1
2
3
4
5
6
7
8
<style> 
	a:link{ } 	 /* 选中 默认状态下的 a */ 
	a:visited{ } /* 选中 访问过的 a */ 
	a:hover{ } 	 /* 选中 鼠标放在上面的 a */ 
	a:active{ }  /* 选中 鼠标点击一瞬间的 a */ 
</style> 

<a href='./xxoo.php'>跳转</a>

四种状态如果同时设置,要按照 LoVe HAte 原则, l,v,h,a 的顺序设置.

选择器:hover 相对比较常用

伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    h1{color:blue;}
	/*文本的第一个字母添加特殊样式*/
	h1:first-letter{color:red;font-size:32px;}
	/*文本的首行添加特殊样式*/
	h1:first-line{color:purple;}
    /*":before" 伪元素可以在元素的内容前面插入新内容。*/
    h1:before{content:"Hello";}
    /*":after" 伪元素可以在元素的内容之后插入新内容。*/
    h1:after{content:"World";}
</style>
<body>
	<h1>别看你今天闹得欢,小心将来拉清单</h1>
</body>

外链样式

通过link标签，链接到外部样式表到页面中

1
2
3
4
<head>
	<!-- 链接css文件 --> 
	<link rel="stylesheet" type="text/css" href="./abc.css">
</head>

@import 方式

1
2
3
4
<style> 
	@import url('abc.css'); /* 导入外部css文件 */ 
    ...
</style>

文件的压缩

实际工作中, 会把css代码中的回车换行全部去掉, 变成只有一行代码的文件.使文件体积变小.

从而提高下载速度.

bootstrap.css 正常的版本

bootstrap.min.css 压缩的版本(去除空格和换行), 名称中带有 min