总结
*本篇主要涉及 CSS 中选择器和颜色表示方法两个方面。在选择器方面，我们学习了元素选择器、类选择器、ID 选择器、属性选择器和伪类选择器等不同类型的选择器，并了解了它们各自的应用场景。在颜色表示方法方面，我们了解了 RGB 和 HSL 两种颜色表示方法，以及如何使用这些方法来设置网页中的颜色。
希望通过记录，我们可以更好地掌握 CSS 中的选择器和颜色表示方法，以便在今后的开发中更加熟练地应用它们。*
CSS是什么
CSS(Cascading Style Sheets)是一种用于描述网页样式的语言。它可以控制网页的布局、颜色、字体、动画等视觉效果，并与HTML(HyperText Markup Language)结合使用，实现网页的动态效果和交互性。
以下是一个简单的示例代码，演示如何使用CSS来设置一个网页的标题和背景颜色：
<img src="html复制代码" alt="" width="100%" />
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
/* CSS样式 */
body {
background-color: lightblue; /* 设置背景颜色为浅蓝色 */
}
h1 {
color: white; /* 设置标题文字颜色为白色 */
text-align: center; /* 将标题居中对齐 */
}
</style>
</head>
<body>
<h1>Hello, World!</h1> <!-- HTML内容 -->
</body>
</html>
在上面的示例中，我们使用了<style>标签将CSS样式嵌入到HTML文档中。通过选择器(如body和h1),我们可以定义不同的样式规则，以改变网页的外观。在这个例子中，我们将背景颜色设置为浅蓝色，并将标题文字颜色设置为白色，同时将标题居中对齐。
CSS是如何工作的
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：(1)浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。(2)浏览器显示 DOM,并根据 DOM 中的元素和属性来确定如何渲染页面。
CSS 是一种样式表语言，用于描述 HTML 或 XML(包括 SVG、XHTML等)文档的呈现方式。它可以控制文本、颜色、字体、布局和其他视觉效果。CSS 通过选择器来选择要应用样式的元素，并使用属性和值来定义样式。例如，可以使用 color 属性设置文本颜色，使用 font-size 属性设置字体大小。
CSS 样式表可以嵌入到 HTML 文档中，也可以单独保存为一个 CSS 文件。当浏览器解析 HTML 文档时，它会按照一定的顺序应用样式表中的规则。如果多个样式表都应用于同一个文档，那么它们将按照特定的顺序进行应用，这称为“层叠上下文”。
在 CSS 中，有三种类型的选择器：元素选择器、类选择器和 ID 选择器。元素选择器用于选择文档中的特定元素，例如 p 选择器将选择所有的段落元素。类选择器用于选择具有相同类属性的元素，例如 .my-class 选择器将选择所有具有 my-class 类的元素。ID 选择器用于选择具有特定 ID 属性的元素，例如 #my-id 选择器将选择具有 my-id ID 的元素。
除了选择器之外，CSS 还支持许多其他功能，例如盒子模型、定位、渐变和动画等。这些功能可以帮助开发者创建出更加丰富多彩和交互性强的网页。
CSS 的工作原理是将 HTML 和 CSS 转化成 DOM(文档对象模型),然后浏览器将 DOM 渲染成页面。在 CSS 中，所有的元素都被一个个的“盒子(box)”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
CSS 盒子模型是指 HTML 元素在浏览器中渲染时所占用的空间，它由四个部分组成：内容、内边距、边框和外边距。其中，内容区域是元素的实际内容，内边距是元素的内容与边框之间的空间，边框是元素的边界线，外边距是元素的外部边缘与其它元素之间的空间。
CSS 选择器
CSS 选择器是 CSS 规则的第一部分，它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值。常见的选择器有以下几种：
- 元素选择器：按照给定的节点名称，选择所有匹配的元素。例如：
p、div、span、ol、ul等等。 - 类选择器：按照给定的 class 属性的值，选择所有匹配的元素。例如：
.classname。 - ID 选择器：按照给定的 id 属性的值，选择所有匹配的元素。例如：
#idname。 - 属性选择器：按照给定的属性和属性值，选择所有匹配的元素。例如：
[attribute=value]。 - 伪类选择器：按照给定的状态或事件，选择所有匹配的元素。例如：
:hover、:active、:focus等等。 - 伪元素选择器：按照给定的内容，选择所有匹配的元素。例如：
::before、::after等等。
以下是一些常见的 CSS 选择器示例代码：
- 元素选择器：
css复制代码
/* 将所有 <p> 元素的文字颜色设置为红色 */
p {
color: red;
}
- 类选择器：
css复制代码
/* 将所有具有 classname 类的元素的字体大小设置为 16 像素 */
.classname {
font-size: 16px;
}
- ID 选择器：
css复制代码
/* 将具有 idname ID 的元素的背景颜色设置为黄色 */
#idname {
background-color: yellow;
}
- 属性选择器：
css复制代码
/* 将所有 `<a>` 标签中 `target` 属性值为 `_blank` 的链接的鼠标指针样式设置为手形 */
a[target="_blank"] {
cursor: pointer;
}
- 伪类选择器：
css复制代码
/* 将鼠标悬停在链接上时，移除链接下划线的效果 */
a:hover {
text-decoration: none;
}
RGB&HSL
在 CSS 中，RGB 是代表红、绿、蓝三个颜色通道的颜色。可以使用下面的公式将颜色指定为 RGB 值： rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值(255),其他设置为 0。 以下是一些常见的 CSS 中使用 RGB 的示例代码：
- 将背景颜色设置为红色：
body {
background-color: red;
}
- 将文本颜色设置为绿色：
p {
color: green;
}
- 将链接颜色设置为蓝色：
a {
color: blue;
}
- 将图片背景色设置为紫色：
div {
background-image: url("image.jpg");
background-color: rgba(128, 0, 128, 0.5); /*半透明紫色*/
}
HSL 是一种描述颜色的方式，它可以用来定义网页中的颜色。在 HSL 中，色相、饱和度和亮度是三个重要的参数。
- 色相(Hue):表示颜色的种类，通常用角度来表示。例如，红色可以表示为 0 度，绿色可以表示为 120 度，蓝色可以表示为 240 度。通过改变色相的值，可以得到不同的颜色。
- 饱和度(Saturation):表示颜色的纯度或鲜艳程度。饱和度越高，颜色越鲜艳；饱和度越低，颜色越接近灰色。例如，纯红色的饱和度为 100%,而灰色的饱和度为 0%。
- 亮度(Lightness):表示颜色的明暗程度。亮度越高，颜色越明亮；亮度越低，颜色越暗淡。例如，纯白色的亮度为 100%,而黑色的亮度为 0%。
在 CSS 中，可以使用 hsl() 函数来设置元素的颜色。hsl() 函数接受三个参数：色相、饱和度和亮度。例如：
div {
background-color: hsl(240, 50%, 50%);
}
以上代码将 div 元素的背景颜色设置为蓝色。具体来说，色相为 240(表示蓝色),饱和度为 50%(表示中等饱和度),亮度为 50%(表示中等亮度)。
总结
本篇主要涉及 CSS 中选择器和颜色表示方法两个方面。在选择器方面，我们学习了元素选择器、类选择器、ID 选择器、属性选择器和伪类选择器等不同类型的选择器，并了解了它们各自的应用场景。在颜色表示方法方面，我们了解了 RGB 和 HSL 两种颜色表示方法，以及如何使用这些方法来设置网页中的颜色。
通过回顾，我们可以更好地掌握 CSS 中的选择器和颜色表示方法，以便在今后的开发中更加熟练地应用它们。
