在HTML中如何使用CSS？

一、前言

在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。

二、分类

2.1 内联式

内联式是所有样式应用方式中最为直接的一种，它通过对 HTML 标记使用 属性，将 CSS 代码直接写在其中。

内联式是最简单、直接的 CSS 使用方法，但它的针对性很明显，只能作用于当前标记，造成代码冗余，维护比较困难。

2.2 内嵌式

内嵌式与内联式使用方法不同，它将 CSS 代码写在 标记之间，并需要采用 标记进行声明。

使用内嵌式 CSS 用法时 CSS 代码将被集中放在 标记中，这样方便查找，对后期维护比较方便，页面代码也会减少。但是，如果一个网站有很多页面，如果多个网页的某个标记要使用相同的样式效果，内嵌式也会 出现代码冗余和维护困难的问题，所以，内嵌式比较适合个别风格特殊的页面效果设置。

2.3 链接式

在实际的网页设计中，链接式 CSS 用法是最常用的，也是效果最好的。链接式特点是将 CSS 代码单独放在一个或多个 文件中，实现了 CSS 代码和 HTML 代码的分离，这样使前期设计和后期维护都很方便，也有助于实现前台美工设计与后台程序设计人员的合理分工。

链接式 CSS 使用时需要在 标记中使用 标记，通过 标记的相关属性指明外部 CSS 文件的路径，以方便找到其中定义的 CSS 样式并运用在当前网页元素上。

链接式 CSS 用法的最大特点是将 CSS 代码和 HTML 代码分离，这样就可以实现将一个 CSS 文件链接到不同的 HTML 网页中。使用链接式 CSS，可以在设计整个网站时，将多个页面都会用到的 CSS 样式定义在一个或多个 文件中，然后在需要用到该样式的 HTML 网页中通过 标记链接这些 文件，通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性。

2.4 导入式

导入式和链接式的用法基本相同，区别在于语法和使用方式上略有不同。导入式通过在 标记的 标记中使用 方法导入相应的 CSS 文件。被导入的 HTML 文件在初始化时，会将该 CSS 文件导入 HTML 文件中，作为此 HTML 文件的一部分，类似于内嵌式的效果，而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来。

不只是 HTML 文件的 标记可以导入 CSS 文件，在 CSS 文件内也可以导入其他的 CSS 文件。例如，可以在 文件中不写任何 CSS 代码，只写 ，这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 中定义的所有样式效果。

三、提醒

如果你网页中使用多种方式，样式之间可能会出现冲突。这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则：

内联式 > 内嵌式 > 外部样式；

在多个样式中，后出现的样式的优先级高于先出现的样式；

在样式中，选择器的优先级： 样式 > 样式 > 标记样式。

为了避免 CSS 冲突，建议你不要混合使用多种，强力推荐使用链接式。

原文：https://segmentfault.com/a/1190000004656895