HTML中有三种常用方式定义CSS:嵌入式,外部引用式,内联式.
下面说一下最常用的外部引用式:
- 使用样式表处理指令语句
在HTML文档的开头部分写一个关于样式表的处理指令语句,如下所示:
<?xml-stylesheet type="text/css" href="mystyle.css"?>
<html>
...
</html>
不过只有使用XML语法格式编写的HTML文档才支持使用处理指令,并且大多数浏览器仅当该文档别保存为XHTML或XML格式才会生效,并且JavaScript不能处理这样的CSS样式表.
- 使用@import指令.
可以在style元素之间使用@import指令导入外部的CSS样式表文件,如下:
<head>
<style>
<!--下面两行代码的效果是相同的
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
注意:任何@import规则必须出现在样式表所在规则之前.
- 使用link元素
在HTML代码中使用link元素也可以引用外部样式表,可使用href属性指定样式表所在的URL,并且指定rel=“stylesheet” type=“text/css”,前者表示引用的是样式表,后者表示引用的是CSS样式表.例如:
<head>
<link href="mystyle" rel="stylesheet" type="text/css" />
</head>
- 使用HTTP消息报头链接到样式表
可以使用HTTP消息报头的link字段链接一个外部样式表,link字段的功能和HTML link元素的功能相同,有相同的属性设置,如下:
link:<href="mystyle" rel="stylesheet" type="text/css" />
等同于:
<link href="mystyle" rel="stylesheet" type="text/css" />
HTTP报头可以使用多个link字段链接多个外部样式表,并且HTTP报头中的link字段比HTML文档中的link元素具有优先级.