CSS样式一共3中使用方法
——内联式样式表
行样式<div style="color:#000;"></div>
只能操作1个标签,细节灵活
——嵌入式样式表
<head>
<style>
div{color:#000;}
</style>
</head>
——引用式样式表
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
rel=stylesheet的意思
rel是Relations的所写 指关联到一个stylesheet(样式表单)
只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值,所以没有办法给不同关系的链接提供不同的样式,所以现在rel与rev只是用来使得网页的语义性更为完善
在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。一般这里是不需要改动的.
在网页中使用CSS——外部CSS样式表的引用方法
CSS只有正确加载到XHTML中才能控制页面的样式。其中加载的方法有很多种,但是每种都有各自的优点,概括起来主要有三种方法:即外部引用,内部引用和局部引用。
这里主要讲的是外部样式表的引用方法:链接外部样式表和导入外部样式表:
1、链接外部CSS样式表
链接外部样式表的方法是在XHTML文档结构<head>内使用<link>标记,可以使用<link>为XHTML文档连接多个外部样式表。如下所示:
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" media="screen" title="homepage" />
<link rel=stylesheet href="head.css" type="text/css" media="screen" title="homepage" />
</head>
</html>
2、导入外部CSS样式表
使用CSS的"@import"可以声明导入样式表这种方式也是引用外部CSS样式的方法之一。与<link>标记的区别在于:<link>方式只有在该XHTML文档应用CSS样式表时才读取样式表的内容,而"@import"声明无论该XHTML文档中的样式表是否被应用,都将读取定义好的样式表。如下所示:
<html>
<head>
<style>
<!--
@import url (http://www.jlu.edu.cn/css/style.css);
@import url (css/style.css);
h1{color:#00ffff;font-size:12px;}
-->
</style>
</head>
</html>
注意:如果<style>与</style>之间包含其它CSS规则,则必须"@import"生命放在样式表的开始部分,对于在样式表中指定的规则,其优先级高于"@import"声明导入的样式表文件中对立的规则。对于同样导入的个外部样式表文件,如果存在对立样式,则以后导入的样式表文件规则为准。
导入外部样式表和链接外部样式表的根本区别在于:<link>是一个XHTML标记,而"@import"是CSS的一个标记;单独从引入外部CSS角度上来说,两者功能没有区别。但是"@import"声明在Netscape4.0版本浏览器上是无效的!