导⼊样式表与外部样式表的区别
2015-11-26 08:00:16
导⼊样式表和外部样式表都是把样式表中的<style></style>标签对中的样式规则定义语句，放置在⼀个单独的外部⽂件中，扩展名为.css, 然后将独⽴的css样式⽂件引⽤到⽹页中来。但⼜有以下⼏个⽅⾯的不同：
1、具体的应⽤⽅法不同：
导⼊样式表：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
引用外部样式表的格式是
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--定义导⼊样式表-->
<style type="text/css">
@import linked.css
</style>
<title>imported</title>
</head>
<body>
<p>这个段落应⽤了导⼊样式表
</body>
</html>
外部样式表：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--定义外部样式表-->
<link rel="StyleSheet" href=linked.css type="text/css">
<title>linked</title>
</head>
<body>
<p>这个段落应⽤了外部样式表
</body>
</html>
link：⽤于当前⽂档引⽤外部⽂档的
rel：说明链接进来的对象是什么；rel="StyleSheet"：表⽰在⽹页中使⽤外部样式表；
href：指定⽂件地址；              href=linked.css：这⾥链接的样式表⽂件是linked.css
type：定义⽂档的类型 ;            type=“text/css”：表⽰⽂本类型的样式.
其中linked.css:
p{
}
2、
使⽤link链接的css，客户端浏览⽹页时，先将外部的css⽂件加载到⽹页中（下载到html⾥⾯），是⼀种并⾏加载⽅式，然后再编译显⽰，显⽰出来的⽹页和我们预期的效果⼀样，即使⼀个⽹页链接多个css，⽹速再慢也是⼀样的效果。
使⽤@import导⼊的css，是将css代码写在样式表⾥⾯，客户端浏览时先将html的结构显⽰出来，再
把外部的css⽂件加载到⽹页中，即
@import是在整个html页⾯加载完成后才加载css，最终显⽰出来的⽹页也和预期的效果⼀样，不过，当⽹速较慢时，会先显⽰没有外部css 统⼀布局的html⽂件。
此外，@import可以避免过多的页⾯指向⼀个css⽂件，当⽹站的页⾯数达到⼀定程度，如果采⽤链接的⽅式就可能会使得由于多个页⾯调⽤同⼀个css⽽造成速度下降，但能达到这种程度的⽹站⼀般也有资本⽤更好的硬盘来弥补不⾜。
3、link标签属于xhtml范畴，除了加载css外，还可以做其他事情，如定义RSS，定义rel链接属性，
@import是css2.1特有的，import只能加载css了，⽽且对于不兼容css2.1的浏览器（如IE5之前的版本）来说是⽆效的。
4、当⽤javascript控制dom去改变样式时，只能⽤link标签，@import⽆能为⼒。
综上所述，⼀般⽹站在调⽤外部样式表时，还是使⽤link标签。

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