CSS样式表链接

1 、内联样式表

例如我们要设置一HTML 页面中所有H1 标题字显示为蓝色，其代码如下：< HTML>

< HEAD>

< TITLE>This is a CSS samples< /TITLE>

< STYLE TYPE="text/css">

< !--

H1 { color: blue }

-->

< /STYLE>

< /HEAD>

< BODY>

... 页面内容…

< /BODY>

< /HTML>

1、样式表信息包括在 < style> 和 < /style> 标记中；

2、放到 < HEAD> 和< /HEAD> 中去；

3、整个页面中产生作用。

注意：

1、< STYLE> 标记中包括了TYPE ＝“text/css” ，这是让浏览器知道你是使用CSS1 样式规则。

2.、加入< !-- 和--> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。

在使用样式表时，经常会有多标志用同一个属性

比如：

B { color: red}

I { color: red}

H1 { color: red}

用逗号分隔各个HTML 标志，把三行代码合并成一行，我们可以写成：B,I,H1 {color: red}

同一个HTML 标志，可能定义到多种属性，例如，我们规定把从H1 到H6 各级标题定义为红色黑体字，带下划线，则应写为：

H1,H2,H3,H4,H5,H6 {

color: red;

text-decoration: underline;

font-family: " 黑体"

}

注意各个标志属性之间用分号隔开。

内联样式表还包括一种直接插入方式，即单独指定HMTL 页面中某一个标志，规定其风格样式，可以写为：

< Table style=" font-size:10pt; color:blue">

定义该表格内的字符大小为10pt ，颜色为蓝色。

2 、外部样式表

建立一个完全独立的文本文件，其扩展名为.css，文件内容则输入样式表信息，除去任何相关的HTML 语言。

例如在外部样式表中输入：

body { line-height: 130pt}

H1,H2,H3,H4,H5,H6 { color: red; text-decoration: underline; font-family: " 黑体" }

b { font-style: italic; color: #FF3333; text-decoration: underline }

少了< STYLE> 和注释标记。保存为example.css 。

有两种办法可以实现引用外部样式表。

（一）使用< LINK> 标记链接外部样式表

< LINK REL=STYLESHEET HREF="example.css">

HREF 中应包含路径信息。

一个HTML 文档可引用多个外部样式表，例如：

< LINK REL=STYLESHEET HREF="example.css">

< LINK REL=STYLESHEET HREF="style/other.css"> 首先链接的example.css 作为该文档缺省样式表，当样式定义产生冲突时首先满足前者。

（二）使用@IMPORT 导入样式表信息

存在于在< STYLE> 和< /STYLE> 标记中

例如：

< STYLE TYPE=“text/css”> @import “example.css”; @import

“style/other.css”; < /STYLE>

样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。