《商务网页第20课课件》由会员分享，可在线阅读，更多相关《商务网页第20课课件（14页珍藏版）》请在金锄头文库上搜索。
1、4.7用CSS设置元素的边框与边距l设置元素的边框和边距是非常重要的显示技巧，巧妙地设置元素边框和边距的宽度、颜色，可以制作出非常美观的显示效果。4.7.1元素的边框与边距l容器类元素都有边框和边距，边距又分为外边距和内边距，边框与边距均有上、下、左、右4条边。一个容器的边框与边距（边距、边框足够宽）如图4.34所示。l在CSS中，外边距的属性是margin，内边距的属性是padding，边框的属性是border。运用不同的内边距、边框和外边距方案，能够组合出丰富多彩的显示效果。l边框与边距的相关属性赋值顺序都是从上端开始，按照顺时针方向，即“上、右、下、左”的次序分别赋值。l如果没有设置边框
2、和边距，会采用系统默认值。系统默认边框为“0px”，即没有边框，默认的边距为“0px”，即没有边距。l4.7.2设置元素边框与边距l设置容器类元素的边框，需要使用容器类元素标签，及其边框属性border（或者使用边框线宽border-width属性、边框颜色border-color属性、边框类型border-style属性）。设置方法为容器类标签border=线宽属性值边框颜色属性值边框类型属性值;或者为容器类标签border-width=线宽属性值;border-color=边框颜色属性值;border-style=边框类型属性值;其中，边框类型属性值与表格边框类型的属性值的概念是相同的。l
3、采用border属性设置边框，只适用于4条边的属性值都相同的情况，写法简洁；而采用border-width、border-color、border-style属性设置边框，更适用于4条边的属性值存在差异的情况。1设置边框类型l边框类型有实线、虚线、双线等，是设置边框效果的重要方面，只有精通边框类型设置，才能做出漂亮的边框效果。每个元素都有上下左右4条边框，可以统一设置或分别设置。（1）设置边框类型（2）统一设置边框的宽度、颜色和边框类型统一设置边框divborder:12px#006600double;统一设置边框4条边（3）分别设置边框的宽度、颜色和边框类型l如果想把边框4条边设置成不同的宽
4、度、颜色或边框类型，必须使用border-width、border-color、border-style属性分别设置，其赋值顺序是上、右、下、左。l这3个属性赋值比较灵活，可以对其赋1个数值，也可以赋2个数值、3个数值、4个数值，分别代表不同的赋值含义。l如果仅赋1个值，代表4条边均采用这个数值；如果赋2个值，按照上、右的顺序取值，即上边取第1个数值，右边取第2个数值。下边、左边没有赋值，取对边的值；如果赋3个值，按照上、右、下的顺序取值，左边没有赋值，取对边的值；如果赋4个值，则按照上、右、下、左的顺序取值。分别设置边框的宽度、颜色和边框类型的示例分别设置边框divheight:100px;
5、width:300px;border-width:5px9px12px16px;border-color:#0099FF#CC0099#000000#006600;border-style:soliddotteddasheddouble;分别设置4条边框的宽度、颜色和边框类型l也可以使用padding-top、padding-right、padding-bottom、padding-left属性分别设置。l如果padding只设置1个数值，代表4个内边距都采用该数值；如果padding设置2个或3个数值，按照上、右、下、左的顺序依次取值，未被赋值的边距采用对边的值；如果设置了4个数值，则按照上
6、、右、下、左的顺序依次取值。以文本段落为例，使用CSS设置段落内边距CSS设置内边距示例pborder:5px#FF00CCdouble;font:20px宋体;color:#FFFF00;background-color:#006666;padding:20px200px20px50px;元素有两个边距：外边距和内边距。外边距是指本元素边框距离外部元素边框之间的距离，内边距是指本元素边框到内部元素边框之间的距离。内边距和外边距都是为了控制页面的松紧程度而提供的属性。3设置外边距l设置外边距主要是设置元素之间的距离，控制页面元素紧凑显示还是松散显示。也可以同边框、内边距组合，美化元素的显示效果
7、。l在CSS中设置外边距，需要使用容器类元素标签及其外边距margin属性，设置方法为容器类标签margin:上外边距右外边距下外边距左外边距;或者使用margin-top、margin-right、margin-bottom、margin-left属性分别设置。l设置外边距与设置内边距的实现方式是相同的，可以对margin赋1个值、2个值、3个值或4个值，取值方式同设置内边距。4.7.3制作文字按钮综合范例l网页中的超链接如果不做美化处理，就像普通的文本一样非常单调（见图4.39）。如果采用边框与边距技术加以处理，就会出现按钮形状的显示效果（见图4.40）。l按钮状的超链接非常美观，普通超链
8、接则显得呆板。l那么如何实现按钮状超链接呢？主要是利用好外边距、边框、内边距的显示效果，配合鼠标指针经过与悬停时的显示对比效果来实现的。按钮超链接a/*以下是统一设置超链接的初始样式*/margin:2px;font-family:宋体;font-size:16px;text-align:center;vertical-align:middle;a:link,a:visited/*设置超链接未访问、访问后的显示状态*/padding:4px10px4px10px;background-color:#CCCCCC;text-decoration:none;color:#0000FF;border
9、-top:1pxsolid#EEEEEE;/*利用边框颜色搭配实现阴影效果*/border-left:1pxsolid#EEEEEE;border-bottom:1pxsolid#333333;border-right:1pxsolid#333333;lla:hover/*设置鼠标指针经过时的超链接状态*/lcolor:#CC00CC;/*改变文字颜色*/lpadding:6px8px2px12px;/*利用内边距改变文字显示位置*/lbackground-color:#CCC;/*改变背景色*/lborder-top:1pxsolid#333333;/*以下是利用边框l实现“按下去”的效果*/lborder-left:1pxsolid#333333;lborder-bottom:1pxsolid#EEEEEE;lborder-right:1pxsolid#EEEEEE;lllll首页l产品l方案l网点l联系我们ll
