最近评论
正在载入评论列表...
3.3 外联样式表文件
外联样式表即外联CSS样式表文件。创建CSS样式表文件的方法已经在第1章中有详细介绍，这里就不再重复。外联样式表是CSS作用于HTML文档的第3种解决方案。它具有最低的优先级，但是具有最高的灵活性和便捷性，它允许不同的编组、分级，以及不同媒介样式表定义。
下面的例子演示了如何将HTML文件和CSS文件结合的做法。假设现在有一个HTML文件，和一个CSS样式表文件，如图3.4所示。
图3.4 已创建一个HTML文件和一个CSS文件
|
注 意 |
||
|
|
这里的CSS样式表文件显示为Dreamweaver图标的样式是因为在系统上安装了Dreamweaver软件。 |
|
HTML文件的代码如示例3.14所示。
示例3.14
<html>
<head>
<title>CSS Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><p>外联样式表是CSS作用于HTML文档的第三种解决方案。它具有最低的优先级，但是具有最高的灵活性和便捷性，它允许不同的编组、分级，以及不同媒介样式表定义。</div>
</body>
</html>
CSS样式表文件的代码如示例3.15所示。
示例3.15
div { background-color: #FFFFFF; color: #000080;
font-size: 10pt; font-weight: bold;
border-style: dotted; border-width: 1px; border-color: #800000; }
由示例3.14可以看出，起到关键联系作用的就是<link>元素，它的href属性定义CSS样式表路径，而rel和type属性定义其他相关方面的内容。
外联样式表文件拥有更为灵活的优点，这些优点表现在以下方面。
（1）多个HTML文档可以共享同一个样式表。
（2）修改样式表文件的时候不用打开HTML文档。
（3）浏览器可以根据媒介描述选择打开相关样式表。
外联样式表通过<link>元素来完成，<link>必须位于<head>元素范围内。<link>元素的以下属性用来定义样式表属性。
（1）href属性定义外联样式表文件的URI地址。
（2）type属性定义内容类型，通常为“text/css”。
（3）利用rel和title属性设定强制、建议和替换样式表。
例如，有一个CSS样式表文件为mystyle.css，在HTML文档的同一目录下。现在该HTML文档需要外联该样式表文件，则设计者可以在<head>中按如示例3.16所示来定义<link>元素。
示例3.16
<link href="mystyle.css" rel="stylesheet" type="text/css">
设置title属性则代表设计者的建议样式表，如示例3.17所示。
示例3.17
<link href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
在rel属性中添加“alternate”关键字则可以令当前外联样式表成为替换样式表，如示例3.18所示。
示例3.18
<link href="mystyle.css" title="medium" rel="alternate stylesheet" type="text/css">
由此，设计者可以在不打开HTML文档的情况下，直接编辑mystyle.css就能改变HTML文档显示的样式。
rel属性定义链接类型，链接类型的属性值如表3.1所示。
表3.1 链接类型的属性值及其说明
|
属 性 值 |
说 明 |
|
Alternate |
定义替换版本 |
|
Stylesheet |
指向外联样式表文件 |
|
Start |
指向一组文档集合的第一篇文档 |
|
Next |
在一组线性文档中指向下一篇文档 |
|
Prev |
在一组有序文档中指向前一篇文档 |
|
Index |
指向一篇提供当前文档目录的文档 |
|
Glossary |
指向一篇提供当前文档词汇表的文档 |
|
Copyright |
指向一篇提供当前文档版权声明的文档 |
|
Chapter |
指向一篇作为一系列文档章节的文档 |
|
Section |
指向一篇作为一系列文档章节的文档 |
续表
|
属 性 值 |
说 明 |
|
Appendix |
指向一篇作为一系列文档附件的文档 |
|
Help |
指向一篇提供帮助文件的文档，其中包含更多信息或者指向其他信息的链接等 |
|
Bookmark |
指向一个书签 |
