CSS引入的3种方式（附带实例）

CSS 作为美化页面的工具，用来描述 HTML 文档样式的标记语言。将 CSS 样式应用到 HTML 标签的方式有 3 种，分别为行内样式、内嵌样式和外链样式。

CSS行内样式

行内样式利用 HTML 标签上的 style 属性来设置，CSS 属性作为 style 属性的属性值来进行书写。

使用行内样式的方式应用 CSS 样式，只能在当前标签生效。

行内样式的语法格式如下：

<标签名 style="属性名1:属性值1;属性名2:属性值2;...属性名n:属性值n">
    标记出来的内容
</标签名>

了解了行内样式的基本语法后，下面使用行内样式，在 HTML 文件中使用 CSS 样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>测试行内样式</title>
  <meta charset="utf-8"/>
</head>
<body>
  <span style="color:red;font-size:100px;">
    小尚今天很高兴！
  </span>
  <span>小尚今天不高兴！</span>
</body>
</html>

在上述代码中，第一个 标签中的 style 属性上设置了 CSS 样式“color：red；font-size：100px；”，表示该标签中的字体会被设置为红色，字体大小会被设置为 100 像素。而第二个没有书写 CSS 样式的 标签中的文字就完全不会受到影响。

运行代码查看效果，测试行内样式如下图所示。

图 1 测试行内样式

需要注意的是，行内样式通常只在为单个元素提供少量样式时使用。在实际开发中，并不推荐使用这种方法来应用 CSS 样式。因为使用这种方式体现不出 CSS 的优点，比如针对整个文档或多个文档，在其对应标签上寻找对应样式依次修改时，使用该方式则会导致工程师的工作量大大增加。所以，即使这种方式编写简单、定位准确，但并不推荐使用。

CSS内嵌样式

如果需要一次性设置多个标签的样式，显然一一设置去实现是不现实的，过于烦琐，那么我们可以借助另一种 CSS 应用样式，即内嵌样式，对其统一设置。

内嵌样式是将 CSS 样式直接编写到 <head> 标签中的 <style> 标签里。通过 CSS 选择器告诉浏览器给哪个标签设置样式，然后通过 CSS 选择器中指定的元素，可以同时为这些元素设置样式，这样可以使样式进一步复用。

使用内嵌样式应用 CSS 的特点是样式可以作用于当前整个页面，语法格式如下：

<style>
选择器 {
  属性1: 值1;
  属性2: 值2;
  ...
  属性n: 值n;
}
</style>

下面使用内嵌样式在 HTML 文件中使用 CSS 样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>测试内嵌样式</title>
  <meta charset="utf-8"/>
</head>
<body>
  <style>
    span {
      color: red;
    }
  </style>
  <span>小尚今天很高兴！</span>
  <span>小尚今天不高兴！</span>
</body>
</html>

在上述代码中，使用了标签选择器选中了页面中所有的标签，在对应花括号内将字体颜色设置为红色。也就是说，文档中的所有 标签都可以应用这个样式。

运行代码查看效果，测试内嵌样式如图 2 所示。

图 2 测试内嵌样式

CSS外链样式

外链样式即外部链接样式，将 CSS 代码全部写入一个单独的后缀名为“.css”的文件（又称 CSS 外部样式表）中，然后使用 <link> 标签将该 CSS 文件引入当前 HTML 文件，对其标签内容进行修饰。

使用外链样式应用 CSS 的特点是同一个 CSS 文件可以同时应用在多个 HTML 页面中。需要注意的是，<link> 标签推荐必须写在 <head> 标签的里面。语法格式如下:

<link href="文件名.css" type="text/css" rel="stylesheet" />

可以看到 <link> 标签中书写了三个属性，具体如下：

href 属性：其属性值是 CSS 样式文件的URL。
type 属性：该属性值代表使用 <link> 标签加载的数据类型，这里该属性值应为“text/css”。
rel 属性：rel 是英文单词 relation 的缩写，中文原意是关系。该属性值代表链接的文档与当前文档的关系，stylesheet 表示引入 CSS 样式。

下面通过一个例子来演示外链样式的具体用法。现在有三个文件，分别是 test.css（其中放置的是 CSS代码）、test1.html 和 test2.html（这两个文件要同时使用 test.css）。

test.css 文件示例代码如下：

span {
  font-size: 100px;
  color: blue;
}

注意，需要链接的 CSS 文件名要以 .css 后缀名结尾，而且在 CSS 文件中是直接书写 CSS 代码的。

test1.html 文件示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>test1.html</title>
  <!--将 test.css 链接到 test1.html 中，test.css 是 css 格式的文件，它是 test1.html 的样式表-->
  <link href="./test.css" type="text/css" rel="stylesheet">
</head>
<body>
  <span>小尚今天很高兴！</span>
</body>
</html>

代码中使用了 <link> 标签将 test.css 链接到 test1.html 中，此时 标签应用了 test.css 中的样式，将字体颜色设置为蓝色，字体大小设置为 100 像素。

运行代码查看效果，如下图所示：

图 3 测试 <link> 标签将 test.css 链接到 test1.html 中

test2.html 文件示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>test2.html</title>
  <!--将 test.css 链接到 test2.html 中，test.css 是 css 格式的文件，它是 test2.html 的样式表-->
  <link href="./test.css" type="text/css" rel="stylesheet">
</head>
<body>
  <span>小尚今天不高兴！</span>
</body>
</html>

这段代码与上段代码基本相同，这里不再赘述。运行代码查看效果，如下图所示：

图 4 测试<link>标签将test.css链接到test2.html中

需要注意的是，为了方便代码解耦合，常见的 CSS 应用样式多选择外链引入方式。因此，对于后端开发人员来说，重点学习其引入方式，对于样式属性无须全部掌握，实际开发中我们直接引入前端开发人员编写好的 CSS 样式文件来使用即可。

CSS引入的3种方式（附带实例）

CSS行内样式

CSS内嵌样式

CSS外链样式

相关文章