![跨媒体信息传播原理与技术](https://wfqqreader-1252317822.image.myqcloud.com/cover/834/25505834/b_25505834.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
二、CSS样式文件
在添加样式时,在图2-20下方的“规则定义”如果选的是“新建样式表文件”,则会将样式定义写到另一个文件中(图2-21),这样HTML就会变得更加简捷。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0001.jpg?sign=1738906499-6HREhy8yiE1e9tsvmHqALHgQkVMjoVpU-0-d157123e3844df1d2d0930972d83725f)
图2-20 新建样式表文件
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0002.jpg?sign=1738906499-w2CyB67pBrmtak9Lh4X6KOWmVUEUC8Rv-0-76f666d13a7acdeef54b2310f27a9eec)
图2-21 定义样式表文件的文件名
此时,HTML将会变成这样,如图2-22所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0003.jpg?sign=1738906499-tgmm0kHpFMindveVDO9rv3M3ibiT1vNS-0-edd7c1e577834b7929e9662f40b54329)
图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=1738906499-L5XqLdjQ07zDjeKMorfizOT4MA7N1sVb-0-cc4a3878fd6f7f648e61b9d4d884f0b8)
图2-23 样式表文件中的CSS样式定义