CSS基础知识
[TOC]
# CSS基础知识点总结
**基本格式：**三种格式（CSS 语法由三部分构成：选择器、属性和值）
例：
body {color: blue}
# 一、三大基本选择器
# 1.1 ID选择器
# 2.2 类选择器
# 1.3 标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*ID选择器 【单个】*/
#p1{
color: red;
size: a5;
}
/*类选择器 【一类】*/
.c1{
color: blue;
}
/*标签选择器 【某一个标签】*/
p{
font-size: larger;
}
/*标签选择器 【某一个标签】*/
span{
color: coral;
}
</style>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：ID选择器 【单个】
-->
<p id="p1">我是第一行，我自豪</p> <!--id不能由数字开头-->
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：类选择器 【一类】
-->
<p class="c1">我是第二行，我骄傲</p>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：标签选择器 【某一个标签】
-->
<span>我是第三行，我怎么在一堆P标签里</span>
</body>
</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
# 二、六大通配符选择器
# 2.1 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
/*通配符选择器*/
*{
color: blue;
}
</style>
<body>
<p id="p1">我是第一行，我自豪</p> <!--id不能由数字开头-->
<p class="c1">我是第二行，我骄傲</p>
<span>我是第三行，我怎么在一堆P标签里</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 2.2 群组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*群组选择器【一个选择两个或多个】*/
#p1,.c1{
color: aqua;
}
</style>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：群组选择器【一个选择两个或多个】
-->
<p id="p1">我是第一行，我自豪</p> <!--id不能由数字开头-->
<p class="c1">我是第二行，我骄傲</p>
<span>我是第三行，我怎么在一堆P标签里</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 2.3 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*属性选择器*/
input[type=text]{
background-color: aquamarine;
}
</style>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：属性选择器
-->
用户名 <input type="text" name="" id="" value="" /><br />
密码 <input type="password" name="" id="" value="" />
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2.4 子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*子元素选择器*/
#u2>li{
color: red;
}
#u1>li{
list-style-type: none;
}
</style>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：子元素选择器
-->
<ul id="u1">
<li>1</li>
<li>2</li>
<ul id="u2">
<li>21</li>
<li>22</li>
</ul>
<li>3</li>
</ul>
</body>
</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
27
28
29
30
31
32
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
# 2.5 派生选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*派生选择器*/
#u2 li{
color: #00FFFF;
}
</style>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：派生选择器
-->
<ul id="u1">
<li>1</li>
<li>2</li>
<ul id="u2">
<li>24</li>
<li>28</li>
</ul>
<li>3</li>
</ul>
</body>
</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
27
28
29
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
# 2.6 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*伪类选择器*/
#z2{
width: 200px;
height: 100px;
background-color: coral;
}
/**/
#z2:hover{
height: 300px;
}
a:hover{
color: red;
}
/**/
a:link{
}
/*鼠标点下去，松开结束*/
a:active{
}
/**/
a:visited{
}
</style>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：伪类选择器
-->
<div id="z2">
<a href="子元素选择器.html">子元素选择器</a>
</div>
</body>
</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
# 三、CSS的三种引入方式
# 3.1 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用
<link>标签链接到样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.2 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<style>标签在文档头部定义内部样式表，就像这样:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 3.3 内联或内嵌样式表
要使用内联样式，你需要在相关的标签内使用样式
（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="p3" style="color: aqua;">3我他妈真牛逼</p>
<p id="p4" style="color: chocolate;">4我最最牛逼</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3.4 三种样式表实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：1、内部引入样式表
-->
<p id="p1">1我是牛逼的</p>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：2、外部引入样式表
-->
<p id="p2">2我是牛逼的</p>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：内联或内嵌样式
-->
<p id="p3" style="color: aqua;">3我他妈真牛逼</p>
<!--
作者：1710488546@qq.com
时间：2021-04-15
描述：多重样式
-->
<p id="p4" style="color: chocolate;">4我最最牛逼</p>
</body>
</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
27
28
29
30
31
32
33
34
35
36
37
38
39
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
# 四、CSS属性
# 4.1 尺寸属性
# 4.2 布局属性
- 控制显示类属性
display：设定元素的显示类型，常用取值如下：
none
# 4.3
编辑 (opens new window)