零基础教你学前端——54、如何添加CSS_外部样式

内部样式解决了内联样式的问题，但他也有弊端，主要表现在一下两个方面：

弊端1，内部样式只能作用于一个页面，如果要实现多个页面共享一个样式，就做不到了。

弊端2，随着样式代码的不断增加，在编辑器中，要不停的上下滚动屏幕来编辑样式，很不方便。

解决这些弊端的方法就是使用外部 CSS。 外部 CSS，也叫外部样式，可以通过改变一个文件来改变整个网站的外观！外部样式，将 CSS 代码放在一个独立的，以 .css 为后缀名的文件中，使 html 页面结构文件和 css 样式文件完全独立开来。

每个HTML页面都必须在 head 元素里添加 元素，link 是链接的意思。在 元素里定义 rel 属性，rel 是 relationship 的缩写，译为关系、关联，值为 stylesheet，表示关联一个样式表。再定义一个 href 属性，用来设置一个对外部样式表文件的引用，值为 .css 文件的路径。

我们来做个例子。在 002-add-css 文件夹里创建一个 external-1.html 文件，构建好基础代码。

添加 h1 和 p 元素，分别填入一些文本。再创建一个 external-2.html 文件，构建好基础代码。

添加 h1 和 p 元素，分别填入一些文本。在 002-add-css 文件夹里创建一个 mystyle.css 文件，在这个文件里直接编写样式：body，空格，花括号，回车，定义样式属性名 background-color，冒号，属性值为 lightblue，分号。

h1，空格，花括号，回车，color，navy，分号，margin-left，20px，分号。body {  background-color: lightblue;} h1 {  color: navy;  margin-left: 20px;}

前面说到，样式表代码的编写格式很宽松，但是我们编写样式的时候还是要有一定的规范：选择器和花括号中间用一个空格隔开；每一条样式声明语句单独一行定义；两组样式定义用空行来分隔。

样式文件定义好后，在 external-1.html 文件的 head 元素里输入 link，按下回车键或 tab 键，emmet 会为我们自动补全一些代码，我们只需要设置 href 属性的外部样式文件路径就好了。

这里我们填入 mystyle.css。保存。预览页面，第一个页面的样式添加好了。在 external-2.html 文件的 head 元素里也添加一个 link 元素，设置同样的路径 mystyle.css。保存。

预览页面，第二个页面的样式也添加好了。 不难发现，在 mystyle.css 定义的一套样式，应用到了两个页面上，做到了多个页面的样式共享。

文章配套视频链接：https://www.bilibili.com/vide...