本章节我们学习 CSS 的语法规则。
CSS 的基本语法结构如下：
选择器 {属性: 值;属性: 值;}
例如：
h1 {color: blue;font-size: 16px;}
这个规则表示：所有 <h1> 标签的文本颜色为蓝色，字体大小为 16 像素。
Tips: CSS 中的每个声明都必须以分号（;）结束，最后一个声明可以省略分号，但为了保持一致性，建议始终添加分号。
CSS 中的注释使用 /* */ 格式：
/* 这是一个 CSS 注释 */h1 {color: blue; /* 这也是一个注释 */}
注释对于解释代码、临时禁用某些样式或标记代码的不同部分非常有用。
CSS 可以通过以下三种方式引入到 HTML 文档中：
内联样式：直接在 HTML 元素上使用 style 属性
<h1 style="color: blue; font-size: 16px;">标题</h1>
内部样式表：在 HTML 文档的 <head> 部分使用 <style> 标签
<head><style>h1 {color: blue;font-size: 16px;}</style></head>
外部样式表：通过 <link> 标签引入外部 CSS 文件
<head><link rel="stylesheet" href="styles.css"></head>
Tips: 外部样式表是最常用的方式，它可以将样式与内容分离，提高代码的可维护性和复用性。
选择器是 CSS 规则的第一部分，它指定了哪些 HTML 元素将应用这些样式。
元素选择器：选择特定类型的 HTML 元素
p { color: blue; } /* 所有段落文本为蓝色 */
类选择器：选择具有特定类名的元素
.highlight { background-color: yellow; } /* 所有带有 class="highlight" 的元素背景为黄色 */
ID 选择器：选择具有特定 ID 的元素
#header { font-size: 24px; } /* ID 为 "header" 的元素字体大小为 24px */
通配符选择器：选择所有元素
* { margin: 0; padding: 0; } /* 所有元素的外边距和内边距为 0 */
后代选择器：选择特定元素内的所有后代元素
div p { color: red; } /* div 内的所有段落文本为红色 */
子元素选择器：选择特定元素的直接子元素
div > p { color: red; } /* div 的直接子段落文本为红色 */
相邻兄弟选择器：选择紧接在特定元素后的元素
h1 + p { font-size: 18px; } /* 紧接在 h1 后的段落字体大小为 18px */
通用兄弟选择器：选择特定元素后的所有兄弟元素
h1 ~ p { font-size: 18px; } /* h1 后的所有段落字体大小为 18px */
属性选择器根据元素的属性值来选择元素：
[type="text"] { border: 1px solid gray; } /* 所有 type="text" 的元素有灰色边框 */[href^="https"] { color: green; } /* 所有 href 以 "https" 开头的链接为绿色 */[href$=".pdf"] { color: red; } /* 所有 href 以 ".pdf" 结尾的链接为红色 */[class*="btn"] { padding: 10px; } /* 所有 class 包含 "btn" 的元素内边距为 10px */
伪类选择器用于选择元素的特定状态：
a:hover { text-decoration: underline; } /* 鼠标悬停在链接上时添加下划线 */li:first-child { font-weight: bold; } /* 列表中的第一个项目加粗 */input:focus { border-color: blue; } /* 输入框获得焦点时边框变为蓝色 */
CSS 中的值可以使用不同的单位：
绝对单位：
px：像素pt：点（1 点 = 1/72 英寸）in：英寸cm：厘米mm：毫米相对单位：
%：相对于父元素的百分比em：相对于元素的字体大小rem：相对于根元素的字体大小vw：相对于视口宽度的百分比vh：相对于视口高度的百分比Tips: 相对单位（如 em、rem、%）通常比绝对单位（如 px）更灵活，能更好地适应不同的屏幕尺寸和设备。
CSS 中可以使用多种方式表示颜色：
颜色关键字：
color: red;color: blue;color: transparent;
十六进制值：
color: #ff0000; /* 红色 */color: #00ff00; /* 绿色 */color: #0000ff; /* 蓝色 */
RGB 值：
color: rgb(255, 0, 0); /* 红色 */color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
HSL 值：
color: hsl(0, 100%, 50%); /* 红色 */color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
当多个 CSS 规则应用于同一个元素时，浏览器会根据优先级来决定使用哪个规则。优先级从高到低依次为：
!important：最高优先级
p { color: blue !important; } /* 这个规则会覆盖其他所有规则 */
内联样式：直接在 HTML 元素上使用 style 属性
<p style="color: red;">这个文本是红色的</p>
ID 选择器：使用 ID 选择器的规则
#myId { color: green; }
类选择器、属性选择器和伪类：使用这些选择器的规则
.myClass { color: yellow; }[type="text"] { color: purple; }:hover { color: orange; }
元素选择器和伪元素：使用这些选择器的规则
p { color: black; }::first-line { color: gray; }
通配符选择器：使用通配符选择器的规则
* { color: white; }
当多个规则具有相同的优先级时，CSS 遵循以下层叠规则：
来源顺序：后出现的规则会覆盖先出现的规则
p { color: blue; }p { color: red; } /* 这个规则会覆盖上面的规则 */
继承：某些属性会从父元素继承到子元素
body { color: blue; } /* 所有文本默认为蓝色 */
默认值：如果没有任何规则应用于元素，则使用浏览器的默认样式
让我们通过一个简单的练习来巩固所学的 CSS 语法知识。下面的代码编辑器包含了一个基础的 HTML 结构，你需要：