1、CSS选择器写法
CSS规则 = 选择器 + 声明块
### 选择器
选择器：选中元素
1. ID选择器：选中的是对应id值的元素
2. 元素选择器
3. 类选择器
### 声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
2、CSS书写位置
1. 内部样式表
书写在style元素中
2. 内联样式表，元素样式表
直接书写在元素的style属性中
3. 外部样式表[推荐]
将样式书写到独立的css文件中。
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护
3、常见样式声明
# 常见样式声明
1. color
元素内部的文字颜色
**预设值**：定义好的单词
**三原色，色值**：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。
```
rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝
```
淘宝红：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
红：#ff0000, #f00
绿：#00ff00, #0f0
蓝：#0000ff, #00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc
2. background-color
元素背景颜色
3. font-size
元素内部文字的尺寸大小
1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。
> user agent，UA，用户代理（浏览器）
4. font-weight
文字粗细程度，可以取值数字，可以取值为预设值
> strong，默认加粗。
5. font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体，以匹配不同环境
sans-serif，非衬线字体
6. font-style
字体样式，通常用它设置斜体
> i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）
7. text-decoration
文本修饰，给文本加线。
> a元素
> del元素：错误的内容
> s元素：过期的内容
8. text-indent
首行文本缩进
9. line-height
每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
10. width
宽度
11. height
高度
12. letter-space
文字间隙
13. text-align
元素内部文字的水平排列方式
4、选择器类型
## 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
p {
text-align: center;
color: red;
}
## id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
#para1 {
text-align: center;
color: red;
}
## 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
所有带有 class="center" 的 HTML 元素将为红色且居中对齐：
.center {
text-align: center;
color: red;
}
## 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
实例
下面的 CSS 规则会影响页面上的每个 HTML 元素：
* {
text-align: center;
color: blue;
}
## CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
以下CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好对选择器进行分组，以最大程度地缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器。
可以对代码中的选择器进行分组：
h1, h2, p {
text-align: center;
color: red;
}
## 属性选择器：https://www.w3school.com.cn/css/css_attribute_selectors.asp
## 伪类选择器：https://www.w3school.com.cn/css/css_pseudo_classes.asp
## 伪元素选择器：https://www.w3school.com.cn/css/css_pseudo_elements.asp
