CSS笔记整理

CSS笔记整理

学习资源：MDN CSS

本学习笔记面向 mdn web 中文文档资源，重新系统过一遍CSS，查漏补缺，不定期更新~

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

首先，CSS需要被HTML < head >引入

<link rel="stylesheet" href="styles.css">

CSS代码构成由 选择器+代码块

h1 p{} 为h1 中的p标签

h1 + p{} 为h1之后的p标签

也可以连用 body h1 + p .special

类class标签 通过.class设置样式

id标签 通过#id

通过属性

如a[xxx] {}

<style></style>内部样式表

CSS如何工作

1. 浏览器载入 HTML 文件（比如从网络上获取）。

2. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。

3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。

4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。

5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。

6. 网页展示在屏幕上（这一步被称为着色）。
   

样式失效

一条样式失效不会影响其他样式生效。

样式表层叠

样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

优先级

类选择器 main-heading 有更高的优先级，因此就会被应用——即使元素选择器顺序在它后面。

继承

一些属性可以继承一些不能如（width 不能）

层叠样式

有三个因素需要考虑，根据重要性排序如下，后面的更重要：

1. 资源顺序

我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。

2. 优先级

你会发现在一些情况下，有些规则在最后出现，但是却应用了前面的具有冲突的规则。这是因为前面的有更高的优先级——它范围更小，因此浏览器就把它选择为元素的样式。

3. 重要程度

CSS布局

grid float flex