前言

这是我参与「第五届青训营」笔记创作活动的第2天，在本次课堂上我们学习了CSS，做此笔记。

一、本堂课重点内容

走进CSS

CSS代码构成
CSS的使用方法
CSS流程之选择器组、文本渲染
调试CSS

深入CSS

CSS选择器的特异度
CSS继承
CSS求值过程解析
CSS布局方式及相关技术

二、详细知识点介绍

走进CSS

CSS代码构成

CSS (Cascading Style Sheets) 用于定义 HTML 或 XML 网页的样式。它由三个部分组成：选择器、属性和值。

选择器用于选择需要改变样式的 HTML 元素。例如：

p {
    /* 这里是属性和值 */
}

属性是用于描述元素样式的单词，例如：

color, font-size, margin, padding

值是为属性赋予的具体值。例如：

color: red;
font-size: 16px;
margin: 10px;

一个完整的 CSS 代码片段可能是这样的：

p {
    color: red;
    font-size: 16px;
    margin: 10px;
}

这个代码将所有段落元素的字体颜色设置为红色，字体大小设置为 16px，并且将上下左右边距都设置为 10px。

CSS的使用方法

CSS 可以通过三种方式使用：

内联：可以直接在 HTML 元素的标签内使用 style 属性。例如：

<p style="color: red; font-size: 16px;">This is a red paragraph.</p>

嵌入：可以在 HTML 文件的 head 部分使用 style 标签，并在其中定义 CSS 代码。例如：

<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This is a red paragraph.</p>
</body>

外链：可以在单独的 CSS 文件中定义 CSS 代码，然后在 HTML 文件的 head 部分使用 link 标签引用该文件。例如，在 style.css 中定义 CSS 代码：

p {
    color: red;
    font-size: 16px;
}

在 HTML 文件中使用 link 标签：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>This is a red paragraph.</p>
</body>

建议使用外部样式表来组织和维护 CSS 代码，因为这样可以使 CSS 代码更易于维护和重用。

通常情况下，如果有多个样式定义对同一个元素有影响, 会按照从上往下的顺序进行应用(即后面的样式会覆盖前面的样式), 这就是所谓的“层叠”。

CSS流程之选择器组、文本渲染

CSS 流程中的选择器组和文本渲染是两个重要的部分。

选择器组是 CSS 中的一种组织方式，允许将多个选择器组合在一起，以便将样式应用于多个元素。例如，可以使用逗号将多个选择器组合在一起：

p, h1, h2 {
    color: red;
    font-size: 16px;
}

这段代码将所有段落元素、标题元素和子标题元素的字体颜色设置为红色，字体大小设置为 16px。

文本渲染是 CSS 中的一个重要部分，它描述了如何在屏幕上渲染文本。文本渲染包括文本颜色、字体、字体大小、字体样式、文本对齐等。例如：

p {
    color: red;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-align: center;
}

这段代码将所有段落元素的字体颜色设置为红色，字体设置为 Arial，字体大小设置为 16px，文本对齐方式设置为居中。

文本渲染非常重要，因为它影响着用户阅读网页的体验。使用合适的字体、大小和颜色可以使网页更易于阅读和理解。

调试CSS

调试 CSS 有几种常见的方法：

使用浏览器的开发者工具：大多数现代浏览器都有内置的开发者工具，可以使用它来查看网页的 HTML 和 CSS 代码，并检查样式是否正确应用。在开发者工具中，可以使用 "Elements" 面板查看 HTML 和 CSS 代码，并使用 "Styles" 面板查看样式。
使用 CSS 的调试属性：CSS 提供了几个调试属性，可以帮助查看元素的布局和样式。例如，可以使用 outline 属性给元素添加轮廓线，使用 box-sizing 属性查看元素的盒模型，使用 display 属性查看元素的布局类型。
使用 CSS 预处理器：如果使用 CSS 预处理器如 SCSS/LESS，可以使用调试功能来查看生成的 CSS 代码。
使用 CSS 文件合并工具：使用工具如 css-purge 可以检查 css 文件中未使用的样式。
使用 CSS 代码格式化工具：使用工具如 Prettier 可以帮助整理和格式化 CSS 代码。
使用 CSS 检查工具: 使用工具如 CSS Lint 可以帮助检查 CSS 代码是否符合最佳实践，并发现错误。

深入CSS

CSS选择器的特异度

CSS 中的选择器有不同的优先级，称为“特异度”。特异度越高的选择器，其对应的样式就会优先应用。

特异度的值由四部分组成：

元素选择器（例如 p、h1、div 等），其特异度为 1,0,0,0
类选择器（例如 .class-name），其特异度为 0,1,0,0
ID 选择器（例如 #id-name），其特异度为 0,0,1,0
属性选择器和伪类选择器（例如 [attr]、:hover 等），其特异度为 0,0,0,1

当存在多个选择器样式同时适用于同一元素时，会应用特异度最高的样式，如果特异度相同，则应用最后出现的样式。

例如，如果有以下样式:

p { color: blue; } /* 权值为 1,0,0,0 */
.class-name { color: green; } /* 权值为 0,1,0,0 */
#id-name { color: red; } /* 权值为 0,0,1,0 */

如果有一个元素符合下面的条件:

<p id="id-name" class="class-name">This is a blue and green text</p>

那么这段文本的颜色将会是红色，因为 id 选择器的特异度最高。

通常建议使用类选择器和 ID 选择器来组织 CSS 代码，并避免使用元素选择器和属性选择器来过于精确地定位元素。这样可以使代码更易于维护和重用。

特别地，使用 !important 标记可以强制应用样式，其特异度为 1,0,0,0,0 。例如：

p { color: blue !important; }

这段代码将强制所有段落元素的字体颜色设置为蓝色，即使其他样式有更高的特异度也会被覆盖。使用 !important 标记应该谨慎使用，因为它可能导致样式的不一致和难以维护。开发者应该遵循一些最佳实践来组织和编写 CSS 代码，以避免特异度问题。

使用类选择器和 ID 选择器来组织样式。
避免使用过于精确的元素选择器和属性选择器。
使用外部样式表来组织和维护 CSS 代码。
使用浏览器的开发者工具来查看样式是否正确应用。
使用 !important 标记时，应该谨慎使用，因为它可能导致样式的不一致和难以维护。

总之，选择器特异度是一个非常重要的部分，在调试 CSS 样式时需要考虑。

CSS继承

CSS 继承是指当一个元素的样式被继承到其子元素上的过程。只有一些 CSS 属性是可继承的，例如 font-size, color, font-family 等。

例如，如果有以下样式:

body {
    font-size: 16px;
    color: blue;
}

那么所有的子元素都会继承 body 元素的字体大小和颜色样式，除非被子元素的样式覆盖。

<body>
    <p>This is a blue text</p>
    <h1>This is also a blue text</h1>
</body>

继承属性是有益的，因为它允许你在一个地方定义基本样式，然后在其他地方进行扩展。

另一方面，有些属性不能继承，例如：border, padding, margin等。这些属性只会影响到当前元素。

总之，CSS 继承是一个很有用的特性，能够使 CSS 代码更简洁、更易维护。但是，在使用继承属性时，应该确保它们能够达到预期的效果。

CSS求值过程解析

CSS 求值过程是指浏览器如何将所有的 CSS 规则应用到 HTML 元素上的过程。这个过程包括以下几个步骤:

收集所有的 CSS 规则：浏览器会收集所有来自外部样式表和内部样式块的 CSS 规则，并将它们存储在一个数据。
构建选择器的优先级树：浏览器会根据选择器的特异度来构建一个优先级树，以确定哪些规则会优先应用。
应用样式：浏览器会按照优先级树的顺序，逐层匹配元素并应用样式。
计算继承和默认值：浏览器会考虑继承和默认值的情况，来确定最终的样式。
重绘和回流：如果样式改变会影响布局或尺寸，则需要进行重绘和回流。

CSS布局方式及相关技术

CSS 布局方式包括以下几

布局相关技术：

Flexbox：一种用于创建弹性布局的技术，能够容易地实现垂直和水平对齐，以及自适应大小。
Grid：一种用于创建网格布局的技术，能够轻松地实现复杂的布局，包括网格线和单元格的定位和大小。
CSS Grid Layout: CSS Grid Layout 是一个专门用于创建网格布局的技术，能够轻松地实现复杂的布局，包括网格线和单元格的定位和大小。
CSS Flexible Box Layout: CSS Flexible Box Layout 是一种用于创建弹性布局的技术，能够容易地实现垂直和水平对齐，以及自适应大小。
CSS Multi-column Layout: CSS Multi-column Layout

三、课后个人总结

本课程让我们深入了解了 CSS 的各个方面。首先，我们学习了 CSS 代码构成，了解了 CSS 中的选择器、属性和值等概念。然后，我们学习了 CSS 的使用方法，了解了如何在 HTML 中引用 CSS 代码并应用样式。

接着，我们学习了 CSS 的流程，了解了如何使用选择器组和文本渲染来应用样式。最后，我们学习了如何调试 CSS 代码，使用浏览器的开发者工具来查看样式是否正确应用。

在第二部分中，我们深入了解了 CSS 的进阶知识。首先，我们学习了 CSS 选择器的特异度，了解了如何计算选择器的特异度，并使用优先级规则来确定样式的应用顺序。

其次, 我们学习了CSS继承，了解了如何使用继承来继承父元素的样式，并知道什么样式可以继承，什么样式不能继承。

然后我们学习了CSS求值过程解析，了解了浏览器如何将所有的 CSS 规则应用到 HTML 元素上的过程。

最后，我们学习了 CSS 布局方式及相关技术，这些布局方式和技术都可以帮助我们创建复杂的布局效果。

总之, 本课程给我们提供了一个很好的理解CSS的机会, 我们不仅了解了CSS的基本知识，还深入了解了CSS的进阶知识，这些知识都可以在我们今后的工作学习中发挥作用。

【理解CSS|青训营】

前言