web前端教程，详解引入CSS的4种方式

我们在编写HTML文件的时候，为了使网页的内容和属性更加丰富，难免会引入CSS来达到我们的目的。CSS是一种用来表现HTML文件样式的计算机语言，仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。引入CSS有4 种方式，其中有2 种方式是在HTML文件中直接添加CSS代码，另外2种是引入外部 CSS文件。

下面我们一起来学习一下引入CSS的4种方式，了解过的小伙伴也可以温故知新。

1.内联方式

内联样式即只在某个元素内使用style属性，它只针对某个元素，而不会影响整个文件，所以可以控制某个HTML元素的外观表现，适合用于代码调试，不建议使用。

示例：

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个

拥有相同的样式，你不得不重复地为每个

添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2.嵌入方式

嵌入方式指的是在 HTML 头部中的

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

3.引入外部的 CSS 文件

示例：

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

示例：

4.引入链接的方式

链入外部样式表，就是把样式表保存为一个样式表文件，然后在页面中用

引入外部css文件。

这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。

它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的标签中使用标记来引入外部样式表文件。（就是方法样子不同一个用style，一个用link）

Css引入的4种方式，所有的内容已全部讲完了，实际上，在书写CSS样式的时候，我们大多数都是使用link标签去链接样式，这种方式使用的最多，是我们的重点掌握对象。

动力节点老杜讲的css教程里，也有对引入链接方式从而引入CSS的重点讲解，可以看视频重点学一下。

css教程：http://www.bjpowernode.com/?csdncss