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

CSS是什么？

英文全称是Cascading Style Sheets（层叠样式表），用来定义页面元素的样式：

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

CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。

CSS语法

Selector {
  Property1: Value1;
  Property2: Value2;
}

/* 示例 */
h1 {
  color: white;
  font-size: 14px;
}

• Selector（选择器）
• Property（属性）
• Value（属性值）
• Declaration（声明）：Property: Value;

在HTML中使用CSS

外链

【推荐】引用外部文件：

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

使用此方法，可以做到“内容与样式分离”。

嵌入

使用style标签嵌入HTML：

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

内联

【不推荐】使用style属性内联于所作用的元素上：

<p style="margin: 1em 0;">Example Content...</p>

CSS的工作方式

选择器（Selector）

用于指定作用的元素，指定的方式有：

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

---

• 通配选择器 *：选择所有元素
• 标签选择器 HTML标签名（如h1）：选择所有给定的HTML标签元素
• id选择器 #元素ID（如#logo）：选择指定ID属性的HTML标签元素（如<img id="logo" src="logo.png />）

  同一ID在单个页面中只能被分配给唯一的一个元素！

• 类选择器 .类名称（如.done）：选择指定class属性的HTML标签元素（如<li class="done">Learn HTML</li>）

  同一个类名可以分配给多个元素，元素也可具有多个类名（不同的类名用空格隔开，如class="done butto"）。

• 属性选择器 [属性名]（如[disabled]）：选择具有属性的HTML标签元素（如<input value="name" disabled />）
  • 可以选择指定属性值：[属性名="属性值"]（如[type="password"]）。
    
  • 可以指定属性值需要满足的其他规则，如开头是什么（[属性名^="属性值"]）、结尾是什么([属性名$="属性值"])等等，详见属性选择器 - 学习 Web 开发 | MDN (mozilla.org)。
• 伪类（pseudo-class）选择器 :伪类名称：不基于标签和属性定位元素

  参见伪类和伪元素 - 学习 Web 开发 | MDN (mozilla.org)

  • 状态伪类：根据元素的状态选择
    • :hover：当鼠标光标悬浮到一个元素之上的时候匹配
    • :link：匹配未曾访问的链接
    • :visited：匹配已访问链接
    • :active：在用户激活（例如点击）元素的时候匹配
    • :focus：当一个元素有焦点的时候匹配
  • 结构性伪类：根据在DOM树中的相对位置选择
    • :first-child：匹配兄弟元素中的第一个元素
    • :last-child：匹配兄弟元素中最末的那个元素

---

各种选择器直接可以组合使用：

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

多个CSS选择器需要使用相同样式（即各个选择器是逻辑或/并列的关系）时可以用英文逗号,合并：

h1, .special {
  color: blue;
}

颜色与透明度

CSS中颜色可以通过很多方式来定义：

• 使用颜色关键词（比如black或transparent）
• 使用RGB三元组（以#加16进制数（一般是6位16进制数，每两位依次指定红、绿、蓝色分量），或者rgb()（以逗号分隔的方式给出红、绿、蓝色分量，各分量范围为0~255）函数表达式的形式）
• 使用HSL三元组（以hsl()（以逗号分隔的方式给出色相、饱和度、亮度）函数表达式的形式）
  • 色相(Hue, H)是色彩的基本属性，如红色、黄色等（取值范围是0-360）
  • 饱和度(Saturation, S)是指色彩的鲜艳程度，越高越鲜艳，越低越偏向灰色（取值范围0-100%）
  • 亮度(Lightness, L)是指颜色的明亮程度，越高颜色越亮（取值范围是0-100%）

此外，还可以为颜色附加透明度（alpha通道，值越高越不透明，为0时完全透明）：

• 以#加16进制数模式下，在原有6位16进制数的基础上再加上2位16进制数表示透明度
• rgb()/hsl()可以改用rgba()/hsla()，并再增加一个分量表示透明度，取值范围0-100%

字体（Font-Family）

字体通过font-family属性指定，由于无法保证指定的字体在用户的浏览器上可用，应当指定多个字体供浏览器选用，各个字体用逗号隔开。浏览器会从指定的第一个字体开始检查，直到找到可用的字体。

注：有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

CSS定义了5个通用字体族，浏览器保证为这些通用名称匹配一个字体：

• serif：衬线字体，即有衬线的字体（衬线是指字体笔画尾端的小装饰，存在于某些印刷体字体中）。
• sans-serif：无衬线字体。
• monospace：等宽字体，指包含的全部字符的宽度相同的字体，通常在编辑代码时使用。
• cursive：手写字体，对于英文字符而言通常具有顺滑的连接笔画以模拟手写效果。
• fantasy：装饰字体。

【警告】部分浏览器为 cursive 和 fantasy 匹配的字体不一定符合描述。

【最佳实践】

• 在字体栈的最后提供一个合适的通用字体族。 这样一来，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。
• 涉及中英文字体混排时，英文字体写在中文字体前。 因为假如中文字体在前，中文字体中包含拉丁字母的部分，而字体匹配成功后就不再搜索后续字体了，从而导致匹配到中文字体中的英文部分，后续设置的英文字体就失效了。

---

还可以通过设置Web Font来临时加载服务端或者外部提供的字体。

要设置Web Font，首先需在CSS文件的前部设置一个@font-face块，来指定要下载的字体文件：

@font-face {
  font-family: "myFont";   /* 自定义字体的名字 */
  src: url("myFont.ttf");
}

使用时把@font-face块中指定的名字当做是已安装的字体来使用即可：

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

【注意】由于标准的中文字体体积很大，随网页加载会影响加载性能，采用中文的Web Font时，需要预先把字体裁切成“精简版字体”（仅保留页面上用到的字符），然后再使用。

---

字体大小通过属性font-size设置，可取值为：

• 关键词
  • 绝对大小：xx-small、x-small、small、medium、large、x-large、xx-large
  • 相对大小：larger、smaller
• 长度值：12px（绝对）、0.8em（相对父元素）
• 百分比：80%（相对父元素）

斜体通过属性font-style设置：normal（正常）、italic（斜体）

粗体通过属性font-weight设置：normal（正常）、bold（粗体）

实际上font-weight还可以设置更多的值来具体设置所谓的“字重”，但是可能字体不支持。参见字体样式、字体粗细、文本转换和文本装饰 - 学习 Web 开发 | MDN (mozilla.org)。

行高（两行文字基线之间的距离）通过属性line-height设置：

• 标准的带单位写法
• 【推荐】不带单位的写法（如1.6，这也是推荐值），表示相对于自身font-size的大小

---

上述内容的缩写集合属性（不需要设置的可以省略跳过）：

font: style weight size/height family;

其他文本排版设置

文本对齐方式 通过属性text-align设置：

• left: 左对齐
• right: 右对齐
• center: 居中
• justify: 两端对齐（段落的最后一行不生效）

字母间距 和 单词间距 分别通过属性letter-spacing和word-spacing设置，采用标准的带单位写法。

首行缩进 通过属性text-indent设置，采用标准的带单位写法。

文本上下划线 通过属性text-decoration设置：

• underline: 下划线
• overline: 上划线
• line-through: 中心线/删除线
• none: 取消上述的几种线

空白和换行处理模式 通过属性white-space设置：

	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

参考：white-space - CSS（层叠样式表） | MDN (mozilla.org)

调试CSS

• 右击页面中的元素，在弹出菜单中选择“检查”来查看相关信息。
• 也可以用快捷键F12或者是Ctrl+Shift+I。