CSS 引入方式 - 绿叶网

想要在一个 HTML 页面应用 CSS 样式，共有以下 3 种方式。

外部样式表。
内部样式表。
行内样式表。

外部样式表引入 CSS

外部样式表是最理想的 CSS 引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。

所谓的外部样式表，指的是把 CSS 代码和 HTML 代码都单独放在不同文件中，然后在 HTML 文档中使用 link 标签来引用 CSS 样式表。

当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，我们就可以通过更改一个 CSS 文件来改变整个网站的外观。外部样式表在单独文件中定义，然后在 HTML 文件的 head 标签对中使用 link 标签来引用。

语法：

<link rel="stylesheet" href="文件路径">

说明：

rel 即 “relative” 的缩写，它的取值是固定的，即 "stylesheet"。rel="stylesheet" 表示引入的是一个样式表文件（即 CSS 文件）。

href 属性用于指定 CSS 文件的路径。这个路径可以是相对路径（相对于当前 HTML 文件），也可以是绝对路径。

接下来我们在当前项目结构中添加一个名为 css 的文件夹，然后在该文件夹中添加一个 test.css 文件。整个项目结构如下图所示。

CSS 引入方式的项目结构

其中 test.css 的代码如下：

div { color: red;}

而 test.html 的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <div>绿叶网</div>
    <div>绿叶网</div>
    <div>绿叶网</div>
</body>
</html>

运行 test.html，页面效果如下图所示。

外部样式表引入 CSS

分析：

从页面效果可以看出，外部样式表已经生效了。如果你使用外部样式表，必须使用 link 标签来引入，而 link 标签是放在 head 标签内的。

内部样式表引入 CSS

内部样式表，指的是把 HTML 代码和 CSS 代码放到同一个 HTML 文件中。其中，CSS 代码放在 style 标签内，并且 style 标签是放在 head 标签内部的。

语法：

<style>
    /* 这里编写你的 CSS 代码 */
</style>

说明：

在最新的 HTML5 标准中，下面 2 种写法是等价的，推荐写法 1。

<!-- 写法 1-->
<style>
    ……
</style>

<!-- 写法 2-->
<style type="text/css">
    ……
</style>

示例 1：内部样式表

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div { color: red; }
    </style>
</head>
<body>
    <div>绿叶网</div>
    <div>绿叶网</div>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

内部样式表引入 CSS

分析：

如果你使用内部样式表，CSS 样式必须在 style 标签内定义，而 style 标签是放在 head 标签内的。

行内样式表引入 CSS

行内样式表跟内部样式表类似，也是把 HTML 代码和 CSS 代码放到同一个 HTML 文件。但两者有着本质上的区别：内部样式表的 CSS 是在 “style 标签” 内定义的，而行内样式表的 CSS 是在 “标签的 style 属性” 中定义的。

示例 2：行内样式表

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div style="color: red;">绿叶网</div>
    <div style="color: red;">绿叶网</div>
    <div style="color: red;">绿叶网</div>
</body>
</html>

页面效果如下图所示。

行内样式表引入 CSS

分析：

大家将这个例子和前一个例子对比一下，就知道两段代码实现的效果是一样的，都是定义 3 个 div 元素的颜色为红色。如果是使用内部样式表，样式只需要写一遍；但如果是使用行内样式，则每个元素要单独写一遍。

行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动 CSS 的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。为什么我们一直强烈不推荐使用 Dreamweaver “点点点” 的方式来开发页面？就是因为这种方式产生的页面代码中，所有的 CSS 样式都是行内样式。

对于这 3 种样式表，在实际开发中，大多数情况下都是使用外部样式表。不过在本教程中，为了讲解方便，我们采用的都是内部样式表。

CSS 引入方式的常见问题

1. 不是说 CSS 有 4 种引入方式吗？还有一种是 @import 方式。

@import 方式跟外部样式表很相似。不过在实际开发中，我们很少使用 @import 方式，而更倾向于使用 link 方式（外部样式）。

原因在于 @import 方式会先加载 HTML 后加载 CSS，而 link 是先加载 CSS 后加载 HTML。如果 HTML 在 CSS 之前加载，页面用户体验就会非常差。因此对于 @import 这种方式，小伙伴们不必深究。