阿飙专线Dreamweaver直通车──深入样式表
#1?牐犚弧⒀奖砘靖拍詈凸嬖?
?牐犞栽偾康饕韵碌囊恍└拍詈凸嬖颍且蛭庑┏３Ｊ浅跹д呷菀谆煜湍：闹叮斫夂昧苏庑└拍罨崾刮颐嵌匝奖淼氖褂糜幸桓龈忧逦乃悸贰?
#2?牐?1.层叠的概念
?牐犙奖砑癈SS是层叠样式表单的缩写，因此它最基本的概念就是层叠。样式表分为外联、内联、内嵌三种定义和使用的方法，而这几种方法又是互相影响的。所谓外联样式表是我们将一些样式信息定义在一个单独的外部文件中，我们在整个站点的所有文件中都可以链接此文件并使用其中定义的样式；内联是指我们将一些样式定义的信息块放在HTML文件内的头部，我们只可以在当前网页中使用这些定义信息；内嵌时只我们将样式信息直接定义在网页中特定的标签和元素上，例如一个表格、一个图片或一段文字，这个样式信息并不会被页面上其它部分的元素使用。而这三种定义方式又是递进继承的关系，它们的优先级是内嵌<内联<外链，即越靠近页面元素的样式属性，它的优先级越高，也就是说元素最终显示的样式是优先级最高的样式定义，同时各元素会自动继承上级父元素中定义的样式。
#2?牐?2.类、伪类
?牐牬车腍TML标签元素对页面的控制能力是有限的，在样式表中引入了选择符的概念后，极大的增强了我们控制每个元素的能力。现在我们可以根据需要定义单独的一种样式类，然后将它付给不同的页面元素，而它们保持相似的外观。在Dreamweaver中可以如图（^46040702a^）所示定义一个类；
?牐犚话阄颐怯靡桓觥?.name”格式来定义一个类，还有一种以“#name”格式定义的常用在特别指定某一个样式的唯一名称，一是我们可以动态的调用此元素。通常我们在上面定义的类都要在页面的某一个元素上指定才可以使它生效，还有一种特殊的类，它不需要在相应的元素上指定就可以使用，这叫作伪类，例如我们定义的文字链接样式：A.link，A.visited，A.hover，这里面所定义的类：.link，.visited，.hover并不需要在页面中单独增加到文字链接样式上。
#2?牐?3.格式化模型、容器
?牐牐?1）容器：样式表其实就是对Web页面的内容进行格式化编排和显示，CSS的一个重要基础就是容器的定义，也就是说我们将页面上的各种元素都假想为一个个矩形的容器里（Box），然后控制它们的样式。这个概念是我们必须理解的，例如一个表格是一个容器，我们可以控制它里面的元素的属性。一个图片是一个容器，我们可以控制它与其它容器之间的关系。而单独的一段文字不能成为容器，所以不能格式化它们，只有将它们放入一个容器才可以定义它们的样式，这个容器可以是<div>、</span>、<h1>、<font>等等许多可以将它包围起来的元素。
?牐牐?2）格式化模型：格式化模型就是指如何定义这个容器内部及外部的一些属性值以及它们之间的相互关系。这里面包括核心的内容区域以及它周边的边距（margin）、边框（border）以及填充区域（padding），在后面我将会详细介绍这些属性的设定。我们可以仔细看看图（^46040702b^）以加深理解：
#2?牐?4.单位
?牐犙奖淼牧硪桓鲇攀圃谟谒梢跃返亩ㄒ搴涂刂圃氐耐夤邸?
?牐牐?1）绝对单位：Web页上常用的绝对单位有厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派克（pc）。绝对长度通常不能适应各种浏览器的多样性变化，因此应用得比较少。
?牐牐?2）相对单位：我们常用的单位是相对单位，所谓相对单位是指元素尺寸相对于浏览器的系统默认值来相应的缩放。包括：像素（px）、em和ex。Px是相对于浏览者的计算机屏幕分辨率来显示的，Windows用户一般使用96像素/英寸的分辨率，而Mac用户使用72像素/英寸分辨率。而em则是相对于当前对象中文本M的字体尺寸大小。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认M字体尺寸。而ex是相对于当前对象中文本x的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认x字体尺寸。
#1?牐牰reamweaver样式表面板操作
?牐牶昧耍厦娼擦苏饷炊嘌奖淼幕「拍詈褪褂霉嬖颍旅嫖颐抢纯纯丛贒reamweaver样式表面板中如何详细定义各个参数。进入样式表面板参数定义对话框后，我们可以看到左边一栏是样式表的属性分类。而右边是每一个分类里面的详细参数设置，下面我来分别介绍这几个分类，由于样式表的参数众多，我只介绍比较常用的参数。
#2?牐?1.字体属性（Type）
?牐犠痔迨粜允敲扛鲆趁嬷凶罨镜氖粜裕枰⒁獾氖牵颐遣⒉唤鼋鍪嵌缘ザ赖奈淖侄ㄒ遄痔迨粜裕负跛械靡趁嬖囟蓟嵘婕暗阶痔宥ㄒ澹缍ㄒ灞砀裥枰婕氨砀裰械淖痔濉⒍ㄒ辶斜硇枰婕傲斜碇械淖痔濉⒍ㄒ灞淼ヒ不嵘婕暗奖淼ブ械淖痔濉Ｗ痔迨粜悦姘逯械牟问冉虾美斫猓嵘婕暗轿颐巧厦娼樯艿淖痔宄ざ鹊ノ弧Ｎ壹虻ソ樯芨鞲霾问囊庖濉?
?牐牐?1）Font：字体字型文件，对于中文，最好只使用系统自带的四种字体，常用宋体。
?牐牐?2）Size：字体大小。通常我们用12Px大小的。
?牐牐?3）Style：字体的修饰，包括正常和斜体。
?牐牐?4）Line：字体的行间距，我们选用1.5ems是代表行距为字体大小的1.5倍。
?牐牐?5）Decoration：设置对象中文本的装饰，分别有下划线、上划线、删除线、闪烁。
?牐牐?6）Color：字体颜色。
#2?牐?2.背景属性（Background）
?牐牨尘暗氖粜酝ǔ０ū尘吧捅尘巴计谘奖碇蠧olor通常指的是前景的颜色，更多时候也就是字体的颜色，而Background是指背景的颜色。在这个对话框离我们可以精确设定背景图片的位置、是否重复显示、是否随页面内容滚动。
?牐牐?1）Repeat：设定背景是否重复以及可以沿着特定方向重复。
?牐牐?2）Attachment：设定背景图片可以固定或随着内容而自动滚动。
?牐牐?3）Horizontal/Vertical设定背景图片的偏移值。
#2?牐?3.文本块属性（Block）
?牐犖谋究槭粜灾饕嵌ㄒ宥温涞囊恍┦粜灾担枰⒁獾氖窃贒reamweaver样式面板里很多属性前面有“*”，这表示此属性只能在浏览器中看到效果，在Dreamweaver的编辑其中无法预览，如图（^46040702c^）所示。
?牐牐?1）Word Spacing：这是定义各个单词之间的额外间距，对中文格式无效。
?牐牐?2）Letter Spacing：定义每个字符之间的额外间距，对中文同样有效。
?牐牐?3）Vertical Alignment：垂直对齐方式。
?牐牐?4）Text Align：水平对齐方式。
?牐牐?5）Text Indent：这是段落首行缩进的距离，通常我们定义2ems，及两个中文字的距离。
?牐牐?6）Whitespace：设置或检索对象内空格的处理方式。
#2?牐?4.容器属性（Box）
?牐犝馐茄奖碜钗匾囊桓鍪粜岳啾穑鞘迪忠趁嬖鼐范ㄎ坏幕 ?
?牐牐?1）Width/Height：宽和高。实现容器概念的基础，只有定义了其中的一个值，才能使元素具有容器的空间。
?牐牐?2）Padding：填充距，决定了容器边框和容器内部的内容之间的距离。
?牐牐?3）Margin：边距，设置容器中的元素和周围的元素之间的距离。
?牐牐?4）Float：使元素悬浮在页面上，可以使周围的文字围绕在此元素周围，类似于图文混排的概念，但是在CSS中任何元素都可以像图片一样实现悬浮。
?牐牐?5）Clear：这个属性是配合上面的浮动属性，它可以决定浮动属性是否可以出现在指定的容器一边，例如设定Left表示浮动元素不可以出现在容器的左边。
#2?牐?5.边框属性（Border）
?牐牬耸粜允侨萜鞲拍钪械闹匾谌荩梢陨瓒ㄈ萜魉谋叩谋呖蚩矶仁怠⒀丈氨呖蜓剑缤迹╚46040702d^）所示。
?牐牐?1）Width：可以精确指定边框的数值，要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
?牐牐?2）Color：可以为每一个边框单独设定色彩。
?牐牐?3）Style：设定边框的外观样式，需要注意有些样式只有在IE5.5以上浏览器中才可以看到效果，如图（^46040702e^）所示。
#2?牐?6.列表属性（List）
?牐犃斜硎粜钥梢远苑旨读斜砟谌萁懈嗟目刂啤?
?牐牐?1）Type：设定列表显示的项目符号或编号的类型。
?牐牐?2）Bullet：可以为列表指定一个单独的图片作为标志，例如一个三角形的箭头。
?牐牐?3）Position：设定列表容器中的内容显示位置。
#2?牐?7.定位属性（Position）
?牐牰ㄎ皇粜允鞘迪志泛妥杂啥ㄎ坏墓丶粜裕松杓普吒蟮目刂埔趁嬖氐哪芰Γ一估┱沟搅巳膠轴方向，从而为动态页面的实现创造了基础，如图（^46040702f^）所示。
?牐牐?1）Type：定位属性的基本类型有相对定位和绝对定位，相对定位使元素倚赖页面元素的原始位置进行偏移，而绝对定位使元素脱离原始元素的束缚，实现自由偏移定位，绝对定位的元素与父级元素的位置无关。
?牐牐?2）Z-Index：当两个绝对定位的元素位置有相同的，则依赖此属性确定哪个元素遮挡另一个元素。
?牐牐?3）Placement：这里面的属性定义了容器的具体大小以及与已有的父级元素的距离。
?牐牐?4）Clip：设置对象的可视区域，所设定区域之外的内容将被剪切隐藏。必须将position的值设为absolute，此属性方可使用。
?牐牐?5）Visibility：决定元素的显示状态是可见还是不可见。
#2?牐?8.扩充属性
?牐犝飧龆曰翱蛑械氖粜允且恍┰銮啃缘难绞粜裕诘桶姹竞筒煌嘈偷匿榔髦С植缓谩?
?牐牐?1）Page Break：设定打印时页面分页的位置。
?牐牐?2）Cursor：用来设定鼠标通过对像位置时显示何种系统内置光标外形。
?牐牐?3）Filter：使用这里的设置可以将一些特定的滤镜和转换效果添加到一个容器中的元素上。