页面导入样式link与@import区别

2022-05-06 01:32:32 阅读：133 来源： 互联网

外部样式表必须导入到网页文档（HTML）中，才能够被浏览器识别和解析。外部样式表文件可以通过两种方法导入到 HTML 文档中。

一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。

1. 使用`<link>`标签导入,链接样式

示例：

 <link href="xxx.css" rel="stylesheet" type="text/css" />

href 属性设置外部样式表文件的地址，可以是相对地址，也可以是绝对地址。
rel 属性定义关联的文档，这里表示关联的是样式表。
type 属性定义导入文件的类型，同 style 元素一样，text/css表明为 CSS 文本文件。

2. 使用`@import`关键字导入

示例：

<style type="text/css">
  @import url("xxx.css")
</style>

@import是 CSS 提供的语法规则，只有导入样式表的作用。在关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。

两者区别

差别1：老祖宗的差别

link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import 就只能加载CSS了。

差别2：加载顺序的差别

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别

由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用DOM控制样式时的差别

当使用JavaScript控制DOM去改变样式的时候，只能使用 link 标签，因为@import不是DOM可以控制的。

差别5：@import可以在CSS中再次引入其他样式表

比如可以创建一个主样式表，在主样式表中再引入其他的样式表，

除了以上两种导入方式以外还可以通过一下两种方式引入样式

3. 内联样式

示例：

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

就是直接在标签里边直接写

4.嵌入样式

示例：

<style>
.content {
  background: red;
}
</style>

只对当前html有效

5. css权重计算

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

选择器	权重
通配符	0
标签	1
类/伪类/属性	10
ID	100
行内样式	1000
important	无穷大

标签：样式,标签,link,样式表,import,CSS,页面
来源： https://www.cnblogs.com/lvccccccck/p/16227112.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9