![跨媒体信息传播原理与技术](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=1739051838-QnHpA30G7z4kJw4WTNebiv4mubPRYbXP-0-3f13d59aee615832d47491985104f29c)
图2-20 新建样式表文件
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0002.jpg?sign=1739051838-711oOMHbv8jw5MSCnUmHENd3XIpSDS35-0-bbb3a89014f981f1d61ffbfde42c1437)
图2-21 定义样式表文件的文件名
此时,HTML将会变成这样,如图2-22所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0032-0003.jpg?sign=1739051838-trSXKKF6Wm2mmh74IXK2UdBqP99sG61J-0-8b8765c7e42e895c9b0e186357d05e3c)
图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=1739051838-KF4LrczeT4WBhCzsj85ezK1bTVGXqdEt-0-81d6ebd32414ce265cf627c982d0f9d8)
图2-23 样式表文件中的CSS样式定义