五

五、样式表

作 者 : 阿文

　　层叠样式表 即 CSS （ Cascading Style Sheets ），是 W3C 制定的一种统一的网页元素定义规则。它给页面设计者提供了一个使网页获得一致的布局，给予它们独一 无二的背景、色彩和页面元素的放置形式。更为诱人的是，一个样式表可以应用到很多网页中去，使其获得相同的页面布局和外观，这也意味着一次的劳动可以被多次利用。

　　在学习 Dreamweaver 的样式表设计之前，建议先要对层叠样式表 CSS 的相关知识有所了解，这里只就在 Dreamweaver 中的操作对它加以适当的介绍，我试图能够把它讲得全面细到一些，但是想告诉你仅仅凭着本节内容所讲述的知识肯定是不够的。

　　单击 Launcher 面板上的 Styles 按钮或是 F7 键， Apply to 有两项： < BODY> ，对整个页面产生作用， < SELECTION> ，仅对所选部分产生作用。

样式表分为内嵌样式表和外部样式表两种。单击“ Styles Sheet ”， Link 表示连接外部样式表， New 指新建 的内嵌样式表，至于内嵌样式表的作用范围，应该在刚才是选择 BODY 还是 SELCTION 就决定了。如果希望使用整个网站页面整体布局的通用样式表（假定已经存在），单击 Link 按钮，这里提供了外部样式表两种选择： LINK ——链接样式表； IMPORT ——导入样式表。

我们在此重点介绍的是内部样式表的设计和使用。单击 NEW 键，下面对之作一一的介绍。

　　1 、 Make Custom Style ，自定义式样，用户可以人为定义样式名称，默认为 .unmaned1 ，前面这个小点很重要，它说明了该式样为 class ，它将对凡是页面中定义为这个名称的元素产生作用，也就是说，同一个 class 可以多次被定义，所有被定义为同一个 class 的页面元素在页内的布局将会得到一致的控制。

　　2 、 Redefine HTML TAG ，重定义 HMTL 标签样式。这一项很好理解，即给 HTML 中的各种标签定义式样。

　　3 、 Use CSS Selector ， CSS 的选择样式。定义两个或两个以上的 CSS 元素的组合式样。 Dreamweaver2 预置了四种超链接组合式样，分别 a:active （被激活的链接状态）、 a:hover （鼠标滑过的链接状态）、 a:link （链接的初始状态）、 a:visited （已访问过的链接状态），定义这几个元素可以在网页中实现直观的动态超链接效果。我们刚才讲到了样式表的类名（ class ），它的标识是在样式名称之前有一个“ . ”，如果在样式名之前不是这个小点而改成“ # ” , 则标志着该名称代表某元素的 ID ，这个 ID 在一页中唯一的，不允许多重使用，它只对该 ID 号的元素产生作用。 ID 号也在这里定义。

选择了某一种样式元素之后出现的定义对话框都是相同的，只是产生作用的范围根据所定义的元素范围的不同而不同。限于篇幅，仅仅介绍其中的 TYPE 选项。

　　FONT ，定义字体； SIZE ，定义文字大小； Weitgh ，定义文字粗细； Style ，定义字体风格，分为正常、斜体和倾斜（似乎很不好理解，事实上我也看不出来斜体和倾斜有什么不同）； Variant ，选择字体的变化， Dreamweaver 在页面编辑中无法显示这一项； Line ，设定文本行宽； Case ，使首字母变成大写或小字字母，在页面编辑中也不能显示； Color ，定义字体颜色； Decoration ，文字修饰，包括下划线、顶划线、删除线和闪烁。

　　此外其它几个版块分别为： BACKGROUND ，定义背景颜色和背景图像的显示方式； BLOCK ，定义文字的排列及字距等； BOX ，精确控制元素在页面中的放置位置； BORDER ，定义边框线的式样； LIST ，定义列表的显示规则； POSITION ，定义浮动层的显示； EXTENSION ，扩展功能，控制不被当前大多数浏览器支持的某些特征，例如可以定义鼠标滑过对 象时的形状（仅有 IE 4.0 以上版本支持本特性）。要想详细的知道这些方面的功能和运用，请参考 CSS 规则。

　　说了这么多，可能没有什么感性的认识，为了使样式表的设计便于理解，还是让我们来看一个简单的例子，相信你就会明白样式表的无穷妙用了。

　　在 Edit Style Sheet 对话框中选择 NEW ，建立新的式样，选中第二项 Redefine HTML Tag ，在下拉菜单中选择 < Body> ，然后开始定义。 Size 栏中填入 9 points ，这是当前网站流行的一种字体大小。 Line 为 130% ，指定行距为字高的 130% ， Color 为 #3333CC ，按 OK 键。继续选择 NEW 键新建第二样式规则，在 Redefine HTML Tag 中选择 H1 ， Font 为“楷体 _GB2312 ”， Weight 为 Bold ， Color 为 #CC3399 ，按 OK 键，再按 DONE 确定。

　　现在让我们来看一看整个页面布局的显示。

页面中凡是未加定义字号的文本均为9 pionts ，蓝色，有了行距显得十分美观，而凡是字义为 H1 的文本全部是楷体加粗字，紫红色。整个页面规范而整齐。现在你是否能体会到样式表的好处了呢？

　　再来讲一讲定义 CLASS 和 ID 的方法。 CSS 有了这两项显然变得灵活得多了，重要的是我们必须分清楚它们之间的区别，在何种场合下使用。首先新建若干个 CLASS 和 ID （忘记上面说过了吗？快回去找找，前者在 Make Custom Style 中建立，后者在 Use CSS Selector 中建立。建立完毕以后，看 Dreamweaver 最底下的状态行，它将显示当前光标所在位置包含的所有 HTML 标记，在某一需 要定义标记上按右键，弹出菜单会表明当前所有的 CLASS 和 ID ，从中择一以后，该标记所指定的那部分页面元素即按照样式规定的来显示了。比如你为 < H1> 标记指定一个类名，这个 < H1> 字体所指定的文本就会按照新的方式来显示，但是，其它凡是定义为 < H1> 的文本并不受影响，明白和直接使用 HTML 标签定义样式的区别了吗？——最后，不厌其烦地再提醒你一次， CLASS 可以使用多次， ID 就没那么幸运了，它是唯一的，你不能一再地使用它。