博客介绍了HTML页面导入样式时，link和@import的区别，包括功能、加载时机、浏览器兼容性和对JavaScript控制的支持等方面。还阐述了CSS的四种引入方式，如内联、内嵌、链接和导入样式，并分析了各方式的优缺点。
[html]页面导入样式时，使用link和@import有什么区别？
- link是HTML提供的标签，除了加载CSS外还可以处理RSS，rel等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入会同时加载；@import会在页面完全载入后加载，所以在网速比较慢的情况下，会出现起初没有CSS样式，页面闪烁一下出现CSS样式。
- link没有浏览器兼容性的问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用JavaScript控制DOM，改变样式；@import不支持。
CSS的四种引入方式
- 内联样式
内联样式，也称行内样式，是指直接在HTML标签中的style属性中添加CSS代码。
<div style="color: red">hello word</div>
但是显然这种样式难以维护，这种方法只能改变当前标签的样式，如果多个div有相同的样式，我们也只能一个一个的去添加，使得HTML标签变得冗长，难以维护。 - 内嵌样式
内嵌样式只对当前页面有效，同样易造成代码冗余，不利于维护
<head>
<style>
.content {
background: red;
}
</style>
<head>
- 链接样式
在HTML头部标签中引入外部的CSS文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
这种方法具有良好的可维护性，所有的CSS代码都放在CSS文件中，CSS文件会在第一次加载时引入，以后只需加载HTML文件。
4. 导入样式
利用CSS规则从外部引入CSS文件
<style>
@import url(style.css)
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
