CSS外链和内联，你想了解吗？

什么是 CSS 外链和内联？

CSS 外链和内联是两种方式来引入 CSS 样式文件。CSS 外链方式就是通过链接样式文件（后缀名为 .css），引入需要的样式。CSS 内联方式则是将样式直接写在 HTML 页面中的某个元素中。

为什么需要外链样式表？

外联样式表的好处是相同的页面可以使用同一个 CSS 文件，从而加快页面的加载速度。另外，也方便管理和维护，当需要修改样式时，只需修改一个文件，便可以同时应用于所有使用该文件的页面。如果直接把样式放进 HTML 页面内，则会使文件增大，运行速度变慢。同时，修改起来也比较麻烦。

CSS 外链样式怎么引入？

引入 CSS 外链样式表非常简单。首先需要在 HTML 页面的头文件中添加一个 link 标签。在该标签中，设置 rel 属性为 stylesheet，href 属性为样式表的文件路径 (例如：&ltlink rel=\"stylesheet\" href=\"styles.css\"&gt) 。

如果想使用多个样式表怎么办？

页面中需要同时使用多个样式表的话，可以直接添加多个 link 标签，如下所示：

&ltlink rel=\"stylesheet\" href=\"styles.css\"&gt
&ltlink rel=\"stylesheet\" href=\"menu.css\"&gt
&ltlink rel=\"stylesheet\" href=\"forms.css\"&gt

与 CSS 外链相比，CSS 内联怎么样？

相对于 CSS 外链方式，CSS 内联方式的优点是直接写入模板的样式可以对该模板的所有使用产生影响，且可以针对特定的元素进行效果调整和修改。缺点是如果要更改样式，则需要修改 HTML 文件的内容，不利于网站维护。

怎样使用 CSS 内联方式？

使用 CSS 内联方式，需要在 HTML 中使用 style 属性。该属性值为一个样式声明。使用该样式声明来包含其应用到的元素。例如：
<p style=\"color: red; font-size: 24px;\">这是一个文本框</p>

总结

如何选择 CSS 的引入方式，要根据使用需求来选择。如果希望模板简洁，可使用 CSS 内联方式；如果需要对页面样式进行灵活调整，外链样式表则会更方便；如果需要使用的页面很多，则外联样式表则极大提高了开发效率。