![跨媒体信息传播原理与技术](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=1739297001-F2k7maVWgTMEOHPkNjmr94WizHnvX05M-0-36bada221a6caeb3f59ae61ef3075ceb)
图2-20 新建样式表文件
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0002.jpg?sign=1739297001-4tzwXpJCk3Q0Iqo40RdJA58qlMS9GzXY-0-ecd5b203d0b11a52a6de1ed711179543)
图2-21 定义样式表文件的文件名
此时,HTML将会变成这样,如图2-22所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0003.jpg?sign=1739297001-o6RUQBsqopnyMMI5BDUf3NRhFt4GutrZ-0-4cb04eeea85382eeaf99d183690db509)
图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=1739297001-WxqkAAvyY5mE22PvjUrDYPTrYhGWplW5-0-06f983dde5d5a40f179128e5c1f55239)
图2-23 样式表文件中的CSS样式定义