在前一章中，我们详细探讨了表单和输入元素，尤其是如何使用“提交”和“重置”按钮来提高用户交互的效率。在这一章中，我们将开启一个CSS的世界，让网页设计变得生动且具有吸引力。

什么是CSS？

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML文档的表现样式的语言。通过CSS，我们可以控制网页的布局、颜色、字体、边距等各个方面，进而使网页更加美观和易于使用。

CSS的基本结构

一个典型的CSS样式规则包含两个部分：选择器和声明块。

选择器是我们想要应用样式的HTML元素。
声明块包含一对大括号 {}，其中包含一系列的一对属性和属性值。

例如：

h1 {
    color: blue;
    font-size: 24px;
}

在上述例子中，h1是选择器，表示所有的<h1>标签元素。声明块中包含两个样式声明：color: blue; 表示文字颜色为蓝色，font-size: 24px; 则表示字体大小为24像素。

为何使用CSS？

样式与内容分离：使用CSS，我们可以将样式和内容分开，这样可以使HTML文件更简洁。
更好的维护性：当需要更改布局或设计时，我们只需要修改CSS文件，而不是所有的HTML文件。
减少重复代码：通过类（class）或ID，我们可以多次使用相同的样式，减少不必要的代码重复。

CSS的引入方式

CSS可以通过三种方式引入到HTML文档中：

内联样式：直接在HTML标签中使用style属性。

<h1 style="color: blue;">这是一个标题</h1>

内部样式表：在HTML文档的<head>部分使用<style>标签。

<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>

外部样式表：创建一个单独的CSS文件，然后在HTML中引入。比如创建一个styles.css文件，其中含有：

h1 {
    color: blue;
    font-size: 24px;
}

在HTML文件中引入：

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

外部样式表最为推荐，因为它可以让CSS文件在多个HTML文件中复用，提高了整体的效率。

案例：基本网页样式

我们来看一个简单的示例，使用CSS来美化一个基本的网页。下面是一个HTML文件的示例以及它的对应CSS。

HTML文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>简单CSS示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一段简单的文本，用于展示CSS样式的效果。</p>
</body>
</html>

CSS文件 (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

h1 {
    color: darkblue;
    text-align: center;
    margin-top: 20px;
}

p {
    color: #333;
    padding: 10px 20px;
}

小结

通过上述内容，我们对CSS有了初步的了解，掌握了其基本结构和应用方式。CSS不仅可以让我们的网页更具美感，还能提升用户体验。在下一章中，我们将深入探讨CSS中的选择器与属性，为我们的网页设计提供更强大和灵活的控制能力。

Jupyter AI

19 CSS基础之CSS简介