css 也称为层叠样式表（Cascading Style Sheet），用来控制 HTML 文档的样式。
css 样式引入方式
head 标签中引入
在日常，我们常用这个方法进行调试。这样可以避免经常切换文件。
1
2
3
4
5
6
7
8
9
| <style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
|
外部文件引入
这是我们工作中常用的一种 css 样式引入方式。
将 css 样式和 html 内容分开写，有利于后期的维护和修改。
首先，我们需要创建一个 css 文件，也就是 stylesheet 文件，比如 test.css 文件
然后，我们在 css 文件中写入 css 样式：
1
2
3
4
5
6
| div{
width: 200px;
height: 200px;
background-color: red;
}
|
在想使用这些 css 样式的 html 文件的 head 标签中写上下面的内容：
1
| <link rel="stylesheet" href="test.css">
|
href 对应的是文件路径。
内联样式
直接把样式写到标签中。这种写法不推荐，但有时能方便地解决一些问题。
1
| <div style="background-color: red; height: 100px; width: 100px;"></div>
|
css 选择器
基本选择器
元素选择器
1
2
| div {width: 100px;}
标签名称{css 属性: 值}
|
id 选择器
1
2
3
4
5
6
7
8
9
10
| html示例代码:
<div id="d1">
</div>
css写法:
#d1{
background-color: green;
width: 100px;
height: 100px;
}
|
类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| html代码:
<div id="d1" class="c1">
小豪
</div>
<div id="d2" class="c2">
小李
</div>
<div id="d3" class="c1">
老张
</div>
css写法
.c1{
background-color: green;
width: 100px;
height: 100px;
}
|
属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| HTML代码
<div id="d1" class="c1" xx="ss">
小豪
</div>
<div id="d2" class="c2" xx="kk">
小李
</div>
css写法:
[xx]{ 属性查找
background-color: green;
width: 100px;
height: 200px;
}
[xx='ss']{ 属性带属性值查找
background-color: green;
width: 100px;
height: 200px;
}
|
后代选择器（空格链接）
其基本格式为：
父级下所有后代的样式都会被设置，例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| html 代码示例:
<div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.xiaohao.com">小豪</a>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.xiaoli.com">小李</a>
</div>
<div id="d3" class="c1">
老张
</div>
<a href="http://www.xxxxxxx.com">xxxxxxx</a>
css代码:
div a{
color:orange;
}
|
组合选择器（逗号连接）
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
| html 代码
<div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.xiaohao.com">小豪</a>
</span>
<span>
<span>xxx222</span>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.xiaoli.com">小李</a>
</div>
<div id="d3" class="c1">
<a href="">老张</a>
</div>
<a href="http://www.xxxxxxx.com">xxxxxxx</a>
<span>官人，你好！</span>
css 代码: 注意：a 标签字体颜色设置，必须找到 a 标签才能设置
#d1 a, #d3 a{
background-color: pink;
color:yellow;
}
|