首页 > 编程笔记

HTML引用CSS的4种方法

本节主要介绍如何在 HTML 中使用 CSS，包括行内样式、内嵌式、链接式和导入样式等，最后探讨各种方式的优先级问题。

1、行内样式

行内样式是所有样式中最直接的一种，它直接对 HTML 标记使用 style 属性，然后将 CSS 代码写在其中。

例如以下代码：
<html>
<head>
   <title>页面标题</title>
</head>
<body>
   <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
   <p style="color:#000000; font-style:italic;">正文内容2</p>
   <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>
效果如下图所示：


图 1 行内样式

可以看到 3 个 <p> 标记中都使用了 style 属性，并且设置了不同的 CSS 样式，各个样式之间互不影响，分别显示自己的样式效果。

第 1 个 <p> 标记设置了文字颜色为红色（color:#FF0000;），字号大小为 20px（font-size:20px;），并有下画线（text-decoration:underline;）。第 2 个 <p> 标记设置了文字颜色为黑色，字体为斜体。最后一个 <p> 标记设置文字颜色为紫色，字号为 25px，字体为粗体。

行内样式是最简单的 CSS 使用方法之一，但由于需要为每一个标记设置 style 属性，后期维护成本很高，而且网页容易过“胖”，因此不推荐使用。

2、内嵌式

内嵌式就是将 CSS 写在 <head> 标记之间，并且用 <style> 标记进行声明。

例如下面这段代码： 
<html>
<head>
    <title>页面标题</title>
    <style type="text/css">
        p {
            color:#0000FF;
            text-decoration:underline;
            font-weight:bold;
            font-size:25px;
        }
    </style>
</head>
<body>
    <p>这是第1行正文内容……</p>
    <p>这是第2行正文内容……</p>
    <p>这是第3行正文内容……</p>
</body>
</html>
可以看到，所有 CSS 的代码部分被集中在了同一个区域，方便后期维护，效果如下图所示。


图 2 内嵌式

但如果是一个网站，拥有很多页面，对于不同页面上的 <p> 标记都要采用同样的风格时，使用内嵌式的方法就比较麻烦，维护成本也高，因此内嵌式仅适用于对特殊的页面设置单独的样式风格。

3、链接式

链接式是使用频率最高、最实用的方法。它将 HTML 本身与 CSS 样式风格分离为两个或者多个文件，实现了页面框架 HTML 代码与美工 CSS 代码的完全分离，这使得前期制作和后期维护都十分方便，程序开发人员与设计师也可以很好地分工合作。

同一个 CSS 文件可以链接到多个 HTML 文件中，甚至可以链接到整个网站的所有页面中，使网站整体风格统一、协调，并且后期维护的工作量也将大大减少。

下面来看一个链接式的实例。
1) 创建 HTML 文件，代码如下。 
<html>
<head>
    <title>页面标题</title>
    <link href="03-10.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h2>CSS标题</h2>
    <p>这是正文内容……</p>
    <h2>CSS标题</h2>
    <p>这是正文内容……</p>
</body>
</html>
创建 css 文件，内容如下： 
h2{
    color:#0000FF;
}
p{
    color:#FF0000;
    text-decoration:underline;
    font-weight:bold;
    font-size:15px;
}
保存文件时要确保两个文件在同一个文件夹中，否则 href 属性中需要带有正确的文件路径。

可以看到，所有的 CSS 代码从 HTML 文件中分离了出来，html 文件中的 <head> 标记之间加上了 <link href="03-10.css" type="text/css" rel="stylesheet"> 语句，将 CSS 文件链接到页面中，对其中的标记进行了样式控制，效果如下图所示。

链接式的最大优势在于 CSS 代码与 HTML 代码完全分离，并且同一个 CSS 文件可以被不同的 HTML 链接使用。因此在设计整个网站时，可以将所有页面都链接到同一个 CSS 文件，使用相同的样式风格。如果整个网站需要进行样式上的修改，只需要修改这一个 CSS 文件即可。

4、导入样式

导入样式与链接式的功能基本相同，只是在语法和运作方式上略有区别。导入的样式表在 HTML 文件初始化时会被导入 HTML 文件内，作为文件的一部分，类似内嵌式的效果。链接的样式表则是在 HTML 标记需要格式时才以链接的方式引入。

在 HTML 文件中导入样式表，常用的有以下几种 @import 语句，可以选择任意一种放在 <style> 标记之间。 
@import url(sheet1.css);
@import url("sheet1.css");
@import url('sheet1.css');
@import sheet1.css;
@import "sheet1.css";
@import 'sheet1.css';
下面制作一个实例： 
<html>
<head>
    <title>页面标题</title>
    <style type="text/css">
        @import url(03-10.css);
    </style>
</head>
<body>
    <h2>CSS标题</h2>
    <p>这是正文内容……</p>
    <h2>CSS标题</h2>
    <p>这是正文内容……</p>
</body>
</html>
效果如下图所示。


图 4 导入样式

导入样式的最大用处在于可以让一个 HTML 文件导入很多样式表。

下面使用两个 @import 语句将两个 css 同时导入 HTML 文件中，具体代码如下：
<html>
<head>
    <title>页面标题</title>
    <style>
        @import url(03-10.css);
        @import url(03-12.css);        /* 同时导入两个CSS样式表 */
    </style>
</head>
<body>
    <h2>CSS标题</h2>
    <p>这是正文内容……</p>
    <h2>CSS标题</h2>
    <p>这是正文内容……</p>
    <h3>新增加的标题</h3>
    <p>新增加的正文内容</p>
</body>
</html>

各种方式的优先级问题

前面的 4 个小节分别介绍了 CSS 控制页面的 4 种不同的方法，各种方法都有其自身的特点。这 4 种方法如果同时被运用到同一个 HTML 文件的同一个标记上，就会出现优先级的问题。

如果在各种方法中设置的属性不一样，例如内嵌式设置字体为宋体，行内样式设置颜色为红色，那么显示结果会让二者同时生效，即显示宋体红色字。但当各种方法同时设置一个属性时，例如都设置字体的颜色，情况就会比较复杂。

下面举例说明：
1) 先创建两个 CSS 文件，其中第 1 个命名为“red.css”，其内容如下。
p{
   color:red;
}
第 2 个命名为“green.css”，其内容如下。
p{
   color:green;
}
这两个 CSS 文件分别将文本段落文字的颜色设置为红色和绿色。接着创建一个 HTML 文件，代码如下
<html>
<head>
    <title>页面标题</title>
    <style type="text/css">
        p {
            color:#blue;
        }
        @import url(red.css);
    </style>
</head>
<body>
    <p style="color:gray;">观察文字的颜色</p>
</body>
</html>
从代码中可以看到，在内嵌式的样式规则中，p 段落文字的颜色设置为蓝色，而行内样式又将 p 段落文字的颜色设置为灰色。此外，通过导入样式的方式引入了 red.css，又将文字颜色设置为红色，那么这时这个段落的文字到底会显示成什么颜色呢？

效果如下图所示。


图 5 文字显示为灰色

可以看到，结果是灰色，即以行内样式为准。接下来将行内样式代码删除，再次在浏览器中观察，可以看到结果是蓝色，即以内嵌式为准。接下来把内嵌式代码删除，仅保留导入命令，这时在浏览器中将看到红色的文字。

综上所述，行内样式、内嵌式和导入样式这 3 种方式的优先级关系是：

行内样式 >内嵌式 >导入样式

接下来在代码中以链接式引入 CSS 文件，分别尝试以下两种情况。
1) 第一种情况： 
<head>
    <style type="text/css">
        @import url(red.css);
    </style>
    <link href="green.css" type="text/css" rel="stylesheet">
</head>

2) 第二种情况： 
<head>
    <link href="green.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        @import url(red.css);
    </style>
</head>
这两种情况的区别在于哪种方式的样式表放在前面。经过尝试可以发现，哪种样式表放在后面就以哪种样式表为准。

结合前面的结论，如果我们把导入样式和链接式统称为“外部样式”，那么优先级规则应该写为：
这个规则已经比较完善了，然而还没有结束。现在将 <head> 标记中的代码改为如下形式。 
<head>
    <style type="text/css">
        p{
            color:blue;
        }
    </style>
    <style type="text/css">
        @import url(red.css);
    </style>
</head>
将导入样式的命令和内嵌式的样式放在两个 <style> 标记中，此时在浏览器中文字会显示为红色，这就说明此时将不再遵循内嵌式优先于导入样式的规则了。例如下面这段代码。
<head>
    <style type="text/css">
        p{
            color:blue;
        }
    </style>
    <link href="green.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        @import url(red.css);
    </style>
</head>
由此可知，优先级最高的是最后面的导入样式，其次是链接式，最后才是内嵌式。因此，如果在 <head> 标记中存在多个 <style> 标记，那么这些 <style> 标记和链接式之间将由先后顺序决定优先级，而在同一个 <style> 标记内部才会遵循内嵌式优先于导入样式的规则。

说明，虽然各种 CSS 样式加入页面的方式有优先级之分，但在建设网站时最好只使用其中的 1~2 种，这样既有利于后期的维护和管理，也不会出现各种样式冲突的情况，便于设计者理顺设计的整体思路。

推荐阅读