CSS01 - 引入方式
css 引入方式
css 一共有四种引入方式，分别是：内联、内嵌、外联、导入。
一、内联
这种是在标签内直接写的，style=""，代码如下
这段代码的意思是给一个 div 块添加一个宽 200 像素高 300 像素的样式。这种方式会使 html 代码冗余，不建议使用，了解有这种方式即可。
二、内嵌
这种是在<head></head>标签里添加一个<style></style>标签，再在<style></style>标签里面添加样式，如图所示。
这段代码同样是给一个 div 块添加一个宽 200 像素高 300 像素的样式。这种方式会让这个页面太“重”了，做小 demo 或者刚接触 html 可以使用，代码量大时也不建议使用。
三、外联
这种是新建一个.css 文件，在<head></head>标签中通过 link 来引入样式，如图所示：
这种方式使得 html 和 css 的结构都很清晰，后续修改也很方便，而且这种方式的 css 文件可以被多个文件、多次引用，所以这种引入方式使用较多。
四、导入
这种是在<head></head>标签里，加一个<style></style>标签，再写 @import url（），跟用 link 的方式差不多，如图所示：
这种方式跟 link 实现的效果一样，不同点是
①link 是页面加载的时候同时加载引入的样式，而 @import 是页面加载完成后，再加载引入的样式；
②link 是 xhtml 中的标签，所以兼容所有浏览器，但 @import 是在 CSS2.1 提出的，所以低版本的浏览器可能会不兼容；
③link 是可以通过 js 来改变样式的，@import 是不可以的；
④link 可以引入除了 css 以外的其他文件，但 @import 只能引入 css 文件。
版权声明: 本文为 InfoQ 作者【桃夭十一里】的原创文章。
原文链接:【http://xie.infoq.cn/article/92b9ed682e50d978c4f1c8708】。文章转载请联系作者。
所思在远道 2020.08.19 加入
一只慢慢进步的小白
评论