【网页设计-最新经典技术文档】网页排版CSS教学(六).doc

网页排版CSS教学（六）第六章 区块性质的本章的主要作用 本章介绍的是区块性质的指令以及它 们的应用与特性，可以设定与控制区块的位置，大小及边缘宽度等性质。本章也将分成 两个部份为您介绍，第一部份要讲的是区块各部份名称与概念的介绍，对于区块有一点概念后，第二部份才再进入区块性质的指令的介绍。区块各部份名称与概念 其实我们还可以把所谓的区块细分成如 下面图形所表示的几个部份。 由外而内为您作介绍：MARGIN： 边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。BORDER： 边框，就是外框的部份，经由指令您可以控制边框的宽度、颜色和样式，不再死板！PADDING： 补白，也就是内容元素与框架之间的这段距离与空间，也可以利用指令去控制大小。元素： 内容元素，也就是您放置于该区块内的内容，或为文字，或为图形，或为所有其它元素。 附带一提的是，所谓的区块宽度是指整个包含边缘在内的宽度，而元素宽度指的只 是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后，接下来就要来介绍控制区块各部份分别的的指令了！区块性质的指令 margin-top设定上边缘宽度 margin-right设定右边缘宽度 margin-bottom设定下边缘宽度 margin-left设定左边缘宽度 支持：、适用：区块元素可能值： 长度单位，请参考第一章基本单位的相关说明 百分比，相对于元素宽度大小 auto 使用浏览器预设值 预设值：0继承性：无一般范例：DIV margin-top : 20pt 同轴范例：margin综合设定边缘宽度 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的边缘宽度 1,4 长度单位，请参考第一章基本单位的相关说明 1,4 百分比，相对于元素宽度大小 auto 1,4 使用浏览器预设值 预设值：无继承性：无一般范例：DIV margin : 20pt 15pt 10pt 5pt 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边缘；如果只 有指定一个合法设订值，则会统一套用于四个边持；若只有指定二或三个合法设定值，则未指定的边缘会套用对边的宽度设定值。 DIV margin: 20pt top=20pt;right=20pt;bottom=20pt;left=20pt DIV margin: 20pt 15pt top=20pt;right=15pt;bottom=20pt;left=15pt DIV margin: 20pt 15pt 10pt top=20pt;right=15pt;bottom=10pt;left=15pt border-top-width设定上边框宽度 border-right-width设定右边框宽度 border-bottom-width设定下边框宽度 border-left-width设定左边框宽度 支持：、适用：区块元素可能值：thin medium thick thin 统一的绝对单位，因浏览器而异 medium 统一的绝对单位，因浏览器而异 thick 统一的绝对单位，因浏览器而异 长度单位，请参考第一章基本单位的相关说明 预设值：medium继承性：无一般范例：DIV border-top-width : 2pt 同轴范例：border-width综合设定边框宽度 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的边框宽度 thin 1,4 统一的绝对单位，因浏览器而异 medium 1,4 统一的绝对单位，因浏览器而异 thick 1,4 统一的绝对单位，因浏览器而异 1,4 长度单位，请参考第一章基本单位的相关说明 预设值：无继承性：无一般范例：DIV border-width : 4pt 3pt 2pt 1pt 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的宽度设定值。 DIV border-width: 2pt top=2pt;right=2pt;bottom=2pt;left=2pt DIV border-width: 2pt 3pt top=2pt;right=3pt;bottom=2pt;left=3pt DIV border-width: 2pt 3pt 4pt top=2pt;right=3pt;bottom=4pt;left=3pt border-top-color设定上边框颜色 border-right-color设定右边框颜色 border-bottom-color 设定下边框颜色 border-left-color设定左边框颜色 支持：、适用：区块元素可能值： 设定颜色，请参考第一章颜色使用的相关说明 预设值：color性质之值继承性：无一般范例：DIV border-top-color : BLUE 同轴范例：border-color综合设定边框颜色 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的边框颜色 1,4 设定颜色，请参考第一章颜色使用的相关说明 预设值：无继承性：无一般范例：DIV border-color : RED GREEN BLUE YELLOW 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的颜色设定值；若无指定此一性质，则套用color性质之设定值。 DIVborder-color:RED top=RED;right=RED;bottom=RED;left=RED DIVborder-color:RED GREEN top=RED;right=GREEN;bottom=RED;left=GREEN DIVborder-color: RED GREEN BLUE 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 同轴范例：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 : ridge groove outset inset 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的样式设定值。 DIVborder-width:outset top=outset;right=outset;bottom=outset;left=outset DIVborder-width:outset inset top=outset;right=inset;bottom=outset;left=inset DIVborder-width:outset inset ridge top=outset;right=inset;bottom=ridge;left=inset border-top 综合设定上边框性质 border-right综合设定右边框性质 border-bottom综合设定下边框性质 border-left综合设定左边框性质 支持：、适用：区块元素可能值： 设定该边框宽度，请参考上面的介绍与说明 设定该边框样式，请参考上面的介绍与说明 设定该边框颜色，请参考上面的介绍与说明 预设值：无继承性：无一般范例：DIV border-top : 2pt solid BLUE 同轴范例：border综合设定边框性质 支持：、适用：区块元素可能值： 设定边框宽度，请参考上面的介绍与说明 设定边框样式，请参考上面的介绍与说明 设定边框颜色，请参考上面的介绍与说明 预设值：无继承性：无一般范例：DIV border : 2pt solid BLUE 同轴范例：要附带说明的是，这个指令只能指定一组设定值，也就是说，上右下左四个边框都将套用同一组的设定值，而不能作个别边框的设定值变化。padding-top设定上方补白宽度 padding-right设定右方补白宽度 padding-bottom设定下方补白宽度 padding-left设定左方补白宽度 支持：、适用：区块元素可能值： 长度单位，请参考第一章基本单位的相关说明 百分比，相对于元素宽度大小 预设值：0继承性：无一般范例：DIV padding-top : 5pt 同轴范例：padding综合设定补白宽度 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的补白宽度 1,4 长度单位，请参考第一章基本单位的相关说明 1,4 百分比，相对于元素宽度大小 预设值：无继承性：无一般范例：DIV padding : 2pt 5pt 2pt 5pt 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个补白；如果只有指定一个合法设订值，则会统一套用于