CSS 语法和选择器

1. CSS 简介

CSS（层叠样式表）是一种用于描述 HTML 文档外观和格式的语言。通过 CSS，开发者可以控制网页的布局、颜色、字体、间距等视觉元素。CSS 与 HTML 结合使用，使得网页设计更加灵活和美观。

1.1 CSS 的历史

• 1994年：Håkon Wium Lie 提出了 CSS 的概念。
• 1996年：CSS1 发布，提供了基本的样式功能。
• 1998年：CSS2 发布，引入了更多的布局和媒体类型。
• 2011年：CSS3 发布，引入了模块化设计，每个模块独立发展。

2. CSS 语法

CSS 语法由选择器和声明块组成。选择器用于选择 HTML 元素，声明块包含一组属性和值，用于定义元素的样式。

2.1 基本语法结构

选择器 {
    属性1: 值1;
    属性2: 值2;
}

• 选择器：选择要应用样式的 HTML 元素。
• 属性：定义元素的样式属性。
• 值：属性的具体值。

2.2 示例

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

在这个例子中，p 是选择器，color 和 font-size 是属性，red 和 16px 是值。

3. CSS 选择器

选择器是 CSS 的核心部分，用于选择 HTML 元素并应用样式。

3.1 元素选择器

选择所有指定类型的 HTML 元素。

p {
    color: blue;
}

3.2 类选择器

选择所有具有指定类名的 HTML 元素。

.highlight {
    background-color: yellow;
}

3.3 ID 选择器

选择具有指定 ID 的 HTML 元素。

#header {
    font-size: 24px;
}

3.4 属性选择器

选择具有指定属性的 HTML 元素。

input[type="text"] {
    border: 1px solid gray;
}

3.5 伪类选择器

选择处于特定状态的 HTML 元素。

a:hover {
    text-decoration: underline;
}

3.6 伪元素选择器

选择元素的特定部分。

p::first-line {
    font-weight: bold;
}

4. 实践练习

4.1 练习1：使用元素选择器

创建一个 HTML 文件，包含多个段落元素，并使用 CSS 将所有段落文本颜色设置为绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice</title>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

4.2 练习2：使用类选择器

创建一个 HTML 文件，包含多个段落元素，并为其中一些段落添加 highlight 类，使用 CSS 将这些段落的背景颜色设置为黄色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

4.3 练习3：使用伪类选择器

创建一个 HTML 文件，包含一个链接元素，并使用 CSS 在鼠标悬停时改变链接的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">Hover over me!</a>
</body>
</html>

5. 总结

通过本教程，你学习了 CSS 的基本语法和常用选择器。CSS 是网页设计中不可或缺的一部分，掌握这些基础知识将为你后续的学习打下坚实的基础。继续探索 CSS 的其他功能，如盒模型、布局、动画等，将使你的网页设计更加丰富多彩。

6. 下一步

• 学习 CSS 盒模型和布局基础。
• 探索 CSS 的颜色和背景设置。
• 深入了解 CSS 的文本样式和字体。

希望你能享受 CSS 的学习过程，并创造出令人惊艳的网页设计！