来谈谈：CSS使用基本教程(6) 区块性子

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
<P>本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用
　　本章先容的是区块性子的ＣＳＳ指令和它们的使用与特征，能够设定与把持区块的地位，巨细及边沿宽度等性子。本章也将分红两个部分为您先容，第一部分要讲的是区块各部分称号与观点的先容，关于区块有一点观点后，第二部分才再进进区块性子的ＣＳＳ指令的先容。



区　块　各　部　份　名　称　与　概　念
　　实在我们还能够把所谓的「区块」细分红的几个部分。
由外而内为您作先容：
MARGIN：边沿，固然是通透的部分，可是能够藉由边沿宽度的调剂来到达内容元素地位调剂的目标。
BORDER：边框，就是外框的部分，经过ＣＳＳ指令您能够把持边框的宽度、色彩和款式，不再古板！
PADDING：补白，也就是内容元素与框架之间的这段间隔与空间，也能够使用ＣＳＳ指令往把持巨细。
元素：内容元素，也就是您安排于该区块内的内容，或为笔墨，或为图形，或为一切别的元素。
　　附带一提的是，所谓的区块宽度是指全部包括边沿在内的宽度，而元素宽度指的只是内容元素的宽度。有了这些对区块各部分的基础观点与熟悉以后，接上去就要来先容把持区块各部分分离的的ＣＳＳ指令了！



区　块　性　质　的　Ｃ　Ｓ　Ｓ　指　令

margin-top　　　设定上边沿宽度margin-right　设定右侧缘宽度
margin-bottom　设定下边沿宽度margin-left　　设定右边缘宽度
支　持：ＩＥ３、ＩＥ４、ＮＣ４
适　用：区块元素
大概值：<length>长度单元，请参考第一章基础单元的相干申明
<percentage>百分比，相对元素宽度巨细
auto利用扫瞄器预设值
预设值：0
承继性：无
一样平常典范：DIV{margin-top:20pt}
同轴典范：<DIVstyle="margin-top:20pt">

margin　综合设定边沿宽度
支　持：ＩＥ３、ＩＥ４、ＮＣ４
适　用：区块元素
大概值：依序设定top,right,bottom,left的边沿宽度<length>{1,4}长度单元，请参考第一章基础单元的相干申明
<percentage>{1,4}百分比，相对元素宽度巨细
auto{1,4}利用扫瞄器预设值
预设值：无
承继性：无
一样平常典范：DIV{margin:20pt15pt10pt5pt}
同轴典范：<DIVstyle="margin:20pt15pt10pt5pt">
　　要附带申明的是，假如指定了四个正当设定值，则会依序套用于四个边沿；假如只有指定一个正当设订值，则会一致套用于四个边持；若只要指定二或三个正当设定值，则未指定的边沿会套用对边的宽度设定值。
DIV{margin:20pt}→top=20pt;right=20pt;bottom=20pt;left=20pt
DIV{margin:20pt15pt}→top=20pt;right=15pt;bottom=20pt;left=15pt
DIV{margin:20pt15pt10pt}→top=20pt;right=15pt;bottom=10pt;left=15pt

border-top-width　　设定上边框宽度border-right-width　设定右侧框宽度
border-bottom-width设定下边框宽度border-left-width　　设定右边框宽度
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：thin<medium<thickthin一致的相对单元，因扫瞄器而异
medium一致的相对单元，因扫瞄器而异
thick一致的相对单元，因扫瞄器而异
<length>长度单元，请参考第一章基础单元的相干申明
预设值：medium
承继性：无
一样平常典范：DIV{border-top-width:2pt}
同轴典范：<DIVstyle="border-top-width:2pt">

border-width　综合设定边框宽度
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：依序设定top,right,bottom,left的边框宽度thin{1,4}一致的相对单元，因扫瞄器而异
medium{1,4}一致的相对单元，因扫瞄器而异
thick{1,4}一致的相对单元，因扫瞄器而异
<length>{1,4}长度单元，请参考第一章基础单元的相干申明
预设值：无
承继性：无
一样平常典范：DIV{border-width:4pt3pt2pt1pt}
同轴典范：<DIVstyle="border-width:4pt3pt2pt1pt">
　　要附带申明的是，假如指定了四个正当设定值，则会依序套用于四个边框；假如只有指定一个正当设订值，则会一致套用于四个边框；若只要指定二或三个正当设定值，则未指定的边框会套用对边的宽度设定值。
DIV{border-width:2pt}→top=2pt;right=2pt;bottom=2pt;left=2pt
DIV{border-width:2pt3pt}→top=2pt;right=3pt;bottom=2pt;left=3pt
DIV{border-width:2pt3pt4pt}→top=2pt;right=3pt;bottom=4pt;left=3pt

border-top-color　　设定上边框色彩border-right-color　设定右侧框色彩
border-bottom-color设定下边框色彩border-left-color　设定右边框色彩
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：<color>设定色彩，请参考第一章色彩利用的相干申明
预设值：color性子之值
承继性：无
一样平常典范：DIV{border-top-color:BLUE}
同轴典范：<DIVstyle="border-top-color:BLUE">

border-color　综合设定边框色彩
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：依序设定top,right,bottom,left的边框色彩<color>{1,4}设定色彩，请参考第一章色彩利用的相干申明
预设值：无
承继性：无
一样平常典范：DIV{border-color:REDGREENBLUEYELLOW}
同轴典范：<DIVstyle="border-color:REDGREENBLUEYELLOW">
　　要附带申明的是，假如指定了四个正当设定值，则会依序套用于四个边框；假如只有指定一个正当设订值，则会一致套用于四个边框；若只要指定二或三个正当设定值，则未指定的边框会套用对边的色彩设定值；若无指定此一性子，则套用color性子之设定值。
DIV{border-color:RED}→top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:REDGREEN}→top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color:REDGREENBLUE}→top=RED;right=GREEN;bottom=BLUE;left=GREEN

border-top-style　　设定上边框款式border-right-style　设定右侧框款式
border-bottom-style　设定下边框款式border-left-style　　设定右边框款式
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：none不显现边框
dotted虚线（ＩＥ４、ＮＣ４扫瞄器看成实线）
dashed短直线（ＩＥ４、ＮＣ４扫瞄器看成实线）
solid实线
double双直线
ridge３Ｄ凸线
groove３Ｄ凹线
outset３Ｄ隆起（ＩＥ４不显现）
inset３Ｄ嵌进（ＩＥ４不显现）
预设值：none
承继性：无
一样平常典范：DIV{border-top-style:inset}
同轴典范：<DIVstyle="border-top-style:inset">

border-style　综合设定边框款式
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：依序设定top,right,bottom,left的边框款式none{1,4}不显现边框
dotted{1,4}虚线（ＩＥ４、ＮＣ４扫瞄器看成实线）
dashed{1,4}短直线（ＩＥ４、ＮＣ４扫瞄器看成实线）
solid{1,4}实线
double{1,4}双直线
ridge{1,4}３Ｄ凸线
groove{1,4}３Ｄ凹线
outset{1,4}３Ｄ隆起（ＩＥ４不显现）
inset{1,4}３Ｄ嵌进（ＩＥ４不显现）
预设值：无
承继性：无
一样平常典范：DIV{border-style:ridgegrooveoutsetinset}
同轴典范：<DIVstyle="border-style:ridgegrooveoutsetinset">
　　要附带申明的是，假如指定了四个正当设定值，则会依序套用于四个边框；假如只有指定一个正当设订值，则会一致套用于四个边框；若只要指定二或三个正当设定值，则未指定的边框会套用对边的款式设定值。
DIV{border-width:outset}→top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outsetinset}→top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outsetinsetridge}→top=outset;right=inset;bottom=ridge;left=inset

border-top　　综合设定上边框性子border-right　综合设定右侧框性子
border-bottom　综合设定下边框性子border-left　　综合设定右边框性子
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：<border-width>设定该边框宽度，请参考下面的先容与申明
<border-style>设定该边框款式，请参考下面的先容与申明
<border-color>设定该边框色彩，请参考下面的先容与申明
预设值：无
承继性：无
一样平常典范：DIV{border-top:2ptsolidBLUE}
同轴典范：<DIVstyle="border-top:2ptsolidBLUE">

border　综合设定边框性子
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：<border-width>设定边框宽度，请参考下面的先容与申明
<border-style>设定边框款式，请参考下面的先容与申明
<border-color>设定边框色彩，请参考下面的先容与申明
预设值：无
承继性：无
一样平常典范：DIV{border:2ptsolidBLUE}
同轴典范：<DIVstyle="border:2ptsolidBLUE">
　　要附带申明的是，这个指令只能指定一组设定值，也就是说，上右下左四个边框都将套用统一组的设定值，而不克不及作一般边框的设定值变更。
padding-top　　　设定上方补白宽度padding-right　设定右方补白宽度
padding-bottom　设定下方补白宽度padding-left　　设定左方补白宽度
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：<length>长度单元，请参考第一章基础单元的相干申明
<percentage>百分比，相对元素宽度巨细
预设值：0
承继性：无
一样平常典范：DIV{padding-top:5pt}
同轴典范：<DIVstyle="padding-top:5pt">

padding　综合设定补白宽度
支　持：ＩＥ４、ＮＣ４
适　用：区块元素
大概值：依序设定top,right,bottom,left的补白宽度<length>{1,4}长度单元，请参考第一章基础单元的相干申明
<percentage>{1,4}百分比，相对元素宽度巨细
预设值：无
承继性：无
一样平常典范：DIV{padding:2pt5pt2pt5pt}
同轴典范：<DIVstyle="padding:2pt5pt2pt5pt">
　　要附带申明的是，假如指定了四个正当设定值，则会依序套用于四个补白；假如只要指定一个正当设订值，则会一致套用于四个补白；若只要指定二或三个正当设定值，则未指定的补白会套用对边的宽度设定值。
DIV{padding:1pt}→top=1pt;right=1pt;bottom=1pt;left=1pt
DIV{padding:1pt2pt}→top=1pt;right=2pt;bottom=1pt;left=2pt
DIV{padding:1pt2pt3pt}→top=1pt;right=2pt;bottom=3pt;left=2pt



如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。