简介
link标签和@import都是引入CSS的方法,本文介绍两种方式的区别。
link与@import的区别
结论:推荐使用link引入CSS。
项 | link | @import |
从属关系 | link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。 | @import是 CSS 提供的语法规则,只有导入CSS的作用。 |
加载顺序 | 加载页面时,link标签引入的 CSS 被同时加载。 | @import引入的 CSS 将在页面加载完毕后被加载。 |
兼容性 | 是HTML很早就有的标签,所有浏览器都支持。 | @import是 CSS2.1 才有的语法,只可在 IE5+才能识别。 |
DOM可控性 | 可以在 JS 代码中插入link标签来改变样式; | DOM 方法是基于文档的,无法使用@import的方式插入样式。 |
选择器优先级 | link引入的样式权重大于@import引入的样式。 | link引入的样式权重大于@import引入的样式。 |
引入CSS的四种方式
方式1:内联样式
内联样式,也叫行内样式,指的是直接在 HTML 标签中的 style 属性中添加 CSS。
它只能改变当前标签的样式。若想要多个 <div> 拥有相同的样式,就要为每个 <div> 添加相同的样式,很麻烦。
<div style="background: red"> </div>
方式2:嵌入样式
嵌入方式指的是在 HTML <head>中的 <style> 标签里书写 CSS 代码。
嵌入方式的 CSS 只对当前的网页有效。当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
因为 CSS 代码是在 HTML 文件中,所以代码比较集中,当我们写模板网页时比较有利,因为可以一目了然地查看 HTML 结构和 CSS 样式。
<head>
<style>
.content {
background: red;
}
</style>
</head>
方式3:链接样式
链接方式指的是使用 HTML 的 head 标签引入外部的 CSS 文件。
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
方式4:导入样式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
写法1:写在HTML里
<style>
@import url(style.css);
</style>
实际有如下写法:
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。
从字节优化的角度来看@import url(style.css)最值得推荐。
写法2:写在CSS文件
@charset "utf-8";
@import url(style.css);
* {
margin: 0;
padding: 0;
}
.notice-link a {
color: #999;
}