这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

上述回答，引用自 MDN 文档

在之前，对于 HTML 的学习，存在一个问题。如何修改文件的颜色与位置，这些，正是 CSS 负责的部分，定义网页的样式与布局

CSS 基础

CSS 语法

对于CSS，也存在标准的声明语法

h1 {
    color: red;
    text-align: center;
}
复制代码

上述为一个标准的 CSS 规则，它由以下两部分组成

1. 选择器：该 CSS 规则作用的 HTML 元素
2. CSS 声明：由属性名与属性值组成，以冒号分隔

引入 CSS

对于 CSS 规则，在定义的时候，根据引入的方式，存在不同级别的生效优先级，大致分为三种

1. 外部引入，通过 link 元素，优先级最低
2. 内部定义：通过 style 元素
3. 行内定义：直接在 HTML 元素中定义 style 属性，优先级最高

对于优先级的概念，较为复杂，可以理解为，优先级高的 CSS 规则中的相同声明可以覆盖优先级低的 CSS 规则中的相同声明

这一点，可以打开 Chrome、Firefox 浏览器的开发者工具，快速查看该 CSS 规则是否生效

另外，浏览器内部提供了用户 CSS 样式表，优先级最低，可以被轻松覆盖。只有当该网页不存在任何 CSS 样式时，用户样式表才会生效

CSS 层叠

CSS 的层叠特性，就是指的多个重合的 CSS 规则的使用问题，以下详细说明

优先级权重：CSS 规则的选择器本身具有的权重。例如 ID 选择的权重大于类选择器，类选择器的权重大于元素选择器

• 普通的元素选择器：优先级为 1
• 类、属性、伪类选择器：优先级为 10
• ID 选择：优先级为 100
• 内联样式：优先级为 1000

值得注意的是，类选择的优先级不可叠加，多个类选择器，只计算为一个类选择器的优先级 10

资源位置：即相同位置上 CSS 规则定义的前后顺序。若是前后 CSS 规则的优先级相同，则使用最后定义的 CSS 规则

另外，资源位置还包括 CSS 的外部、内部 CSS，在优先级相同的前提下，内部样式的优先级高于外部样式。相反，若是外部 CSS 规则的优先级高于内部 CSS 规则，则应用外部 CSS 声明的样式

概括，影响 CSS 规则定义优先级的因素存在三个，在权重相加后得出定义的 CSS 规则

1. CSS 的定义位置：外部、内部、行内
2. CSS 的选择器：元素、类、ID
3. CSS 的前后顺序

!important，这是一个重要而危险的 CSS 属性声明，可以将优先级提至最高，外部样式表的元素选择器也可以做到覆盖行内定义的 CSS 样式

CSS 选择器

上面提到的 CSS 样式层叠的优先级问题，略微注意即可，多数情况下，不太可能写出糟糕的优先级

接下来，介绍 CSS 中重要的一个部分，CSS 选择器，更多细节可以参考 MDN 文档的相关部分，在这里

基本选择器

• 通用选择器 *：选择网页中所有的 HTML 元素
• 元素选择器 HTML 元素：选择网页中特定的 HTML 元素，例如 h1
• 类选择器 .：根据 HTML 元素的 class 属性值，选择
• ID 选择器 #：根据 HTML 元素中的 id 属性值，选择
• 属性选择器 [属性名]：根据 HTML 元素中的属性名，选择

分组选择器

• 选择器列表 ,：将不同的选择器组合使用，同时选择多个元素

组合器

• 后代组合器 空格：选择父元素下的某一类子元素，不区分嵌套的层级
• 子代选择器 >：与后代选择器不同，选择当前元素的后一个元素，层级不同
• 兄弟选择器 ~：选择同一父元素下的，某一类元素
• 相邻选择器 +：选择某一元素的相邻元素
• 列选择器 ||：选择某个表格行的元素节点（新特性）

伪选择器

• 伪类 :：根据未被包含在文档树中的状态信息选择元素，例如超链接的悬停等
• 伪元素 ::：选择 HTML 语义无法表达的实体元素，例如所有 P 元素的首行

盒模型

接下来，介绍 CSS 布局的第一环，也是极为重要的一点，盒模型。HTML 元素占据的区域，就是一个盒模型

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

上述回答，引用自 MDN 文档

在之前，对于 HTML 的学习，存在一个问题。如何修改文件的颜色与位置，这些，正是 CSS 负责的部分，定义网页的样式与布局

CSS 基础

CSS 语法

对于CSS，也存在标准的声明语法

h1 {
    color: red;
    text-align: center;
}
复制代码

上述为一个标准的 CSS 规则，它由以下两部分组成

1. 选择器：该 CSS 规则作用的 HTML 元素
2. CSS 声明：由属性名与属性值组成，以冒号分隔

引入 CSS

对于 CSS 规则，在定义的时候，根据引入的方式，存在不同级别的生效优先级，大致分为三种

1. 外部引入，通过 link 元素，优先级最低
2. 内部定义：通过 style 元素
3. 行内定义：直接在 HTML 元素中定义 style 属性，优先级最高

对于优先级的概念，较为复杂，可以理解为，优先级高的 CSS 规则中的相同声明可以覆盖优先级低的 CSS 规则中的相同声明

这一点，可以打开 Chrome、Firefox 浏览器的开发者工具，快速查看该 CSS 规则是否生效

另外，浏览器内部提供了用户 CSS 样式表，优先级最低，可以被轻松覆盖。只有当该网页不存在任何 CSS 样式时，用户样式表才会生效

CSS 层叠

CSS 的层叠特性，就是指的多个重合的 CSS 规则的使用问题，以下详细说明

优先级权重：CSS 规则的选择器本身具有的权重。例如 ID 选择的权重大于类选择器，类选择器的权重大于元素选择器

• 普通的元素选择器：优先级为 1
• 类、属性、伪类选择器：优先级为 10
• ID 选择：优先级为 100
• 内联样式：优先级为 1000

值得注意的是，类选择的优先级不可叠加，多个类选择器，只计算为一个类选择器的优先级 10

资源位置：即相同位置上 CSS 规则定义的前后顺序。若是前后 CSS 规则的优先级相同，则使用最后定义的 CSS 规则

另外，资源位置还包括 CSS 的外部、内部 CSS，在优先级相同的前提下，内部样式的优先级高于外部样式。相反，若是外部 CSS 规则的优先级高于内部 CSS 规则，则应用外部 CSS 声明的样式

概括，影响 CSS 规则定义优先级的因素存在三个，在权重相加后得出定义的 CSS 规则

1. CSS 的定义位置：外部、内部、行内
2. CSS 的选择器：元素、类、ID
3. CSS 的前后顺序

!important，这是一个重要而危险的 CSS 属性声明，可以将优先级提至最高，外部样式表的元素选择器也可以做到覆盖行内定义的 CSS 样式

CSS 选择器

上面提到的 CSS 样式层叠的优先级问题，略微注意即可，多数情况下，不太可能写出糟糕的优先级

接下来，介绍 CSS 中重要的一个部分，CSS 选择器，更多细节可以参考 MDN 文档的相关部分，在这里

基本选择器

• 通用选择器 *：选择网页中所有的 HTML 元素
• 元素选择器 HTML 元素：选择网页中特定的 HTML 元素，例如 h1
• 类选择器 .：根据 HTML 元素的 class 属性值，选择
• ID 选择器 #：根据 HTML 元素中的 id 属性值，选择
• 属性选择器 [属性名]：根据 HTML 元素中的属性名，选择

分组选择器

• 选择器列表 ,：将不同的选择器组合使用，同时选择多个元素

组合器

• 后代组合器 空格：选择父元素下的某一类子元素，不区分嵌套的层级
• 子代选择器 >：与后代选择器不同，选择当前元素的后一个元素，层级不同
• 兄弟选择器 ~：选择同一父元素下的，某一类元素
• 相邻选择器 +：选择某一元素的相邻元素
• 列选择器 ||：选择某个表格行的元素节点（新特性）

伪选择器

• 伪类 :：根据未被包含在文档树中的状态信息选择元素，例如超链接的悬停等
• 伪元素 ::：选择 HTML 语义无法表达的实体元素，例如所有 P 元素的首行

盒模型

接下来，介绍 CSS 布局的第一环，也是极为重要的一点，盒模型。HTML 元素占据的区域，就是一个盒模型

• 外边距 margin：两个盒模型之间的距离
• 边框 border：盒模型的边框
• 内边距 padding：文本内容到边框的距离

另外，盒模型的高度与宽度，实际指的是内容 Content 的高、宽。内边距、边框、外边距的宽、度追加在内容的宽、高上

• 外边距 margin：两个盒模型之间的距离
• 边框 border：盒模型的边框
• 内边距 padding：文本内容到边框的距离

另外，盒模型的高度与宽度，实际指的是内容 Content 的高、宽。内边距、边框、外边距的宽、度追加在内容的宽、高上