CSS 教程 - 第 1 课 - 连接 CSS 样式

10/10/2025, by Ivan

我不会解释为什么需要 CSS。如果你打开了这本教程，那就说明你想学习它。我只想说，CSS 的功能非常强大，它允许你排版任何复杂的网页布局。同时，使用 CSS 意味着你必须放弃使用某些 HTML 标签属性，如 size、color、bgcolor、align 等，这些属性会“干扰”CSS 的正常工作。

将 CSS 连接到你的 HTML 文件至少有三种方法。让我们先看看最简单的方法，然后是第二种和最正确的方法。

在标签内部编写 CSS

可以通过 style 属性来连接 CSS：

<div style="width: 200px; height: 100px;">
  块
</div>

这样我们就创建了一个宽 200 像素、高 100 像素的块。让我们看看 CSS 是如何书写的。首先我们写属性 style=""，然后在引号中写 CSS 样式。

style="属性:值;属性:值;属性:值"

我们先写属性（如 width、height 等），接着是冒号，然后是属性的值。每个属性之间用分号分隔。

现在来看第二种写 CSS 的方法。

在 HTML 文档开头编写 CSS

为此，我们使用 <style></style> 标签，在其中编写 CSS 代码。

<html>
 <head>
  <title>CSS 教程</title>
  <style type="text/css">
  我们将在这里编写 CSS 代码
  </style>
 </head>
 <body>
  <p>与 drupalbook.org 一起学习 CSS</p>
 </body>
</html>

我们在 <head></head> 标签中、紧接着 <title> 标签后编写 <style> 标签。现在让我们写一些 CSS 代码：

<html>
 <head>
  <title>CSS 教程</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* 页面背景 */     
     font-size: 14px;     /* 字体大小 */
   }
   p{
     color: #ff0000; /* 文本颜色 */
   }
  </style>
 </head>
 <body>
  <p>与 drupalbook.org 一起学习 CSS</p>
  <p>第 2 行：与 drupalbook.org 一起学习 CSS</p>
 </body>
</html>

让我们看看如何为标签编写 CSS。当我们在 CSS 中写标签名时，所有这些标签都会应用相应的 CSS 参数。例如，如果我们写 p，那么所有段落标签都会使用相同的样式。

当我们编写 CSS 代码时，首先要指定要应用样式的标签，然后在花括号 {} 中写 CSS 样式。CSS 样式的语法与 style="" 属性中的语法相同：

属性:值;属性:值;属性:值

属性、冒号、值、分号，然后再次写属性、冒号、值、分号……最后一个样式的分号可以省略，但最好还是加上。

我们已经用两种方法嵌入了 CSS 样式，现在让我们来看第三种，也是最推荐的方法。

在单独的文件中编写 CSS

这是最好的方法，它允许你将 CSS 与 HTML 代码完全分离。当然，有时你可能想直接在 HTML 中插入 CSS，但在这种情况下要“克制自己”，将 CSS 独立到外部文件中。为什么呢？

这是 CSS 的主要思想——将文本内容与样式分开。HTML 负责结构化文本，而 CSS 负责让文本看起来更美观。HTML 负责输出文本，而 CSS 控制大小、颜色、形状、边框和间距。

首先，如果 HTML 和 CSS 写在同一个文件中，代码会变得混乱且难以阅读。其次，CSS 文件会被浏览器缓存，如果把所有 CSS 放在单独文件中，网页加载速度会更快，因为浏览器只需加载一次 CSS。我想现在你明白我的意思了吧？

CSS 应该尽量放在单独的文件中！这就是我要强调的。现在我们来创建一个单独的 CSS 文件。为此使用 <link> 标签：

<html>
 <head>
  <title>CSS 教程</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>与 drupalbook.org 一起学习 CSS</p>
  <p>第 2 行：与 drupalbook.org 一起学习 CSS</p>
 </body>
</html>

type="text/css" — 指定文件类型为 CSS，

rel="stylesheet" — 表示这是一个样式表文件，

media="all" — 表示该 CSS 文件适用于所有设备，

href="styles.css" — 指定 CSS 文件的路径，在此例中为相对路径。

现在我们已经知道如何连接 CSS 文件，请在与 HTML 文件相同的文件夹中创建 styles.css 文件。

然后打开 styles.css 文件，并将以下 CSS 样式粘贴进去：

body{
  background: #eeeeee; /* 页面背景 */
  font-size: 14px;     /* 字体大小 */
}
p{
  color: #ff0000; /* 文本颜色 */
}

保存此文件，然后在浏览器中打开你的 HTML 文件。现在 CSS 已经正确连接到你的页面上，通过外部文件实现。在下一课中，我们将更详细地学习如何在单独文件中编写样式。

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

CSS 教程 - 第 1 课 - 连接 CSS 样式

在标签内部编写 CSS

在 HTML 文档开头编写 CSS

在单独的文件中编写 CSS