19 CSS基础之CSS简介
在前一章中，我们详细探讨了表单和输入元素，尤其是如何使用“提交”和“重置”按钮来提高用户交互的效率。在这一章中，我们将开启一个CSS的世界，让网页设计变得生动且具有吸引力。
什么是CSS？
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML文档的表现样式的语言。通过CSS，我们可以控制网页的布局、颜色、字体、边距等各个方面，进而使网页更加美观和易于使用。
CSS的基本结构
一个典型的CSS样式规则包含两个部分：选择器和声明块。
- 选择器是我们想要应用样式的HTML元素。
- 声明块包含一对大括号
{}，其中包含一系列的一对属性和属性值。
例如：
1 | h1 { |
在上述例子中，h1是选择器，表示所有的<h1>标签元素。声明块中包含两个样式声明：color: blue; 表示文字颜色为蓝色，font-size: 24px; 则表示字体大小为24像素。
为何使用CSS？
- 样式与内容分离：使用CSS，我们可以将样式和内容分开，这样可以使HTML文件更简洁。
- 更好的维护性：当需要更改布局或设计时，我们只需要修改CSS文件，而不是所有的HTML文件。
- 减少重复代码：通过类（class）或ID，我们可以多次使用相同的样式，减少不必要的代码重复。
CSS的引入方式
CSS可以通过三种方式引入到HTML文档中：
内联样式：直接在HTML标签中使用
style属性。1
<h1 style="color: blue;">这是一个标题</h1>
内部样式表：在HTML文档的
<head>部分使用<style>标签。1
2
3
4
5
6
7
8<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>外部样式表：创建一个单独的CSS文件，然后在HTML中引入。比如创建一个
styles.css文件，其中含有：1
2
3
4h1 {
color: blue;
font-size: 24px;
}在HTML文件中引入：
1
2
3<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
外部样式表最为推荐，因为它可以让CSS文件在多个HTML文件中复用，提高了整体的效率。
案例：基本网页样式
我们来看一个简单的示例，使用CSS来美化一个基本的网页。下面是一个HTML文件的示例以及它的对应CSS。
HTML文件
1 |
|
CSS文件 (styles.css)
1 | body { |
小结
通过上述内容，我们对CSS有了初步的了解，掌握了其基本结构和应用方式。CSS不仅可以让我们的网页更具美感，还能提升用户体验。在下一章中，我们将深入探讨CSS中的选择器与属性，为我们的网页设计提供更强大和灵活的控制能力。
19 CSS基础之CSS简介
