第2章：CSS基本语法 --[CSS零基础入门]

CSS（层叠样式表，Cascading Style Sheets）是用来描述HTML或XML（包括各种XML：SVG, MathML 或 XHTML）等文档的外观和格式的语言。以下是CSS的基本语法：

1.选择器

1.元素选择器

元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时，你是在告诉浏览器对页面中所有该类型的HTML元素应用特定的样式。以下是两个使用元素选择器的CSS示例：

示例 1: 修改所有段落的字体颜色和大小

假设你想改变网页上所有段落（<p> 标签）的文本颜色为蓝色，并且设置字体大小为16像素，你可以这样写：

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

这段CSS代码将应用于HTML文档中的每一个<p>元素，使得它们的文本颜色变为蓝色，字体大小变为16px。

示例 2: 设置所有链接的样式

如果你想更改所有超链接（<a> 标签）的默认样式，比如去掉下划线并且当鼠标悬停在链接上时改变背景颜色，你可以这样做：

a {
   
    text-decoration: none; /* 去掉下划线 */
}

a:hover {
   
    background-color: yellow; /* 当鼠标悬停时背景变黄 */
}

在这个例子中，第一个规则去掉了所有链接的下划线，第二个规则设置了当用户将鼠标悬停在链接上时，链接的背景颜色会变成黄色。请注意，:hover 是一个伪类，它允许你定义当特定事件发生时元素的样式，在这个情况下，是指当用户的鼠标指针悬停在链接上方时。

这两个示例展示了如何使用元素选择器来快速地为同类型的所有HTML元素应用统一的样式。

2.类选择器

类选择器是通过在HTML元素中定义的class属性来选择元素，并为其应用特定样式的。使用类选择器可以让你更加灵活地控制页面上的样式，因为同一个类可以在多个元素上使用，而且不会像ID选择器那样限制为文档中的唯一实例。以下是两个使用类选择器的CSS示例：

示例 1: 使用类选择器设置文本对齐方式

假设你有一个网页，其中某些段落需要居中文本，而其他的则不需要。你可以创建一个名为.center-text的类，然后将这个类应用到需要居中显示的段落上。

<p class="center-text">这段文字将会居中。</p>
<p>这段文字保持默认对齐。</p>

对应的CSS代码如下：

.center-text {
   
    text-align: center;
}

这样，所有带有.center-text类的段落都会以居中的方式显示其文本内容。

示例 2: 使用类选择器更改按钮样式

如果你想为网页上的按钮添加自定义样式，比如改变背景颜色、字体颜色和边框圆角等，你可以定义一个类（例如.custom-button），并将其应用于各个按钮元素。

<button class="custom-button">点击我</button>
<button>普通的按钮</button>

对应的CSS代码如下：

.custom-button {
   
    background-color: #4CAF50; /* 绿色背景 */
    color: white;              /* 白色文字 */
    padding: 10px 20px;        /* 内边距 */
    border: none;              /* 无边框 */
    border-radius: 8px;