css 起步
什么是 CSS
CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。
和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。
CSS 是一门样式表语言，可以用它来选择性地为 HTML 元素添加样式。
一般在 HTML 文件中头部（也就是 head 标签之间）引入 CSS：
<link href="styles/style.css" rel="stylesheet" />
CSS 创建
插入样式表的方法有三种:
- 外部样式表（External style sheet）
- 内部样式表（Internal style sheet）
- 内联样式（Inline style）
一般情况下，优先级由高到低如下：
- 内联样式 Inline style
- 内部样式 Internal style sheet
- 外部样式 External style sheet
- 浏览器默认样式
CSS 规则集
一个规则示例：
p {
color: red;
}
- 选择器（Selector）：HTML 元素的名称位于规则集开始。
- 声明（Declaration）：一个单独的规则，如
color: red;用来指定添加样式元素的属性。 - 属性（Properties）：改变 HTML 元素样式的途径，由编写人员决定修改哪个属性以改变规则。
- 属性值（Property value）：冒号后面的值，它从指定属性的众多外观中选择一个值。
选择器分类
总共 4 大类。
1 基本选择器
- 通用选择器：选择所有元素
* - 元素选择器：按照给定的节点名称匹配
- 类选择器：按照给定的 class 属性的值匹配
.classname - ID 选择器：按照
id属性匹配一个元素#idname - 属性选择器：按照给定的属性
[attr]
2 分组选择器（Grouping selector）
- 用
,将不同选择器组合在一起
3 组合选择器（Combinator）
- 后代组合器：空格，组合器选择前一个元素的后代节点
- 直接子代组合器：
>组合器选择前一个元素的直接子代的节点 - 一般兄弟组合器：
~组合器选择兄弟元素 - 紧邻兄弟组合器：
+组合器选择相邻元素 - 列组合器：
||组合器选择属于某个表格行的节点
4 伪选择器（Pseudo）
- 伪类：
:对按照未被包含在文档树中的状态信息匹配 - 伪元素：
::对无法用 HTML 语义表达的实体匹配
函数
虽然大多数属性值是相对简单的关键字或数值，但也有一些值是以函数的形式出现的。
例如 calc() 函数允许在 CSS 中进行简单的计算。
@ 规则
CSS 的 @rules（读作 at-rules ）是一些特殊的规则，
提供了关于 CSS 应该执行什么或如何表现的指令。
例如，@import 将一个样式表导入另一个 CSS 样式表：
@import "styles2.css";
例如，@media 被用来创建媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
简写属性
一些属性，如 font、background、padding、border 和 margin 等属性称为简写属性。
它们允许在一行中设置多个属性值。
p {
padding: 10px 15px 15px 5px;
}
p {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
}
CSS 规则
有相同的元素选择器，有相同的优先级，顺序在最后的生效。
一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
一个选择器的优先级可以说是由三个不同的值（或分量）相加，
可以认为是 百（ID）十（类）个（元素），三位数的三个位数：
- ID：选择器中包含 ID 选择器则百位得一分。
- 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
- 元素：选择器中包含元素、伪元素选择器则个位得一分
通用选择器（*）、组合符（+、>、~、' '）
和调整优先级的选择器（:where()）不会影响优先级。
长度单位
px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
em 是相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem 是 CSS3 新增的一个相对单位（root em）。
使用 rem 为元素设定字体大小时，相对的是 HTML 根元素。
