css使用方法及比较

最新推荐文章于 2024-04-19 12:52:58 发布

CrazyGreenMan

最新推荐文章于 2024-04-19 12:52:58 发布

阅读量258

点赞数

前言

最常看见的CSS的使用方式有三种

1. 在span, div 等标签上直接使用 style 属性定义CSS

[html]view plaincopy 
   
 <span style="color:blue">This is Blue.</span>  

2. 在当前的html 文件中定义class, 在html 标签中用class 的属性设置。

[html]view plaincopy 
   
 <!--Add by oscar999-->  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
 <TITLE> New Document </TITLE>  
 <META NAME="Author" CONTENT="oscar999">  
 <style type="text/css">  
 .blue{  
    color:blue  
 }  
 </style>  
 </HEAD>  
   
 <BODY>  
 <span class="blue">This is Blue.</span>  
 </BODY>  
 </HTML>  

3. 第三种方式就是把CSS 的定义单独到一个文件中， html 文件中使用link 引入css文件

[html]view plaincopy 
   
 <!--Add by oscar999-->  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
 <TITLE> New Document </TITLE>  
 <META NAME="Author" CONTENT="oscar999">  
 <link href="blue.css" rel="stylesheet" type="text/css" />  
 </HEAD>  
   
 <BODY>  
 <span class="blue">This is Blue.</span>  
 </BODY>  
 </HTML>  

4. 除了以上方式之外，还有一种方式就是使用 @import

[html]view plaincopy 
   
 <!--Add by oscar999-->  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
 <TITLE> New Document </TITLE>  
 <META NAME="Author" CONTENT="oscar999">  
 <style type="text/css">  
 @import url(blue.css);  
 </style>  
 </HEAD>  
   
 <BODY>  
 <span class="blue">This is Blue.</span>  
 </BODY>  
 </HTML>  

前两种方式自不必多说，这里比较一下 link 和 @import 的方式？

Link 与 @import 差异

1. 来源与作用。 link 属于 XHTML 标签，除了可以加载CSS外，还可以定义RSS, 定义rel 连接属性等其他作用；

而@import 完全是CSS提供的一种方式，只能加载CSS。

2. 加载顺序不同。 link 引用的CSS会在页面被加载的时候同时加载；

而@import 引用的CSS会等到页面全部被下载完再被加载，所以有时候会出现开始没有样式，之后页面闪烁一下出现样式（在网速慢的时候会更明显）。

3. 兼容性的差别。 @import 是CSS2.1 提出的，老的浏览器不支持，IE5 以上的才能识别（不过现在来说，已经不是问题了，应该很少有使用IE5及以下的浏览器了）。

link 浏览器都支持。

4. 使用javascript 可以控制到 link, 但@import 却无法控制。

[html]view plaincopy 
   
 <!--Add by oscar999-->  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
 <TITLE> New Document </TITLE>  
 <META NAME="Author" CONTENT="oscar999">  
 <link id="linkId" href="" rel="stylesheet" type="text/css" />  
 </HEAD>  
   
 <BODY>  
 <span class="blue">This is Blue.</span>  
   
 <script>  
 document.getElementById("linkId").href = "blue.css";  
 </script>  
   
 </BODY>  
 </HTML>  