一、前端三层
二、CSS的书写位置
(一)、内嵌式
内嵌式，顾名思义，内嵌在.html文件中
在<head></head>标签中，书写 <style></style>标签对，里面书写CSS语句。
(二)、外链式
可以将CSS单独存为.css文件，然后用link标签引入它
外链式的优点：多个HTML文件，可以共用一个CSS样式表文件
(三)、 导入式
导入式是最不常见的样式表导入方法,使用导入式引入文件，不会等待CSS文件加载完毕，而是会立即渲染HTML结构
(四)、行内式
行内式： 样式可以直接通过style属性写在标签上，行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。
三、CSS选择器
首先我们来介绍传统的CSS2.1 选择器
（一）、标签选择器
标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签
标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
标签选择器的覆盖面非常大，所以通常用于标签的初始化
（二）、id选择器
标签可以有id属性，它是这个标签的唯一标识
id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同的id标签
CSS选择器可以使用#井号选择指定的id标签
（三）、类选择器
class属性表示类名
类名的命名规范和id的命名规范相同
我们使用点.前缀来指定class的标签
class类名十分灵活，多个标签可以为相同的类名
同一个标签可以同时属于多个类，类名用空格隔开
在开发中我们也用到过原子类，这里简单的介绍一下
（四）、原子类
在做网页前、可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式
<style>
.fs18 {
font-size: 18px;
}
.fs20 {
font-size: 20px;
}
.fs22 {
font-size: 22px;
}
.fs24 {
font-size: 24px;
}
.fs26 {
font-size: 26px;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
.color-orange {
color: orange;
}
.color-pink {
color: pink;
}
.color-purple {
color: purple;
}
</style>
</head>
<body>
<p class="fs18 color-blue">好好学习 天天向上</p>
<p class="fs20 color-red">好好学习 天天向上</p>
<p class="fs22 color-orange">好好学习 天天向上</p>
<p class="fs24 color-pink">好好学习 天天向上</p>
<p class="fs26 color-purple">好好学习 天天向上</p>
</body>
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
（五）、复合选择器
后代选择器
交集选择器
并集选择器
并集选择器也叫做分组选择器，逗号表示分组
（六）、伪类选择器
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态
a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题
<style>
a:link {
color: rgb(255, 0, 242);
}
a:visited {
color: red;
}
a:hover {
color: pink;
}
a:active {
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<p>
<a href="http://www.baidu.com"> 百度</a>
</p>
<p>
<a href=" http://www.jd.com"> 京东</a>
</p>
<p>
<a href="http://www.taobao.com"> 淘宝</a>
</p>
<p>
<a href="http://www.jd.com"> 慕课</a>
</p>
</body>
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
28
29
30
31
32
33
34
35
（七）、元素关系选择器
（七）、子选择器
当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
（八）、相邻兄弟选择器
相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
说白了，a+b就是选择紧跟在a后面的一个b
(九）、通用兄弟选择器（~）
通用兄弟选择器（~）,a~b选择a元素之后所有同层级b元素
（十）、序号选择器
（十一）、：first-child
first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p
(十二)、：last-child
：last-child表示选择最后一个子元素，比如下面的例子
（十二）、： nth-child()
： nth-child()可以选择任意序号的子元素
：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个
<style>
.box p:first-child {
color: red;
}
.box p:last-child {
color: aqua;
}
.box p:nth-child(3) {
color: orange;
}
.box p:nth-child(2n) {
color: pink;
}
.box1 p:nth-child(2n+1) {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
（十三）、序号选择器的兼容性
（十四）、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
}
img[alt^="北京"] {
border: 5px solid purple;
}
img[alt$="夜景"] {
border: 5px solid rgb(236, 184, 12);
}
img[alt*="美"] {
border: 5px solid rgb(52, 5, 138);
}
img[alt |="参赛作品"] {
border: 5px solid rgb(224, 228, 9);
}
img[alt~="手机拍摄"] {
border: 5px solid pink;
}
</style>
</head>
<body>
<img src="images/bj/0.jpg" alt="北京故宫">
<img src="images/bj/1.jpg" alt="北京鸟巢">
<img src="images/bj/2.jpg" alt="北京十七孔桥">
<img src="images/wx/0.jpg" alt="参赛作品-无锡体育场">
<img src="images/wx/1.jpg" alt="手机拍摄 无锡太湖">
<img src="images/wx/2.jpg" alt="无锡美景">
<img src="images/wx/3.jpg" alt="无锡夜景">
</body>