链接外部的CSS文件有两种方式:
1.link标签;
2.@import属性。
共同点:
都可以链接外部的CSS文件。
不同点:
1.link: 是标签, @import: 属性。
2.link标签只能在HTML文件中的head标签中利用href属性引入外部CSS文件,
而@import可以在HTML文件的style标签中当作style的属性,
利用url引入外部CSS文件,还可以在CSS文件中引入其他CSS文件。
3.加载顺序不同:
link标签再引入CSS文件的同时就被加载;
@import 在引入CSS文件时会等页面加载完毕后才会被加载。
4.权重不同:link引入得样式权重大于@import引入的样式。
5.@import是CSS2.1才有的语法, 只有IE5+IE6才能识别,而link是HTML标签,不存在兼容问(推荐使用link)。
注:
!important:提升某个属性的权重, 并不能提升整个选择器的权重。
外联/内部/内联:
就近原则
<style type="text/css">
div{
color: purple;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="01main.css">
</head>
<body>
<div style="color: blue">
我是div
</div>