三种CSS添加方式的比较

欢迎点击「算法与编程之美」关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

我们都知道CSS有三种添加方式，每种添加方式都有不同的特点，那么我们在日常使用时应该如何选择呢？

解决方案

首先我们要从定义上进行区分，再结合实际操作，分别列出三种添加方式的优缺点。

行内添加法：将属性和属性的取值设定成要求的样式，直接添加到当前需要样式的元素标签内部。

内嵌样式：只对当前页面有效

单独文件：设置单独文件，即外部样式表文件 style.css。然后在引用到index.html

行内添加法

内嵌样式

由此我们可以得知，内嵌样式的注意点

第一是，内嵌样式在有公共CSS代码时，每个页面都需要重新定义，所以工作量较大。

基于第一点我们显然可得第二点，内嵌样式适用于文件很少，CSS代码也不多的情况。

单独文件

link,表示要进行文件的链接

rel,表示我要链接到什么类型的文件

stylesheet，表示样式表文件

href,表示超链接到相对路径，以及相对位置和文件名

单独文件的优点就有很多了，首当其冲的就是他可以实现HTML代码（页面结构）和CSS代码（样式）的完全分离，从而使后期维护和改变变得更加简单，也可以实现在同一个HTML文档的内部引用多个样式表。

结语

行内添加

:直接用style属性写在标签内部

内嵌样式:用style标签写在head标签内部，只对当前页面起作用

单独文件

:单独的样式表文件的一个链接。他以.css结尾，这个样式也可以复制粘贴到其他项目中，应用于不同的网页中。

就我个人而言，在代码较少的情况下，推荐采用行内添加和内嵌样式两种方法。在代码较多时，推荐使用单独文件的方法。