了解 CSS 课堂笔记｜青训营笔记

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

一、了解 CSS

CSS（Cascading Style Sheets）用于定义页面元素的样式。

1. CSS 的结构

一个 CSS 规则集（通常简称“规则”）包含有选择器（Selector）、声明（Declaration）、属性（Properties）、属性的值（Property value）几部分。选择器用于选择一个或多个需要添加样式的元素（例子中的 p 元素）。一个规则集中可以通过添加多条声明更改多个 HTML 样式，每条声明由属性和属性的值构成。

p {
    color: red;
    width: 500px;
    border: 1px solid black;
}

2. 应用 CSS

应用 CSS有三种方式，分别为外部样式表、内部样式表、内联样式。外部样式表是最常见的方法，因为它可以将 CSS 链接到多个页面，从而使用相同的样式表设置所有页面的样式。外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML<link> 元素引用它。内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件<head>标签里的<style>标签之中。内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素，一般不推荐这么做。

二、CSS 选择器

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。

1. 通配选择器

在 CSS 中，一个星号 * 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

示例：* { }

2. 元素选择器

CSS 元素选择器 (也称为类型选择器) 通过 node 节点名称匹配元素。因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。

示例：h1 { }

3. ID选择器

在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

示例：#unique { }

4. 类选择器

在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

示例：.box { }

5. 属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

示例： a[title] { }

语法：

[attr] { } 表示带有以 attr 命名的属性的元素。
[attr=value] { } 表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value] { } 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value] { } 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
[attr^=value] { } 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value] { } 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr*=value] { } 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
[attr operator value i] { } 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

6. 伪类选择器

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

示例：p:first-child { }

7. 关系选择器

名称	语法	说明	示例
后代选择器	`A B`	选中B，如果它是A的子孙	`article p`
子代选择器	`A > B`	选中B，如果它是A的子元素	`article > p`
相邻兄弟选择器	`A + B`	选中B，如果它紧跟在A后面	`h1 + p`
通用兄弟选择器	`A ~ B`	选中B，如果它在A后且和A同级	`h1 ~ p`

8. 选择器列表

如果有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。

当使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

示例：h1, .special { }

三、CSS颜色

一个<color>可以以如下方式定义：

使用一个关键字（比如blue或transparent）
使用RGB 立体坐标（RGB cubic-coordinate）系统（以“#”加十六进制或者 rgb() 和 rgba() 函数表达式的形式）
使用HSL 圆柱坐标（HSL cylindrical-coordinate）系统（以 hsl() 和 hsla() 函数表达式的形式）

1. 颜色关键字

颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，例如 red、blue、brown或者lightseagreen 。

颜色关键字参考：MDN

2. RGB 颜色

RGB的效果类似于在无其它光照条件下，用红绿蓝三盏灯去照亮一张白纸。当没有灯点亮时就是黑色；当我们单独打开红色灯并不断调亮红灯时，纸张看起来就会是从暗红色变为亮红色；当我们保持红色灯最亮时，不断调亮绿色灯时，会从红色变为橙色再变为黄色；当所有灯调到最亮时是白色；若三盏灯亮度一样，从暗往亮同时调节三盏灯时，会有从黑色到灰色再到白色的变化。RGB效果演示

RGB 颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。

在 CSS 颜色标准 4 中，rgba() 是 rgb() 的别称。在实行第 4 级标准的浏览器中，它们接受相同的参数，作用效果也相同。

十六进制符号：#RRGGBB[AA]

R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。比如，#ff0000等价于#ff0000ff。

十六进制符号：#RGB[A]

R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。比如，#f09和#ff0099表示同一颜色。类似地，四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。比如，#0f38和#00ff3388表示相同颜色。

函数符： rgb[a](R, G, B[, A])

R（红）、G（绿）、B （蓝）可以是数字（0-255）或者百分比，255 相当于 100%。A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

函数符：rgb[a](R G B[ / A])

CSS 颜色级别 4 支持用空格分开的值。

3. HSL颜色

颜色也可以使用 hsl() 函数符被定义为色相 - 饱和度 - 亮度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变亮度/暗度和饱和度）。

HSL 颜色通过 hsl()和 hsla()表示。

在 CSS 颜色标准 4 中，hsla() 是 hsl() 的别称。在实行第 4 级标准的浏览器中，它们接受相同的参数，作用效果也相同。

函数符： hsl[a](H, S, L[, A])

H（色调）当写无单位数值时解释为色相环的deg度数，根据定义，红色=0deg=360deg，其他颜色围绕圆圈展开，所以绿色=120deg，蓝色=240deg，等等。

S（饱和度）和 L（亮度）是百分比。 100% 饱和度 是完全饱和的，而 0%完全不饱和（灰色）。 100% 亮度是白色的， 0%亮度是黑色的，并且 50%亮度是“正常的”。

函数符：hsl[a](H, S, L[, A])

CSS 颜色级别 4 支持用空格分开的值。

4. Alpha 透明度

A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）

四、CSS文本样式

1. 字体种类

使用font-family属性指定一个字体 (或者一个字体的列表)应用到选中的元素上。如果字体不可用，那么就会用浏览器默认的字体代替。

默认字体：CSS 定义了 5 个常用的字体名称: serif，sans-serif，monospace，cursive和fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

名称	定义
serif	有衬线的字体（衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）。
sans-serif	没有衬线的字体。
monospace	每个字符具有相同宽度的字体，通常用于代码列表。
cursive	用于模拟笔迹的字体，具有流动的连接笔画。
fantasy	用来装饰的字体。

font-family使用建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

使用Web Fonts：

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

2. 字体大小

关键字 small medium large
长度 px em
百分数相对于父元素的大小

px (像素): 将像素的值赋予给你的文本。这是一个绝对单位，它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。em: 1em 等于我们设计的当前元素的父元素上设置的字体大小。rem: 1rem 等于 HTML 中的根元素的字体大小，

3. 字体样式

normal: 将文本设置为普通字体 (将存在的斜体关闭)
italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
normal, bold: 普通或者加粗的字体粗细
lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。

text-decoration: 设置/取消字体上的文本装饰。

none: 取消已经存在的任何文本装饰。
underline: 文本下划线.
overline: 文本上划线
line-through: 穿过文本的线（删除线）

4. 文本布局

文本对齐： text-align 属性用来控制文本如何和它所在的内容盒子对齐。

left: 左对齐文本。
right: 右对齐文本。
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。

行高： line-height 属性设置文本每行之间的高，可以接受大多数单位，也可以设置一个无单位的值，作为乘数，推荐的行高大约是 1.5–2。

字母和单词间距：letter-spacing 和 word-spacing 属性用于设置文本中的字母与字母之间的间距、或是单词与单词之间的间距。

文本布局样式：

text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
white-space: 定义如何处理元素内部的空白和换行。

了解 CSS 课堂笔记 ｜ 青训营笔记

了解 CSS 课堂笔记 ｜ 青训营笔记

一、了解 CSS

1. CSS 的结构

2. 应用 CSS

二、CSS 选择器

1. 通配选择器

2. 元素选择器

3. ID选择器

4. 类选择器

5. 属性选择器

6. 伪类选择器

7. 关系选择器

8. 选择器列表

三、CSS颜色

1. 颜色关键字

2. RGB 颜色

3. HSL颜色

4. Alpha 透明度

四、CSS文本样式

1. 字体种类

2. 字体大小

3. 字体样式

4. 文本布局

了解 CSS 课堂笔记｜青训营笔记

了解 CSS 课堂笔记｜青训营笔记