HTML 中引入 CSS 的方式

4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比较链接方式和导入方式

链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。

link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

小结：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。

午学习了HTML语言CSS样式的内部样式表，现在我们来学习下外部样式表。这是CSS样式表的一个重点。

实际开发都是外部样式表，适合于样式比较多的情况，核心是: 样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表，分为两步:

1.新建一个后缀名为.css的样式文件，把所有CSS代码都放到这个样式文件中。

2.在HTML页面中，使用<link>标签引入.css这个文件

看下语法规范:

对于css文件路径，如果在同一个文件夹下，可以直接引用。如果不在同一个文件夹下，可以再引用下文件路径。

来看下最终的样式效果:

最开始没有效果的展示：

对应代码为:

<!DOCTYPE html>

<head>

<title>CSS之外部样式表</title>

</head>

<body>

<div>天生我材必有用，千金散尽还复来。</div>

</body>

</html>

修改后的显示效果为:

对应的代码为:

<!DOCTYPE html>

<head>

<title>CSS之外部样式表</title>

</head>

<body>

<div>天生我材必有用，千金散尽还复来。</div>

</body>

</html>

这里加入了<link>标签，<link rel="stylesheet" href="style.css"> 也引入了CSS的样式文件。具体文件内容为:

对应文件内的代码为:

/* 这个css文件里没有标签，只有样式 */

div {

color: pink;

}

先在外部新建一个 .css文件，然后通过link将css文件引入

接下来对CSS引入样式进行一个总结:

行内样式表: 优点是书写方便，权重高，缺点是结构样式混写，使用情况较少，控制范围是控制一个标签。

内部样式表: 优点是部分结构和样式相分离，缺点是没有彻底分离，使用情况较多，控制范围是控制一个页面。

外部样式表: 优点是完全实现样式和结构相分离，缺点是需要引入，使用情况最多，吐血推荐，控制范围是能够控制多个页面。

今天就先到这里了，明天进行综合案例分析。谢谢大家~

SS样式

CSS全称Cascading Style Sheets（层叠样式表），用于描述网页上的信息格式化和显示的方式。CSS能够对网页中元素进行精准控制并提供了丰富的样式属性，拥有对网页对象和模型样式编辑的能力。通过CSS对HTML标签元素进行样式描述可以定义其元素的显示方式，最终在浏览器中显示成为我们设置的样式效果。

CSS样式形式

根据项目的需求不同我们可以将CSS样式分为3种类型，分别是：外联css样式、内联css样式和嵌入css样式。外联css样式是引用外部的css文件，借用别人封装好的样式文件来达到我们想要的样式效果，比如Bootstrap就提供了大量现成的样式，引用Bootstrap可以帮助我们快速得到丰富的页面效果。内联css样式是将样式声明在一个专门的CSS文件中，当HTML页面需要使用时直接引用该样式即可，这样也可以提供样式的复用性，让多个页面风格的保持统一。嵌入css样式则是在HTML标签元素创建时通过style直接定义当前标签元素的样式，或者在HTML文档中的<head>中使用<style>标签标记。

外联样式引用

这个只要在Vue项目的public目录中找到index.html模板，在head标签中通过link来引入外部的样式文件。href可以连接在线的样式文件，当然也可以引用本地的样式文件。这种方式引入的样式编译在生成的html文件中，该样式在整个项目都能够公用。

内联样式引用

这个在Vue中可以全局引用也可以局部模板引用，全局引用的话需要在main.js入口文件中引入。当项目启动时就会对css文件进行解析，将对应的css代码插入生成html文件的style标签中。这里可以将一些全局的或者公共的样式文件引入，提高代码的复用性。

Vue模块中引用

除了在main.js中引入我们还可以在局部模板中引用样式文件，在对应的模板.vue文件中通过@import ‘样式文件路径’。但是这样引入发现一个问题：该模板标签元素以上的样式不生效，改用@import url(样式文件路径)后样式生效了但是在index.html的head上会多出一个空的<style></style>样式标签。

嵌入css样式使用

这个就不存在引入了，直接在当前的模板中编写样式即可。vue模板提供了一个style标签专门用来描述HTML样式，在style中申明scoped则该样式只影响到当前页面。也可以直接在标签元素中通过style属性来描述当前元素的样式，通过属性绑定的形式，将样式对象应用到元素中，样式对象也可以定义在data中，如果需要data上的多个样式对象则可以在:style中通过数组引用。

总结：

CSS样式在前端中是必不可少的成员之一，合理的利用样式可以让你的项目更加的简单、快捷、高效。充分利用CSS样式表的复用可以更大程度的缩减了页面的体积，减少下载的时间，提升用户体验。以上内容是小编给大家分享的【Vue实战079：常见的几种CSS样式文件引入方式详解】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

在线咨询

上一篇：大话后端开发的技巧大集合
下一篇：Vue实战081：多HTML标签元素如何实现并排显示详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商