导入样式表与外部样式表的区别

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{
style="color:black;
font-family:System;
font-size:30px"
}

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标签。

导入样式表与外部样式表的区别

推荐阅读