页⾯导⼊样式⽂件的四种⽅式link和@import的区别
⼀、导⼊样式⽂件的四种⽅式
1.内嵌样式（）
<body>
<div ></div>
</body>
2.内部样式表（页⾯<head>区⾥放置<style></style>）
<head>
<style type="text/css">
div{
}
</style>
</head>
3.链接外部样式表（引⽤样式表⽂件）
textstyle语法结构：<link href="CSSurl路径" rel="stylesheet" type="text/css" />
<body>
<link rel="stylesheet" type="text/css" href="">
</body>
4.导⼊外部样式表（⽤@import ，在<head>与</head>之间）
语法结构：@import url(CSS⽂件路径地址);
<head>
<style type="text/css">
@import url("");
</style>
</head>
⼆、link与@impoort的区别
1. link属于html标签，⽽@import是CSS提供的。link除了加载CSS外，还能⽤于定义RSS，定义rel链接属性等作⽤；⽽@import是
CSS提供的，只能⽤于加载CSS。
2. import是CSS2.1提出的，只能在IE5以上版本才能被识别，⽽link是XHTML标签，⽆兼容问题。link⽅式样式的权重⾼于
@import。
3. 页⾯加载时，link同时会被加载，⽽@import引⽤的CSS会等到页⾯加载结束后被加载。
4. link⽀持使⽤js控制DOM去改变样式，⽽@import不⽀持。
5. @import可以在CSS⽂件中再次引⼊其他样式表；⽽link不⽀持。
注：本质上两者使⽤区别不⼤，但为了编辑html代码，⼀般使⽤link较多，也更推荐使⽤link。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。