第五章　样式表篇

　　好了，前面几篇我们已经介绍了网页中的常见内容及排版布局的知识，这是我们Web制作的基础，打好这些基础后，可以往更高的台阶上走了。样式表将是你迈向更高台阶的必由之路。不管会不会使用样式表，样式表对于如今的网页制作者来说已经不是一个陌生的概念了，从它的相关标准制订到现在不过短短的几年，已经成为最为重要的技术，样式表制订的目标是使网页中的内容与样式分开，在各种介绍样式表的资料中，绝大多数都要求使用者能够直接的操作编写样式表代码，这是很多人对样式表的使用望而生畏，其实在Dreamweaver中我们就可以简单的对样式表进行操作和使用，在这里我只简单再说明几个非常重要的概念和规则。

一、 样式表基本概念和规则。之所以再强调以下的一些概念和规则，是因为这些常常是初学者容易混淆和模糊的知识，理解好了这些概念会使我们对样式表的使用有一个更加清晰的思路。

1、 层叠的概念：样式表及CSS是层叠样式表单的缩写，因此它最基本的概念就是层叠。及样式表分为外联、内联、内嵌三种定义和使用的途径，而这几种方法又是互相影响的。所谓外联样式表是值我们将一些样式信息定义在一个单独的外部文件中，我们在整个站点的所有文件中都可以链接此文件并使用其中定义的样式；内联是指我们将一些样式定义的信息块放在HTML文件内的头部，我们只可以在当前网页中使用这些定义信息；内嵌时只我们将样式信息直接定义在网页中特定的标签和元素上，例如一个表格、一个图片或一段文字，这个样式信息并不会被页面上其它部分的元素使用。而这三种定义方式又是互相继承的关系，它们的优先级是内嵌<内联<外链，即越靠近页面元素的样式属性，它的优先级越高，也就是说元素最终显示的样式是优先级最高的样式定义，同时各元素会自动继承上级父元素中定义的样式。

2、 类、伪类。传统的HTML标签元素对页面的控制能力是有限的，在样式表中引入了选择符的概念后，极大的增强了我们控制每个元素的能力。现在我们可以根据需要定义单独的一种样式类，然后将它付给不同的页面元素，而它们保持相似的外观。在Dreamweaver中可以向下图所示定义一个类；

　　一般我们用一个”.name”格式来定义一个类，还有一种以”#name”格式定义的常用在特别指定某一个样式的唯一名称，一是我们可以动态的调用此元素。通常我们在上面定义的类都要在页面的某一个元素上指定才可以使它生效，还有一种特殊的类，它不需要在相应的元素上指定就可以使用，这叫作伪类，例如我们定义的文字链接样式：A.link,A.visited,A.hover，这里面所定义的类：.link,.visited,.hover并不需要在页面中单独增加到文字链接样式上。

3、 格式化模型、容器。

1） 容器：样式表其实就是对Web页面的内容进行格式化编排和显示，CSS的一个重要基础就是容器的定义，也就是说我们将页面上的各种元素都假想为一个个矩形的容器里（Box），然后控制它们的样式。这个概念是我们必须理解的，例如一个表格是一个容器，我们可以控制它里面的元素的属性。一个图片是一个容器，我们可以控制它与其它容器之间的关系。而单独的一段文字不能成为容器，所以不能格式化它们，只有讲它们放入一个容器才可以定义它们的样式，这个容器可以是<div>、</span>、<h1>、<font>等等许多可以将它包围起来的元素。

2） 格式化模型。格式化模型就是指如何定义这个容器内部及外部的一些属性值以及它们之间的相互关系。这里面包括核心的内容区域以及它周边的边距(margin)、边框(border)以及填充区域(padding)，在后面我将会详细介绍这些属性的设定。我们可以仔细的看看下面这张图以加深理解：

3） 块级元素和行内元素。从格式化的角度来看，Web页面中有两种元素。块级元素是指

4、 单位。样式表的另一个优势在于它可以精确的定义和控制元素的外观。这就要归功于样式表中的定位单位，通常的元素都可以设定相应的内容宽、高、左右边距以及字体尺寸等等。它们都遵循相同的单位格式，我们可以把它分为相对单位和绝对单位。

1） 绝对单位。Web页上常用的绝对单位有厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派克(pc)。绝对长度通常不能适应各种浏览器的多样性变化，因此应用的比较少。

2） 相对单位。我们常用的单位是相对单位，所谓相对单位是指元素尺寸相对于浏览器的的系统默认值来相应的缩放。包括：像素(px)、em和ex。Px是相对于浏览者的计算机屏幕分辨率来显示的，Windows用户一般使用96像素/英寸的分辨率，而Mac用户使用72像素/英寸分辨率。而em则是相对于当前对象中文本M的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认M字体尺寸。而ex是相对于当前对象中文本x的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认x字体尺寸。

二、 Dreamweaver样式表面板操作。好了，上面讲了这么多样式表的基础概念和使用规则，下面我们来看看在Dreamweaver样式表面板中如何详细定义各个参数。进入样式表面板参数定义对话框后，我们可以看到左边一栏是样式表的属性分类，如图：

　　而右边是每一个分类里面的详细参数设置，下面我来分别介绍这几个分类，由于样式表的参数众多，我只介绍比较常用的参数。

1、 字体属性（Type）。

　　字体属性是每个页面中最基本的属性，需要注意的是，我们并不仅仅是对单独的文字定义字体属性，几乎所有得页面元素都会涉及到字体定义，如定义表格需要涉及表格中的字体、定义列表需要涉及列表中的字体、定义表单也会涉及到表单中的字体。字体属性面板中的参数比较好理解，它会涉及到我们上面介绍的字体长度单位。我简单介绍各个参数的意义。

1） Font：字体字型文件，对于中文，最好只使用系统自带的四种字体，常用宋体。

2） Size：字体大小。通常我们用12px大小的。

3） Style：字体的修饰，包括正常和斜体。

4） Line：字体的行间距，我们选用1.5ems是代表行距为字体大小的1.5倍。

5） Decoration：设置对象中文本的装饰，分别有下划线、上划线、删除线、闪烁。

6） Color：字体颜色。

2、 背景属性（Background）。

　　背景的属性通常包括背景色和背景图片，在样式表中Color通常指的是前景的颜色，更多时候也就是字体的颜色，而Background是指背景的颜色。在这个对话框离我们可以精确设定背景图片的位置、是否重复显示、是否随页面内容滚动。

1） Repeat：设定背景是否重复以及可以沿着特定方向重复。

2） Attachment：设定背景图片可以固定或随着内容而自动滚动。

3） Horizontal/Vertical设定背景图片的偏移值。

3、 文本块属性（Block）。

　　文本块属性主要是定义段落的一些属性值，需要注意的是在Dreamweaver样式面板里很多属性前面有“*”,这表示此属性只能在浏览器中看到效果，在Dreamweaver的编辑其中无法预览。

1） Word Spacing：这是定义各个单词之间的额外间距，对中文格式无效。

2） Letter Spacing：定义每个字符之间的额外间距，对中文同样有效。

3） Vertical Alignment：垂直对齐方式。

4） Text Align：水平对齐方式。

5） Text Indent：这是段落首行缩进的距离，通常我们定义2ems，及两个中文字的距离。

6） Whitespace：设置或检索对象内空格的处理方式。

4、 容器属性（Box）。这是样式表最为重要的一个属性类别，是实现页面元素精确定位的基础。

1） Width/Height：宽和高。实现容器概念的基础，只有定义了其中的一个值，才能使元素具有容器的空间。

2） Padding：填充距，决定了容器边框和容器内部的内容之间的距离。

3） Margin：边距，设置容器中的元素和周围的元素之间的距离。

4） Float：使元素悬浮在页面上，可以使周围的文字围绕在此元素周围，类似于图文混排的概念，但是在CSS中任何元素都可以像图片一样实现悬浮。

5） Clear：这个属性是配合上面的浮动属性，它可以决定浮动属性是否可以出现在指定的容器一边，例如设定Left表示浮动元素不可以出现在容器的左边。

5、 边框属性（Border）。此属性是容器概念中的重要内容，可以设定容器四边的边框宽度数值、颜色及边框样式。

1） Width：可以精确指定边框的数值，要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

2） Color：可以为每一个边框单独设定色彩。

3） Style：设定边框的外观样式，需要注意有些样式只有在IE5.5以上浏览器中才可以看到效果，如下图：

6、 列表属性（List）。

列表属性可以对分级列表内容进行更多的控制。

1） Type：设定列表显示的项目符号或编号的类型。

2） Bullet：可以为列表指定一个单独的图片作为标志，例如一个三角形的箭头。

3） Position：设定列表容器中的内容显示位置。

7、 定位属性（Position）。

　　定位属性是实现精确和自由定位的关键属性，它给了设计者更大的控制页面元素的能力，而且还扩展到了三维的z轴方向，从而为动态页面的实现创造了基础。

1） Type：定位属性的基本类型有相对定位和绝对定位，相对定位使元素倚赖页面元素的原始位置进行偏移，而绝对定位使元素脱离原始元素的束缚，实现自由偏移定位，绝对定位的元素与父级元素的位置无关。

2） Z-Index：当两个绝对定位的元素位置有相同的，则依赖此属性确定哪个元素遮挡另一个元素。

3） Placement：这里面的属性定义了容器的具体大小以及与已有的父级元素的距离。

4） Clip：设置对象的可视区域，所设定区域之外的内容将被剪切隐藏。必须将position的值设为absolute，此属性方可使用。

5） Visibility：决定元素的显示状态是可见还是不可见。

8、 扩充属性。这个对话框中的属性是一些增强性的样式属性，在低版本和不同类型的浏览器支持不好。

1） Page Break：设定打印时页面分页的位置。

2） Cursor：用来设定鼠标通过对像位置时显示何种系统内置光标外形。

3） Filter：使用这里的设置可以将一些特定的滤镜和转换效果添加到一个容器中的元素上，由于这个属性里的参数非常众多，我不在这里作详细介绍。

三、 Dreamweaver的样式表编辑器为样式表的建立和使用提供了方便快捷的途径，普通爱好者也可以从这里开始接触样式表的强大功能，通过样式表我们能更方便的将页面的样式控制在我们手中，一切都在你的掌握之中这将是多么惬意的感觉。

技巧提示：

1、 CSS链接样式技巧。文字链接一般有四个状态，link、hover、active、visited，我们通常都会对文字链接的各个状态定义不同的色彩和样式，但经常有朋友发现自己定义的样式在浏览时并未像设想的那样。主要原因是在样式表中对链接的定义顺序有一定的要求，正确的顺序是：A:link,A:visited,A:hover。对一般的朋友来说，其实很多时候只是想Hover状态有变化，有个小技巧就是不按上面的方法定义链接样式，而只需定义a和a:hover状态的样式即可，这样只有hover状态的样式与其它状态的不同。修改方法如下图；

2、 创建不同色彩的连接文字与下划线。普通的链接文字与链接下划线都是相同的色彩，其实我们也可以利用样式表中的Border属性来替代普通链接的划线，由于Border有更多的控制参数和样式，因此只要将Border的色彩和文字的色彩定义的不同即可实现我们的目的。例如我们可以将文字定义为黑色，而在Border选项中定义下划线为红色，如下图；

3、 减小样式表文件的大小。经常我们定义的外接样式表文件会慢慢变得非常大，一般来说，超过3K大小的样式表就非常的大了，它会影响文件的解释速度。有一个技巧就是充分利用样式表的继承属性，例如我们不需要定义每个样式的字体和字体大小，我们只需先对<body>和<td>定义基本的字体字型和字体大小，其它的样式定义都不用定义这两个属性，相应的会自动继承这里定义的属性。

4、 尽可能的使用外接样式表。既然样式表的初衷就是为了使页面内容和样式分离，因此我们应该尽可能的使样式的定义脱离具体的页面内容，即将样式定义在外部单独的样式表文件中，这样也有利于保持整个站点风格的一致性，而且方便我们随时修改整个站点的外观。