第一章-初识CSS样式
本章目标
- 掌握CSS基本选择器（重点）
- 掌握引入CSS样式的三种方式（重点）
- 掌握层次选择器（重点、难点）
- 掌握结构伪类选择器（重点、难点）
一、掌握CSS基本选择器
1.1 标签选择器
标签选择器：标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容，标签选择器可以定义多个标签的样式，标签选择器的名字和html标签名字一致
代码演示：
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
|
<style type="text/css">
p{
color: green; //字体颜色
font-size: 16px; //字体大小
}
</style>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li><p>这是一个p4</p></li>
<li><p>这是一个p5</p></li>
<li><p>这是一个p6</p></li>
</ul>
</body>
|
代码演示效果：
1.2 类选择器
类选择器：类选择器同样写于style标签内，但类选择器在定义的时候需要 “.” 来做前缀，类名是自定义的，然后在括号内定义属性和属性值。它不是直接作用在该页面中，而是需要作用标签中添加class属性去使用要作用的标签，直接接类名即可，不需要输入”.” 类选择器可以在页面中的多个标签内重复使用
代码演示：
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
| <!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 type="text/css">
.p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<p class="p">这是一个p1</p>
<p class="p">这是一个p2</p>
<p class="p">这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p class="p">这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
1.3ID选择器
ID选择器：ID选择器也是定义在style标签内，它使用”#”作前缀，标识名照样是自定义的。然后括号内输入要修改样式的属性和属性值。调用ID选择器的样式需要使用标签内的ID属性，ID选择器规范要求本页面只能够使用一次
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 type="text/css">
#p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<p id="p">这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
选择器优先级：ID选择器>类选择器>标签选择器，ID选择器优先级最高，类选择器次之，标签选择器最低
二、引入CSS样式的三种方式
2.1 行内样式
行类样式：使用style属性引入CSS样式
优点：使用方便，一个字快，优先级极高
缺点：代码臃肿，修改代码不方便，维护成本高，内容（数据）和表现（css样式）不分离
代码演示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!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>
</head>
<body>
<h1 style="color: pink;">这是一级标题</h1>
</body>
</html>
|
2.2 内部样式
内部样式: 使用style标签内部引入css样式
优点：方便在我们的本页面修改代码
缺点：css样式只能在本页使用，内容（数据）和表现（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
28
29
30
31
32
33
34
35
36
37
38
| <!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 type="text/css">
p {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
2.3 外部样式
外部样式：新建一个xxx.css文件，在页面中通过使用link标签引入css样式
缺点：优先级低、要重新新建一个xxx.css文件，通过link标签引入样式
优点：降低css样式代码冗余、多页面样式复用性高，可以在不同页面引入外部样式
代码演示：
1
2
| 1.新建一个style.css文件
2.<link rel="stylesheet" type="text/css" href="style.css">
|
样式优先级：三种不同方式引入的css样式优先级就近原则，谁离html的代码越近谁先应用，近水楼台先得月
三、层次选择器
3.1 后代选择器
后代选择器： E F 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
代码演示：
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
| <!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 type="text/css">
body p {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
3.2 子选择器
子选择器：E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
代码演示：
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
| <!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 type="text/css">
body>p {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
3.3 相邻兄弟选择器
相邻兄弟选择器：E+F 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
代码演示：
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
| <!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 type="text/css">
p+ul {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
3.4 通用兄弟选择器
通用兄弟选择器: E~F 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
代码演示：
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
| <!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 type="text/css">
p~ul {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
<span>这是一个p7</span>
</body>
</html>
|
代码演示效果：
四、结构伪类选择器
4.1 E F:first-child
E F:first-child：作为父元素的第一个子元素的元素E
代码演示：
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
| <!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 type="text/css">
body p:first-child {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
4.2 E F:last-child
E F:last-child：作为父元素的最后一个子元素的元素E
代码演示：
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
| <!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 type="text/css">
body p:last-child {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
<p>这是一个p7</p>
</body>
</html>
|
代码演示效果：
4.3 E F:nth-child(n)
E F:nth-child(n)选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even（偶数）、odd(奇数)
代码演示：
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
| <!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 type="text/css">
body p:nth-child(2) {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
<p>这是一个p7</p>
</body>
</html>
|
4.4 E F:first-of-type
E F:first-of-type：选择父元素内具有指定类型的第一个E元素
代码演示：
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
| <!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 type="text/css">
body p:first-of-type {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<span>这是一个span</span>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
<p>这是一个p7</p>
</body>
</html>
|
代码演示效果：
4.5 E F:last-of-type
E F:last-of-type：选择父元素内具有指定类型的最后一个E元素
代码演示：
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
| <!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 type="text/css">
body p:last-of-type {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
<p>这是一个p7</p>
<span>这是一个span</span>
</body>
</html>
|
代码演示效果：
4.6 E F:nth-of-type(n)
E F:nth-of-type(n)：选择父元素内具有指定类型的第n个F元素，（n可以是1、2、3），关键字为even（偶数）、odd(奇数)
代码演示：
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
| <!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 type="text/css">
body p:nth-of-type(2) {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个p1</p>
<p>这是一个p2</p>
<p>这是一个p3</p>
<ul>
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
<p>这是一个p7</p>
<span>这是一个span</span>
</body>
</html>
|
代码演示效果：
五、属性选择器
5.1 E[attr]
E[attr] ：选择匹配具有属性attr的E元素
代码演示：
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
| <!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 type="text/css">
p[class] {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p id="">这是一个p1</p>
<p class="">这是一个p2</p>
<p>这是一个p3</p>
<ul type="disc">
<li>
<p>这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
5.2 E[attr=val]
E[attr=val]：选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
代码演示：
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
| <!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 type="text/css">
p[class=a] {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p id="a">这是一个p1</p>
<p>这是一个p2</p>
<p class="a">这是一个p3</p>
<ul class="aac">
<li>
<p class="A">这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
5.3 E[attr^=val]
E[attr^=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
代码演示：
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
| <!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 type="text/css">
p[class^=a] {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p class="a">这是一个p1</p>
<p class="ab">这是一个p2</p>
<p>这是一个p3</p>
<ul id="abc">
<li>
<p class="aaaa">这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
5.4 E[attr$=val]
E[attr$=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
代码演示：
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
| <!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 type="text/css">
p[class$=c] {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p class="abc">这是一个p1</p>
<p class="bbc">这是一个p2</p>
<p>这是一个p3</p>
<ul id="abc">
<li>
<p class="caa">这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
5.5 E[attr*=val]
E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
代码演示：
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
| <!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 type="text/css">
p[class*=c] {
color: orange;
font-size: 18px;
}
</style>
</head>
<body>
<p class="abc">这是一个p1</p>
<p class="bcb">这是一个p2</p>
<p>这是一个p3</p>
<ul id="abc">
<li>
<p class="cba">这是一个p4</p>
</li>
<li>
<p>这是一个p5</p>
</li>
<li>
<p>这是一个p6</p>
</li>
</ul>
</body>
</html>
|
代码演示效果：
课后作业
1.制作望庐山瀑布
2.制作水调歌头
3.制作如梦令
4.制作开心餐厅
5.制作加盟申请表
6.制作影视简介页面
7.制作爱奇艺视频播放列表页面
8.制作网易邮箱登录页面
