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

一、初识 CSS

CSS (Cascading Style Sheets)，层叠样式表，用于设置元素页面样式，包括：字体、颜色；位置、大小；动画效果……

一段最简单的CSS代码由选择器、属性及属性值构成。

声明有一条或多条，不同声明间由分号隔开；声明 = 选择器 property + 属性值 value。

选择器 Selector + { } = 规则。

二、在页面中使用 CSS

页面中使用 CSS 的方法有三种：外链、嵌入、内联。

1、外链

CSS 代码单独作为一个文件，由 HTML 中的 <link> 标签引入 HTML 中，这样做的好处是内容与样式分离。

p.s. 单独写一个组件时，一般会将 HTML、CSS、js写在一起，这样做到了关注点分离。

2、嵌入

由 HTML 中的 <style> 标签，将 CSS 嵌入 HTML中。

3、内联

直接给 HTML 中的元素写样式，如 <p style=" "> ，这样使用时不需要写选择器。但这种方式一般不推荐使用，只在个别情况下偶尔使用，如使用组件库后单独为某一元素单独设置另外的样式。

三、CSS 如何工作？

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

将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。

接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理。

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

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

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

developer.mozilla.org/zh-CN/docs/…

四、选择器

A、选择器Selector

选择器选择的依据大制可分为以下三类：

按标签名、类名、id 进行选择
按属性进行选择
按节点在 DOM 树中的位置选择

选择器类型	形式
通配选择器	* {……}
标签选择器	标签名 {……}
id选择器	# id {……} （id 应唯一）
类名选择器	. 类名 {……} （指所有的该类都被选中，如为xxx.类名，则只选中xxx的该类）
属性选择器	[属性] {……} 或 [属性=“…特值”] {……}，^=“#”则属性值以#开头的会被匹配，$="#"则属性值以#结尾的会被选中。

B、伪类

分为状态性和结构性两种。

状态性，如链接已访问过/未访问过、输入框选中/未选中；

结构性，选中 DOM 树中的某个节点，给予样式。

C、组合

后代组合和兄弟选择器，不管二者中间隔了多少级；

亲子组合和相邻选择器，必须为直接相邻的两个标签。

D、选择器组

不同标签间用逗号隔开，如：h1,h2,h3,h4 {……}； [type="checkbox"], [type="radio"]{……}。

五、文本样式的设置

A、颜色

RGB，用三个0~255的数组成数对，表示一种颜色。缺点是特征不关联，不符合人的认知习惯，故引出另一种表达方式。

HSL，Hue 色相，用0~360的数表示；Saturation 饱和度，用百分比表示；Lightness 亮度，用百分比表示。其中色相为0表示红色，随着数值增大，颜色变化为红橙黄绿青蓝紫，360时又回到红色。

alpha，（不）透明度，值取0~1，为1时全不透明，值为0时全透明。与 RGB/HSL 组合，形成 rgba 和 hsla 来表示颜色。

B、字体族 font-family

字体族一般为多个值，因为不同设备上拥有的字体不同，从前往后匹配，以避免出现没有字体的情况。英文字体应写在中文字体前，以防止英文按中文字体显示。其中至少有一个通用字体族。

C、字体大小 font-size

有三种表示：关键字，如：small、medium、large；长度，如：px，em；百分数。

px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的；em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

除此之外，还有 font-style：italic，表示斜体；

font-weight：取值为100~900，表示字体粗细；

line-height：1.6，行高，表示1.6倍字体大小，如字体20px，则行高为32px。

D、CSS 对空白符的处理，white-space 属性

属性值	效果
normal	默认值，CSS 对空白符的默认处理为将多个空白符归为一个
nowrap	强制不换行
pre	保留所有的空格和换行
pre-wrap	保留空格和换行，一行显示不下时换行
pre-line	合并空格，保留换行

六、调试 CSS

右键，检查，快捷键为 Ctrl + shift + i

理解 CSS ｜ 青训营笔记