基于CSS技术在网页设计中应用.docVIP

基于CSS技术在网页设计中应用 　　[摘要]通过研究CSS层叠样式表的主要思想，结合具体实例介绍如何在网页设计中使用样式表的方法，使读者准确掌握CSS技术，并可进行实践运用。 　　[关键词]CSS 网页 级联样式表 HTML 　　中图分类号：TP3文献标识码：A文章编号：1671－7597（2009）0420048－01 　　 　　一、引言 　　 　　CSS是一种样式表（stylesheet）技术。也有的人称之为层叠样式表 　　（Cascading Stylesheet）。它的作用简单的说就是可以使你在同一页面里使用不同的超链接样式。用CSS仅仅改变一个文件就可以改变数百个网页的外观，个性化的表现而不损，这些都因为网页样式表的强大和灵活特性。 　　 　　二、CSS与HTML的结合方式 　　 　　一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中： 　　＜LINK REL=StyleSheet HREF=style.css TYPE=text/css MEDIA=screen＞ 　　＜LINK REL=StyleSheet HREF=color-8b.css TYPE=text/css TITLE=8-bit Color Style MEDIA=screen, print＞ 　　＜LINK REL=Alternate StyleSheet HREF=color-24b.css TYPE=text/css TITLE=24-bit Color Style MEDIA=screen, print＞ 　　＜LINK REL=StyleSheet HREF=aural.css TYPE=text/css MEDIA=aural＞ 　　＜LINK＞标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。 　　外部样式表不能含有任何像＜HEAD＞或＜STYLE＞这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由 　　P {margin: 2em } 　　组成的文件就可以用作外部样式表了。 　　＜LINK＞标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有： 　　screen（缺省值），提交到计算机屏幕； 　　print，输出到打印机； 　　projection，提交到投影机； 　　aural，扬声器； 　　braille，提交到凸字触觉感知设备； 　　tty，电传打字机 （使用固定的字体）； 　　tv，电视机； 　　all，所有输出设备。 　　多样的媒体通过用逗号隔开的列表或值all指定。 　　Netscape Navigator 4.x错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA=screen,projection会令到样式表被Navigator 4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x也忽略使用MEDIA=all声明的样式表。 　　REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet 　　指定一个固定或首选的样式而REL=Alternate StyleSheet定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个＜LINK＞标记，定义一个固定样式。 　　一个首选样式会自动被应用，就像例子中的第二个＜LINK＞标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。 　　交互样式通过REL=Alternate StyleSheet指出。例子中的第三个＜LINK＞标记定义一个交互样式，用户可以选择用来代替首选样式表。 　　注意现在的浏览器一般都缺乏选择交互样式的能力。 　　单一的样式也可以通过多个样式表给出： 　　＜LINK REL=StyleSheet HREF=basics.css TITLE=”Contemporary＞ 　　＜LINK REL=StyleSheet HREF=tables.css TITLE=Contemporary＞ 　　＜LINK REL=StyleSheet HREF=forms.css TITLE=Contemporary＞ 　　在这个例子中，三个样式表组合成一个Contemporary样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE