CSS样式表及优先级

103 阅读 0 评论 68 点赞

我是靠谱客的博主呆萌棒球，这篇文章主要介绍CSS样式表及优先级，现在分享给大家，希望可以做个参考。

css样式表
1）内部样式表<style type="text/css">
/*css语句*/
</style>
2）内联样式 (行内样式)<标签 style="属性:属性值;属性:属性值;" ></标签>
3）引用外部样式表文件
方法一：<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称"
说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间
rel：用于定义文档关联，表示关联样式表
type:定义文档类型
方法二：<style type="text/css">
@import url(css/style.css);
</style>
link和import导入外部样式的区别
差别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可以控制的