CSS引入方式
CSS引入方式
将CSS
作用到HTML
主要有四种方式,分别为HTML
元素添加内联样式、<style>
标签嵌入样式、<link>
标签引入外部样式、@import
导入外部样式。
内联方式
<div style="color: red"></div>
特点
- 不需要额外的
HTTP
请求。 - 适合
HTML
电子邮件与富文本编辑器的使用。 - 内联样式比外部样式具有更高的优先级,可以覆盖外部样式。
- 可以在不更改直接主
CSS
样式表的情况下更改样式,直接将规则添加到元素。 - 适合于动态样式,对于每个元素的样式都不同的情况可以直接将样式作用到单个元素。
不足
- 页面维护可能会非常棘手
- 过多添加同样的样式会导致页面复杂
嵌入方式
<style type="text/css">
div {
color: blue;
}
</style>
特点
CSS
与HTML
一起作为一个文件,不需要额外的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
样式表的开头,否则无法正确导入外部文件。@import
是CSS2.1
才出现的概念,所以如果浏览器版本较低例如IE4
与IE5
等,无法正确导入外部样式文件,当然也可以利用这一点来隐藏对于这些旧版本的浏览器的CSS2
规则。- 当
HTML
文件被加载时,<link>
引用的文件会同时被加载,而@import
引用的文件则会等页面全部下载完毕再被加载,所以有时候浏览@import
加载CSS
的页面时会没有样式,也就是闪烁现象,网速慢的时候就比较明显。 - 使用
<link>
标签可以设定rel
属性,当rel
为stylesheet
时表示将样式表立即应用到文档,为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