1.什么是CSS
- CSS 是一种描述 HTML 文档样式的语言
- CSS 描述应该如何显示 HTML 元素
- 几乎所有的标签都有一个通用属性：
style我们可以通过这个属性对该标签的样子（样式）进行设定
常用的CSS样式
| 样式名 | 描述 |
|---|---|
| color | 设定标签中内容的颜色 |
| background | 设定标签中的背景相关 |
| background-color | 设定标签中的背景颜色 |
| border | 设定标签中边框的相关 |
| border-top | 设定标签中上边框的相关 |
| border-top-color | 设定标签中上边框的颜色 |
2.CSS的使用方法
(1)行内样式
<div style="样式属性"> </div>
(2)内联样式表
内联样式表，是通过样式选择器。把样式属性第一次到页面中选中的元素。
<style>
样式选择器 { 样式属性 }
</style>
...
<div>
样式选择器选中的元素后，该选择器的样式属性就会生效。
</div>
(3)外联样式表
外联样式表，是内联样式表的外联方法。把HTML文件与外部的CSS进行关联。
<link rel="stylesheet" href="样式表路径">
3.样式选择器
(1)标签选择器
格式：标签名 { }
作用：页面中所有该标签名的元素都选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<!-- 1.标签选择器
格式：标签名 {}
作用：页面中所有该标签名的元素都选中
-->
<style>
div{
color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
xiaobin
</div>
</body>
</html>
(2)class选择器
格式：.class名 {}
作用：页面中所有有该class名的元素都选中
其中， class名是由自己定义的，但需要遵守一下命名规则：
- 不能使用纯数字或者数字开头： 对： d1, b2。 错： 123， 2b
- 应该使用英文、数字、下划线_或者中划线-来命名。 对： a-b, a_b, _2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class选择器</title>
<!-- 2.class选择器
格式：.class名 {}
作用：页面中所有有该class名的元素都选中。
class名是由自己定义的，但需要遵守一下命名规则：
1. 不能使用纯数字或者数字开头： 对： d1, b2。 错： 123， 2b
2. 应该使用英文、数字、下划线_或者中划线-来命名。 对： a-b, a_b, _2
-->
<style>
.box1{
color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1">
xiaobin
</div>
</body>
</html>
(3)id选择器
格式：#id名 { }
作用：页面中所有有该id名的元素都选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<!-- 3.id选择器
格式：#id名 {}
作用：页面中所有有该id名的元素都选中 -->
<style>
#box1{
color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box1">
xiaobin
</div>
</body>
</html>
注：关于选择器权重的问题
1.当一个元素给多个选择器选中，并且选择器的属性有冲突。那么浏览器会使用权重大（高）选择器的属性。
2.以上三种基础选择器权重(优先级)：id选择器>class选择器>标签选择器
3.继承选择器是所有选择器之和。
4.行内样式的权重默认高于样式表的权重。
5.权重最高的是在属性后加上 !important。
其中， id选择器与class选择器除了权重（优先级）不同以外，还有class选择器在同一页面上能多次使用相同该选择器名，而id选择器只能使用一次（不过在CSS中没有细致区分这两个选择器，但由于id选择器易发生错误，所以还是建议使用class选择器进行编译）
(4)并列表选择器
格式： 选择器1, 选择器2, 选择器3…{ }
作用： 所有的选择器选中的元素都使用相同的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并列表选择器</title>
<!--
格式： 选择器1, 选择器2, 选择器3....{}
作用： 所有的选择器选中的元素都使用相同的属性。
-->
<style>
div{
color: aqua;
border: 1px solid black;
}
.box1{
color: aqua;
border: 1px solid black;
}
#box1{
color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
</body>
</html>
(5)继承选择器
-
大继承选择器：
格式：父选择器 子选择器 子子选择器…{ }
作用：页面中完全符合选择器路径的元素都选中
例子：p a{ } .box1 a { } -
小继承选择器：
格式： 父选择器>子选择器>子子选择器…{ }
作用： 页面中完全符合选择器路径的元素都选中 -
两者区别在于，大继承可以跳级。小继承不能跳级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承选择器</title>
<!--
5.继承选择器：
大继承选择器：
格式：父选择器 子选择器 子子选择器....{}
作用：页面中完全符合选择器路径的元素都选中。
例子：p a{} .box1 a {}
小继承选择器：
格式： 父选择器>子选择器>子子选择器....{}
作用： 页面中完全符合选择器路径的元素都选中。
区别在于，大继承可以跳级。小继承不能跳级。 -->
<style>
.u1 li { /*大继承选择器*/
background-color: palegreen;
}
.u2 li {/*大继承选择器*/
background-color: orange;
}
.u1 a {/*大继承选择器*/
color: red;
}
.u2>li a {/*小继承与大继承混合选择器*/
color: green;
}
</style>
</head>
<body>
<ul class="u1">
<li>
<a href="#">广州</a>
</li>
<li>
<a href="#">深圳</a>
</li>
<li>
<a href="#">佛山</a>
</li>
<li>
<a href="#">东莞</a>
</li>
</ul>
<ul class="u2">
<li>
<a href="#">小明</a>
</li>
<li>
<a href="#">小红</a>
</li>
<li>
<a href="#">小白</a>
</li>
<li>
<a href="#">小黑</a>
</li>
</ul>
</body>
</html>
(6)伪类选择器
伪类选择器指的是元素在指定状态或者位置时所使用的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<!-- 伪类选择器指的是元素在指定状态或者位置时所使用的属性 -->
<style>
h1 {
color: pink;
}
h1:hover { /*作用：鼠标移到h1字体位置时，字体颜色由粉红色变成天蓝色*/
color: skyblue;
}
</style>
</head>
<body>
<h1>xiao deng</h1>
</body>
</html>
——>更多选择器请点击此处查看
