- 跨媒体信息传播原理与技术
- 翟铭
- 295字
- 2020-08-29 17:43:40
二、CSS样式文件
在添加样式时,在图2-20下方的“规则定义”如果选的是“新建样式表文件”,则会将样式定义写到另一个文件中(图2-21),这样HTML就会变得更加简捷。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0001.jpg?sign=1739041654-4iq2FteNVFtknro0mWwRcFMVMEYlnjCK-0-8c5674873939916b294cfbc8493b9753)
图2-20 新建样式表文件
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0002.jpg?sign=1739041654-o3FbXy2ExqatbMh5PrEQypbhVOimkRu8-0-1cfe43d9e03fd4d23102da986ef730d6)
图2-21 定义样式表文件的文件名
此时,HTML将会变成这样,如图2-22所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0003.jpg?sign=1739041654-9fICfDOiwAOa3hFe9tR7lqloe6DIWLI0-0-b396a4bc76821cf53cfd27c32a22d867)
图2-22 链接样式表文件的HTML语句
从图2-22中的HTML语言可以看出,在head中没有了:
<style type="text/css">……</style>
样式定义部分,换成了一个样式表的链接。
<link href="style.css" rel="stylesheet" type="text/css">
打开这个style.css文件,显示出来的是.zw类的定义,如图2-23所示。定义的写法与上述样式表的定义是一样的。可以看出,这种方法实际上是把样式的定义放在了另一个文件中,新的网页的设计理念就是HTML中所放网页的内容,所有有关样式的定义都放在了CSS样式表中。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0004.jpg?sign=1739041654-12G5v8C8I9W9phCQxZlggq59w5dmiNW4-0-b1863511e44f36244b86ae19b8b54293)
图2-23 样式表文件中的CSS样式定义