页面导入样式时，使用linke和@import的区别？

1. 区别
1.link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。

@import是CSS提供的语法规则，只能用来加载css。

@import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。

1. //引入css
2. <link href="main.css" rel="stylesheet">
3. //引入图标
4. <link rel="icon" href="favicon.ico">
5. //设置媒体查询
6. <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

2.link引入css文件，页面载入同时载入css文件，@import在页面完全载入之后载入css文件，在网络较慢情况下一开始会没有css样式。
3.link在浏览器中没有兼容问题。@import在css2.1中提出，低版本浏览器会不支持。
4.link中的css可以被javascript获取进而控制DOM，而@import不支持。
2.css引入方式
2.1 内联样式
直接将样式写在标签上。只对当前标签有效。

1.<div style="height:100px;width:100px"></div>

2.2 嵌入样式
在头部添加

1. <head>
2. 	<style>
3. 		p{
4. 			color:red;
5. 		}
6. 	</style>
7. </head>

2.3 链接样式
使用link标签中引入css。

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

2.4 导入样式
使用@import导入css

1. <style>
2. 	@import url(style.css);
3. <style>

或者在css文件中使用

1. @charset "utf-8";
2. @import url(style.css);
3. *{ margin:0; padding:0;}
posted @ 2021-01-22 17:08  白阳の  阅读(238)  评论(0)    收藏  举报