如果说 HTML 是网页的结构，那么 CSS 就是网页的样式。
在本课中，你将学习 CSS 如何与 HTML 配合使用，以及在哪里可以找到更多关于 CSS 的信息。
什么是 CSS？
CSS 代表层叠样式表。如果说 HTML 描述了网页的结构，那么 CSS 则描述了文档的样式。
CSS 用于定义网页的颜色、字体和布局。
让我们看看 HTML 课程中的 HTML 文档：
<html lang="en">
<head>
<title>我的 HTML 文档</title>
</head>
<body class="main">
<h1>这是我的 HTML 文档的标题</h1>
<img src="https://picsum.photos/250" alt="一张随机选择的图片">
<p>这是我的 HTML 文档的内容。</p>
</body>
</html>在上面的例子中，HTML 文档没有样式。它在浏览器中使用默认的浏览器样式显示。但你可以使用 CSS 来改变样式。
例如，你可以将标题元素的颜色改为红色，并将段落元素的字体大小改为 20 像素。
<html lang="en">
<head>
<title>我的 HTML 文档</title>
</head>
<body class="main">
<h1 style="color: red;">这是我的 HTML 文档的标题</h1>
<img src="https://picsum.photos/250" alt="一张随机选择的图片">
<p style="font-size: 20px;">这是我的 HTML 文档的内容。</p>
</body>
</html>使用 style 属性将 CSS 添加到元素被称为内联样式，但这并不是为 HTML 文档添加样式的最佳方式。
相反，你可以使用 <style> 元素将 CSS 添加到文档中。
<html lang="en">
<head>
<title>我的 HTML 文档</title>
<style>
h1 {
color: red;
}
p {
font-size: 20px;
}
</style>
</head>
<body class="main">
<h1>这是我的 HTML 文档的标题</h1>
<img src="https://picsum.photos/250" alt="一张随机选择的图片">
<p>这是我的 HTML 文档的内容。</p>
</body>
</html>也可以使用外部样式表将 CSS 添加到文档中。这是为文档添加 CSS 的首选方式。
<html lang="en">
<head>
<title>我的 HTML 文档</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="main">
<h1>这是我的 HTML 文档的标题</h1>
<img src="https://picsum.photos/250" alt="一张随机选择的图片">
<p>这是我的 HTML 文档的内容。</p>
</body>
</html>在上面的例子中，style.css 文件将包含以下 CSS：
h1 {
color: red;
}
p {
font-size: 20px;
}在这些例子中，CSS 一直针对特定的元素。但也可以根据元素的属性来定位它们。
例如，你可以定位 body 元素的 class 属性，并为其添加边框。
.main {
border: 5px solid black;
}CSS 能做的远不止改变元素的颜色和字体大小。它还可以用于创建复杂的布局、动画等等。
和 HTML 一样，CSS 在 WordPress 网站中随处可见。仪表盘有其自己的一套核心 CSS 来控制其外观和感觉。
主题会附带一套自定义的 CSS 来样式化主题元素。
在网站前端添加内容的插件也会使用 CSS 来样式化这些内容。
WordPress 还允许你灵活地添加自己的自定义 CSS，或使用外部 CSS 框架，例如 Bootstrap 或 Tailwind。
其他资源
有关 CSS 的更多信息，你可以访问以下在线资源：
- MDN 上的 CSS
- Web.dev 上的 CSS
- freeCodeCamp 响应式网页设计课程