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

63 阅读 0 评论 42 点赞

我是靠谱客的博主苗条香烟，最近开发中收集的这篇文章主要介绍导入样式表与外部样式表的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

转载于:https://www.cnblogs.com/kanhaiba/p/4996259.html