Dreamweaver8 中CSS 样式表的若干问题.docVIP

Dreamweaver 8中CSS样式表的若干问题 柯白杨 （福建电大三明分校，福建三明，365000） 摘要：通过对Dreamweaver 8中CSS样式表的选择器、样式类型、套用方法、外部CSS样式链接与创建、样式冲突等若干问题的阐析，进一步明确CSS样式表的有关概念和使用方法。 关键词：Dreamweaver 8；CSS样式表；若干问题 Dreamweaver有两种样式类型：HTML标记样式和CSS样式。HTML样式是预定义的格式，如＜H1＞。所有应用＜H1＞标记的文本都会应用指定的风格。虽然HTML样式提供了比较全面的格式控制，但由于浏览器兼容性等方面的问题，实际的显示效果往往不尽人意。使用CSS可以使页面按照设计者的想法精确地布局，从而达到和谐、美观的显示效果。 CSS是“Cascading Style Sheet”的缩写，有些书上把它译为“层叠样式表”或“级联样式表”，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性网页设计语言。术语“级联”是指同一个网页应用多个样式表的能力。CSS是一系列格式规则，用来控制网页内容的外观，包括精确的布局定位、特定的字体和样式等。CSS样式可以控制许多使用HTML无法控制的属性。如可以指定自定义列表项目符号并指定不同的字体大小和单位。“样式表”从字面上理解，就是网页中各元素设定好样式的一个列表。样式表可以当作网页的模板来使用。当用户新建一个网页时，就可以直接使用样式表来设定网页的样式，而不需要再单独定义网页的样式。使用CSS样式文件的好处是，可保持一个网站的风格统一。理论上讲，CSS简化了HTML中各种繁琐的标签，使各个标签的属性更具有一般性和通用性，并且扩展了原先的标签功能，能够实现更多的效果。打个比方，CSS就像是HTML中的成语、谚语、歇后语，尽管字少，但内涵却非常丰富，同时也规范了语言的表述。到目前为止，只有CSS能够统一各种浏览器的网页样式。因为不能保证开发的网页所面向的用户只使用某一种浏览器，所以CSS是网页制作的必备武器。使用样式表可以设置页面中的文本样式、背景样式、区块样式、边框样式、鼠标光标样式等，可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格及位置；可以灵活地为元素设置各种效果的边框；可以方便地为网页中的元素设置不同的背景颜色、背景图片及平铺方式；可以更加精确地控制网页中各元素的位置，使元素在网页中浮动；可以与脚本语言相结合，使网页中的元素产生各种动态效果。在博客中，有一个主要的功能就是换皮肤，用户可以选择自己喜欢的界面。CSS可以将样式和内容分离开，同样的内容使用不同的CSS就可以看到不同的界面。 CSS层叠样式表有以下特点： 将格式与结构分离； 以前所未有的能力控制页面布局； 制作体积更小、下载速度更快的网页； 许多网页同时更新，比以前更快、更容易； 浏览器将成为更友好的界面。 一、三种选择器 选择器是设定CSS样式要套用在什么网页组件上的分类。在Dreamweaver 8中有三种选择器：类、标签、高级。见图1。 类选择器是针对自行设计的CSS样式使用，可自定义样式名称，并设计该样式的组合，当设定好样式后便可套用在文章内任一文本上。用户可以在文档的任何区域或文本中应用类样式，若将类样式应用于一整段文字，那么会在相应的标签中出现“class”属性，该属性值即为类样式名称。若将类样式应用于部分文字上，那么会出现span和/span标签，并且其中包含“class”属性。类样式可以在一个HTML元素中被多次调用。 标签选择器只在HTML特定的标签重新定义格式时使用，可以针对某一标签定义CSS样式表，只能选择列表中的标签名称调整其样式，而无法新建名称。一般常更改的标签样式有body、p、h1等。 高级选择器可以定义特殊的标签组合以及包含特殊序列号（ID）的标记属性。有四种给定的组合样式，分别是：a:link，a:active，a:visited，a:hover。我们也可以自定义标签组合，如“td a”，那么凡遇到的td、a这样的标签组合都会按我们设置的格式显示。 CSS的链接样式归于Dreamweaver 8的高级样式中，所提供的高级样式包括a:active、a:hover、a:link、a:visited。其中，a:active设定鼠标单击时链接文字的外观、a:hover设定鼠标放置在链接文字之上时文字的外观、a:link设定正常状态下链接文字的样式、a:visited设定访问过的链接文字的外观。在设计超链接文本效果时，若只挑选上述四种中的其中一个状态加以变更便无先后顺序问题，若要同时调整则必须“四位一体”，严格按照a:link、a:visited、a:hover、a:active的顺序。 在设置选择器类型时需注意以下几点： 在定义类样式名