这是我参与「第四届青训营」笔记创作活动的的第2天

本节课CSS内容比起第一节课的HTML内容可谓是一个量大管饱，掌握难度也是略有上升，将其逐步拆分，进行初步理解，便是这篇笔记的诞生。

认识CSS

什么是CSS

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

在 HTML 的学习中我们提到，尽量让 HTML 只负责网页的内容，而将样式负责工作交给 CSS 。

CSS简单示例

$}ZZ%43_TK14W~E@M8P{RBY0.png$ CSS 规则集（rule-set）由选择器和声明块组成：

选择器 Selector 指向需要设置样式的 HTML 元素。

属性 Property 改变 HTML 元素样式的途径。

属性值 Value 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值。

声明 Declaration 一个单独的规则，如 font-size: 14px; 用来指定添加样式元素的属性。

在页面中使用CSS

外链

<link rel="stylesheet" type="text/css" href="style.css" />

<link> 语句块里面，我们用属性 rel，让浏览器知道有 CSS 文档存在，并利用属性 href 指定，寻找 CSS 文件的位置。CSS 文件可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

嵌入

<style>
      li {
        margin: 0;
        list-style: none;
      }
</style>

在 head 部分的 <style> 元素中进行定义。

内联

<p style="color: red">这是测试内容</p>

在相关元素的 "style" 属性中定义，内联样式将内容与呈现混合在一起，一般不推荐使用。

内联样式具有最高优先级，并且将覆盖外链和嵌入样式以及浏览器默认样式。
外链样式与嵌入样式的优先级则由定义的顺序决定。

CSS是如何工作的

YXWK~UAAG9HKCF`OSKV@$J0.png

浏览器载入 HTML 文件。
将 HTML 文件转化成一个 DOM（Document Object Model）。
接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理。
浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）。

具体可以参考CSS 如何运行 - 学习 Web 开发

再谈选择器

选择器的作用就是找出页面中的元素，以便给他们设置样式。

按照标签名、类名或ID
按照属性
按照在DOM树中的位置

通配选择器

* { text-align: center; color: blue; }

可以匹配任意类型的 HTML 元素。

元素选择器

p {
  text-align: center;
  color: red;
}

根据元素名称来选择 HTML 元素。

id选择器

#idName { text-align: center; color: red; }

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。

属性选择器

/* 存在 title 属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

补充说明属性选择器 - CSS（层叠样式表）

类选择器

.className {
  text-align: center;
  color: red;
}

选择有特定 class 属性的 HTML 元素。

伪类

button:hover {
  color: blue;
}

指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

伪元素

p::first-line {
  color: blue;
}

对被选择元素的特定部分修改样式。

选择器组

h1, h2, p {
  text-align: center;
  color: red;
}

选取具有相同样式定义的 HTML 元素，用逗号来分隔每个选择器。

CSS组合器

组合器是解释选择器之间关系的某种机制。

CSS颜色

颜色名 ：通过颜色名称来指定颜色

RGB 值 ： rgb(red, green, blue)，每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度，例如，rgb(255,0,0)显示为红色。

RGBA 值 ：rgba(red, green, blue, alpha) ，是具有 alpha 通道的 RGB 颜色值的扩展，它指定了颜色的不透明度。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

HEX 值 ：使用十六进制值指定颜色，例如，#ff0000 显示为红色。

HSL值 ：hsl(hue, saturation, lightness) , 色相（hue）是色彩的基本属性，色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。饱和度（saturation）是色彩的鲜艳程度，一个百分比值，0％表示灰色阴影，而 100％是全色。亮度（lightness）指色彩的明亮程度，也是百分比，0％是黑色，50％是既不明也不暗，100％是白色。

CSS进阶

层叠与继承

)HM9@6ATD%580IAQKUB8QNR.png

层叠

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

h1 { color: red; } 
h1 { color: blue; }
/*最后h1显示为蓝色*/

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

一个元素选择器不是很具体，会选择页面上该类型的所有元素，所以它的优先级就会低一些。
一个类选择器稍微具体点，它会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

一般而言，CSS 选择器的优先级关系为

!important > 内联 > id选择器 > 类选择器 > 标签选择器。

具体优先级算法可以参考深入理解CSS选择器优先级 - 掘金 (juejin.cn)

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器 出现的次数;
C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
D 的值等于 标签选择器 和 伪元素 出现的总次数。

比较规则是: 从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的

!important 可以覆盖掉上面所有优先级计算。

继承

某些属性会自动继承其父元素的计算值，除非显示的指定一个值

初始值

CSS中，每个属性都有一个初始值

background-color 的初始值为 transparent
margin-left 的初始值为0

可以使用 initial 关键字显式重置为初始值

background-color: initial

CSS 求值过程

渲染每个元素的前提条件：该元素的所有css属性必须有值。一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性计算过程。

布局（Layout）

$PA$N{3_CNLBA2G}K9`}J4QQ.png$

盒模型

CSS 盒模型实质上是一个包围每个 HTML 元素的框，它包括：margin（外边距）、border（边框）、padding（内边距）以及 content（内容）。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸。

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

display 属性

display 属性规定是否/如何显示元素，每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

常规流（Normal Flow）

Flexbox

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

Gird

CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

浮动（Float）

最简单的用法是，float 属性可实现文字包围图片的效果。

定位（Position）

引用参考

CSS 框模型概述

position - CSS

初步理解CSS | 青训营笔记