深入CSS｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天，欢迎各位大佬批评指正。

CSS是什么

CSS即Cascading Style Sheets，是用于定义页面上元素的样式。

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果等
• ......

CSS基本语法

<style>
    h1 {
      color: red;
    }
</style>

1. CSS选择器

• 通配符选择器
• 标签选择器
• 类、伪类选择器
• id选择器
• 属性选择器
• 复合选择器（子代选择器、兄弟选择器、后代选择器...）

由于CSS的计算生效规则，对于多个选择器共同选择的一个元素，其生效样式会依据选择器的优先级来进行判断。

• 对于单选择器而言，优先级如下：
  

! important > 行内 > id选择器 > class选择器 > 标签选择器 > 通配符选择器 > 继承值

• 对于复合选择器，优先级判断通过依次比较id、class和标签选择器数量，谁更大就生效。
  

举个例子🌰： 这是一个很简单的结构，我们可以看到为什么生效的字体颜色是粉色而非蓝色？就是在于优先级比较中，第一个复合选择器中id、class、标签选择器为021；而下面的选择器为111；因此生效第二个选择器。

2. CSS颜色

在CSS中常用的颜色模型有RGB和HSL两种色彩模型，前者依据三原色的不同比例混合出不同的颜色；而后者通过色相、饱和度和亮度三种组合出多种色彩；常用于只需要改变颜色饱和度和亮度等特殊场合。

• RGB模型

通过红、绿、蓝三原色不同比例混合出不同的色彩，每一种颜色的取值在0～255，还可以把数字转化为16进制数，对应00～ff。在CSS中可以写成rgb(143，172，135)；对应#8fac87。

• HSL模型

HSL即 Hue-色相；Saturation-饱和度；Lightness-亮度。
其中Hue按照颜色不同划分色盘，取值为0～360。 Saturation决定色彩鲜艳程度，取值为0～100%，值越高颜色越鲜艳，值越低颜色越偏灰。 Lightness决定色彩亮度，取值为0～100%，值越高颜色越白，值越低颜色越黑。

• alpha透明度

取值0～1，代表当前色块透光程度的大小。可以和RGB和HSL结合写成rgba()和hsla()。

3. font字体

• font-family：

在设置字体时为了保证页面展示的兜底效果，一般会在末尾设置通用字体组，并且一般将英文字体组写在前面，中文写在后面，让样式生效更为理想。具体包括以下几类：

• Serif - 衬线体：特征为字体粗细不一，边缘有明显的修饰。代表字体：宋体，Georgia。
• Sans-Serif - 无衬线体：特征为字体粗细均匀，线条简单。代表字体：黑体，Arial。
• Cursive - 手写体：特征为字体风格偏个性化。代表字体：楷体，Caflisch Script。
• Monospace - 等宽体：。特征为每个字符宽度相等，多用于页面代码块的展示。代表字体：中文字体，Courier。

• @font-face:

如果特殊需求一定要用一种特别的字体，可以使用@font-face属性，浏览器会去指定的url地址下载字体再进行渲染。具体语法规则如下：

<style type="text/css">
  /* 定义字体名称、下载地址以及格式 */
  @font-face {
    font-family: "fontName";
    src: url() format();
  }
  /* 使用下载的字体 */
  p {
    font-family: "fontName";
  }
</style>

• 其他的font相关属性：
  • font-size
  • font-weight
  • font-style
  • text-align
  • line-height
  • text-decoration
  • text-indent
  • letter-spacing/word-spacing
  • white-sapce

CSS求值过程

graph TD 
DOM&nbspTree --> Filtering; Render&nbspTree --> Filtering; Filtering-- 申明值 --> Cascading -- 层叠值 --> Defaulting -- 指定值 --> Resolving -- 计算值 --> Formatting -- 使用值--> Constraining -- 实际值 --> Display;

具体规则

这个流程对每一个元素节点都要进行一遍以便于确定最终展现的样式。 具体规则如下：

• filtering-声明值：对应用到页面的规则按条件筛选（media、选择器...）
• cascading-层叠值：每一个元素属性有0到多个值，选择其中优先级最高的一个属性值。
• defaulting-指定值：未指定值的情况下默认值生效。
• resolving-计算值：把部分设置的相对单位的值转化为绝对值，比如em，%，...
• formatting-使用值：对需要结合具体页面窗口大小，或者媒体查询等才能获取值的属性在这里进行计算。
• constraining-实际值：把计算/设定的一些无法展示的小数部分四舍五入到整数。

计算值/使用值区别

计算值：把指定值中相对值转化为绝对值。（em和ex转化为px；相对url转化为绝对url；auto转化为具体数字等）

🏁注意：inherit一般继承的都是计算值。

使用值：由于处理计算值过程中，文档没有格式化，部分值是无法确定的，比如视口宽度，和百分比宽高等。

IFC/BFC

IFC ( inline formatting content )

每一个包含行级的容器都会创建一个IFC。例如：<span>，<a>，<strong>...

BFC ( block formatting content )