Artile_Title
第五篇、样式表篇
好了，前面几篇我们已经介绍了网页中的常见内容及排版布局的知识，这是我们Web制作的基础，打好这些基础后，可以往更高的台阶上走了。样式表将是你迈向更高台阶的必由之路。不管会不会使用样式表，样式表对于如今的网页制作者来说已经不是一个陌生的概念了，从它的相关标准制订到现在不过短短的几年，已经成为最为重要的技术，样式表制订的目标是使网页中的内容与样式分开，在各种介绍样式表的资料中，绝大多数都要求使用者能够直接的操作编写样式表代码，这是很多人对样式表的使用望而生畏，其实在Dreamweaver中我们就可以简单的对样式表进行操作和使用，关于在Dreamweaver中创建、定义和使用样式表的基本方法，朋友们可以参考我的另一篇文章《在Dreamweaver中使用样式表》，地址在：http://www.bitgenius.com/tutorial/dw/css/dw-css1.htm，本篇我就不再作详细的介绍了，我只简单再说明几个非常重要的概念和规则。
一、 样式表基本概念和规则。之所以再强调以下的一些概念和规则，是因为这些常常是初学者容易混淆和模糊的知识，理解好了这些概念会使我们对样式表的使用有一个更加清晰的思路。
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字体尺寸。