CSS引入方式

CSS作用到HTML主要有四种方式,分别为HTML元素添加内联样式、<style>标签嵌入样式、<link>标签引入外部样式、@import导入外部样式。

内联方式

<div style="color: red"></div>

特点

  • 不需要额外的HTTP请求。
  • 适合HTML电子邮件与富文本编辑器的使用。
  • 内联样式比外部样式具有更高的优先级,可以覆盖外部样式。
  • 可以在不更改直接主CSS样式表的情况下更改样式,直接将规则添加到元素。
  • 适合于动态样式,对于每个元素的样式都不同的情况可以直接将样式作用到单个元素。

不足

  • 页面维护可能会非常棘手
  • 过多添加同样的样式会导致页面复杂

嵌入方式

<style type="text/css">
    div {
        color: blue;
    }
</style>

特点

  • CSSHTML一起作为一个文件,不需要额外的HTTP请求
  • 适合于动态样式,对于不同的用户从数据库加载不同样式嵌入到页面

不足

  • 嵌入样式不能被浏览器缓存并重新用于其他页面

链接方式

<link rel="stylesheet" href="Path To stylesheet.css">

特点

  • 可以通过替换CSS文件以改变网站的主题。
  • 只需在单个CSS文件中进行一次更改,所有网站页面都会更新。
  • 多个页面请求的网站速度有所提高,CSS在第一次访问时就被浏览器缓存。

不足

  • 每个链接的CSS文件都需要一个附加的HTTP请求

导入方式

<style>
    @import url("Path To stylesheet.css");
</style>

特点

  • 在不更改HTML标签的情况下添加新的CSS文件

不足

  • 需要额外的HTTP请求

link与@import差异

  • <link>属于HTML提供的标签,@import属于CSS语句,值得注意的是@import导入语句需要写在CSS样式表的开头,否则无法正确导入外部文件。

  • @importCSS2.1才出现的概念,所以如果浏览器版本较低例如IE4IE5等,无法正确导入外部样式文件,当然也可以利用这一点来隐藏对于这些旧版本的浏览器的CSS2规则。

  • HTML文件被加载时,<link>引用的文件会同时被加载,而@import引用的文件则会等页面全部下载完毕再被加载,所以有时候浏览@import加载CSS的页面时会没有样式,也就是闪烁现象,网速慢的时候就比较明显。

  • 使用<link>标签可以设定rel属性,当relstylesheet时表示将样式表立即应用到文档,为alternate stylesheet时表示为备用样式表,不会立即作用到文档,可以通过JavaScript取得<link>标签对象,通过设置disabled来实现样式表的立即切换,可用作切换主题等功能,而@import不属于DOM无法使用JavaScript来直接控制。

  • <link>@import混用可能会对网页性能有负面影响,在一些低版本IE<link>@import混用会导致样式表文件逐个加载,破坏并行下载的方式导致页面加载变慢。此外无论是哪种浏览器,若在<link>中引入的CSS中继续使用@import加载外部CSS,同样会导致顺序加载而不是并行加载,因为浏览器需要先解析<link>引入的CSS发现@import外部CSS后再次引入外部CSS,这样就导致页面加载变慢。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://alistapart.com/article/alternate/ https://matthewjamestaylor.com/add-css-to-html https://www.runoob.com/w3cnote/html-import-css-method.html http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css