商务网页第20课.pptVIP

4.7 用CSS设置元素的边框与边距 设置元素的边框和边距是非常重要的显示技巧，巧妙地设置元素边框和边距的宽度、颜色，可以制作出非常美观的显示效果。 4.7.1 元素的边框与边距 容器类元素都有边框和边距，边距又分为外边距和内边距，边框与边距均有上、下、左、右4条边。一个容器的边框与边距（边距、边框足够宽）如图4.34所示。 在CSS中，外边距的属性是margin，内边距的属性是padding，边框的属性是border。运用不同的内边距、边框和外边距方案，能够组合出丰富多彩的显示效果。 边框与边距的相关属性赋值顺序都是从上端开始，按照顺时针方向，即“上、右、下、左”的次序分别赋值。 如果没有设置边框和边距，会采用系统默认值。系统默认边框为“0px”，即没有边框，默认的边距为“0px”，即没有边距。 4.7.2 设置元素边框与边距 设置容器类元素的边框，需要使用容器类元素标签，及其边框属性border（或者使用边框线宽border-width属性、边框颜色border-color属性、边框类型border-style属性）。设置方法为 容器类标签｛ border=线宽属性值 边框颜色属性值 边框类型属性值;｝ 或者为 容器类标签｛ border-width=线宽属性值; border-color=边框颜色属性值; border-style=边框类型属性值; ｝ 其中，边框类型属性值与表格边框类型的属性值的概念是相同的。 采用border属性设置边框，只适用于4条边的属性值都相同的情况，写法简洁；而采用border-width、border-color、border-style属性设置边框，更适用于4条边的属性值存在差异的情况。 1．设置边框类型 边框类型有实线、虚线、双线等，是设置边框效果的重要方面，只有精通边框类型设置，才能做出漂亮的边框效果。每个元素都有上下左右4条边框，可以统一设置或分别设置。 （1）设置边框类型 （2）统一设置边框的宽度、颜色和边框类型 html head title统一设置边框/title style type=text/css div{ border:12px #006600 double; } /style /head body div统一设置边框4条边/div /body /html （3）分别设置边框的宽度、颜色和边框类型 如果想把边框4条边设置成不同的宽度、颜色或边框类型，必须使用border-width、border-color、border-style属性分别设置，其赋值顺序是上、右、下、左。 这3个属性赋值比较灵活，可以对其赋1个数值，也可以赋2个数值、3个数值、4个数值，分别代表不同的赋值含义。 如果仅赋1个值，代表4条边均采用这个数值；如果赋2个值，按照上、右的顺序取值，即上边取第1个数值，右边取第2个数值。下边、左边没有赋值，取对边的值；如果赋3个值，按照上、右、下的顺序取值，左边没有赋值，取对边的值；如果赋4个值，则按照上、右、下、左的顺序取值。 分别设置边框的宽度、颜色和边框类型的示例 html head title分别设置边框/title style type=text/css div{ height:100px; width:300px; border-width:5px 9px 12px 16px; border-color: #0099FF #CC0099 #000000 #006600 ; border-style: solid dotted dashed double; } /style /head body div分别设置4条边框的宽度、颜色和边框类型/div /body /html 也可以使用padding-top、padding-right、padding-bottom、padding-left属性分别设置。 如果padding只设置1个数值，代表4个内边距都采用该数值；如果padding设置2个或3个数值，按照上、右、下、左的顺序依次取值，未被赋值的边距采用对边的值；如果设置了4个数值，则按照上、右、下、左的顺序依次取值。 以文本段落为例，使用CSS设置段落内边距 html head titleCSS设置内边距示例/title style type=text/css p{ border: 5px #FF00CC double; font: 20px 宋体;