下载掌阅APP，畅读海量书库
立即打开
要使用外部样式表，首先需要创建一个CSS样式表文件，将CSS样式都写在这个文件中，然后就可以在HTML页面中使用<link>标签将外部样式表引入到文件中。例如，我们在名为CSS的文件夹中新创建一个名为index.css的CSS文件，而index.html文件与CSS文件夹在同一个目录下，这样我们就可以在index.html文件中使用<link>标签引入外部样式表，详细代码如下：
外部样式表通常会被多个文件使用。例如，网站上所有网页都有一个相同的区域，现在需要修改网页中这个区域的背景颜色，如果逐个修改网页背景色的CSS代码，那将是一件非常痛苦的事情。使用外部样式表后，因为所有网页都引入了这个样式，所以只需要修改外部样式表中对应区域的背景色，就可以修改所有页面的颜色。这里需要注意的是，<link>标签必须作为<head>标签的内容出现。
在使用内部样式表时，我们不需要为CSS样式单独创建一个样式文件，可以直接在HTML页面中的<head>标签中使用<style>标签设置样式。例如下面的代码：
在这段代码中，我们为HTML页面中的元素设置了3个CSS样式，这3个CSS样式位于<style>标签中，与<style>标签一起作为HTML页面中的一部分出现，其中type属性是指style元素以CSS的语法定义。需要注意的是，内部样式表只作用于当前的HTML页面。
可以直接在HTML标签内通过设置style属性的值，设置各个HTML元素的样式。通过这种方法设置的样式表，只能作用于当前的HTML元素，例如下面这段代码：
这段代码的效果与内部样式表中代码的效果完全相同，但是这段代码中有很多的CSS样式都是重复的，而且HTML代码与CSS代码混杂在一起，很大程度上降低了代码的可读性。如果现在要替换项目列表的背景色，我们需要逐个修改项目列表的样式，这将是一件很麻烦的事情，所以不建议在项目中使用这种样式。