资源描述
,HTML/CSS/JavaScript,标准,教程实例版（第,2,版）,第,章,15,本书编委会 编著,实例版,第,15,章,边框和边距,15.1,设计边框样式,border-style,15.2,调整边框宽度,border-width,15.3,设置边框颜色,border-color,15.4,设置边框属性,border,15.5,边距,margin-top/margin-bottom/margin-left/margin-right/margin,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,15.7,小实例,综合设置边框和边距,15.8,习题,HTML/CSS/JavaScript,标准教程实例版（第,2,版）,15.1,设计边框样式,border-style,基本语法,border-style:,样式取值,border-top-style:,样式取值,border-bottom-style:,样式取值,border-left-style:,样式取值,border-right-style:,样式取值,15.1,设计边框样式,border-style,语法说明,15.1,设计边框样式,border-style,语法说明,边框样式属性中,border-style,是一个复合属性，其他,4,个都是单个边框的样式属性，只能取一个值，而复合属性,border-style,可以同时取一到,4,个值。下面分别说明,border-style,属性的,4,个取值方法：,取一个值：四条边框均使用这一个值。,e:s,取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。,取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。,取,4,个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。,15.1,设计边框样式,border-style,实例代码,15.1,设计边框样式,border-style,接上页,15.1,设计边框样式,border-style,网页效果,15.1,设计边框样式,border-style,实例代码,15.1,设计边框样式,border-style,接上页,15.1,设计边框样式,border-style,网页效果,15.2,调整边框宽度,border-width,基本语法,border-width:,关键字,|,长度,border-top-width:,关键字,|,长度,border-bottom-width:,关键字,|,长度,border-right-width:,关键字,|,长度,border-left-width:,关键字,|,长度,15.2,调整边框宽度,border-width,语法说明,边框宽度属性基本语法中的关键字说明,长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可使用相对单位，如,px,、,pt,、,cm,等。,基本语法中边框宽度属性,border-width,是一个复合属性，可以同时设置四条边框的宽度。具体使用方法和边框样式的复合属性,border-style,是一样的，可以参照上一节关于,border-style,的讲解。,表,15-2,15.2,调整边框宽度,border-width,表,15-2,边框宽度属性中关键字说明,返回,15.2,调整边框宽度,border-width,实例代码,15.2,调整边框宽度,border-width,接上页,15.2,调整边框宽度,border-width,网页效果,15.3,设置边框颜色,border-color,基本语法,border-color:,颜色关键字,|RGB,值,border-top-color:,颜色关键字,|RGB,值,border-bottom-color:,颜色关键字,|RGB,值,border-left-color:,颜色关键字,|RGB,值,border-right-color:,颜色关键字,|RGB,值,15.3,设置边框颜色,border-color,语法说明,颜色关键字可使用常用的,16,个关键字,RGB,值使用十六进制的,RGB,值和,RGB,函数值都行。,在使用边框颜色复合属性,border-color,时，如果只设置,1,种颜色，则四条边框的颜色一样；设置,2,种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置,3,种颜色，边框的颜色顺序为上、左右、下；设置,4,中颜色，边框的颜色顺序为上、右、下、左。,表,15-3,15.3,设置边框颜色,border-color,表,15-3,常用的,16,个颜色关键字,返回,15.3,设置边框颜色,border-color,实例代码,15.3,设置边框颜色,border-color,接上页,15.3,设置边框颜色,border-color,网页效果,15.4,设置边框属性,border,基本语法,border:|,border-top:|,border-right:|,border-bottom:|,border-left:|,15.4,设置边框属性,border,语法说明,基本语法中每一个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时，每个属性间必须用空格隔开。,这五个属性语法中，只有,border,可以同时设置四条边框的属性。其他的只能设置单边框的属性。,15.4,设置边框属性,border,实例代码,15.4,设置边框属性,border,接上页,15.4,设置边框属性,border,网页效果,15.5,边距,margin-top/margin-bottom/margin-left/margin-right/margin,基本语法,margin-top:,长度,|,百分比,|auto,margin-bottom:,长度,|,百分比,|auto,margin-left:,长度,|,百分比,|auto,margin-left:,长度,|,百分比,|auto,margin:,长度,|,百分比,|auto,15.5,边距,margin-top/margin-bottom/margin-left/margin-right/margin,语法说明,长度包括长度值和长度单位，长度单位可以使用前面多次提到的绝对单位或相对单位。,百分比是相对于上级元素宽度的百分比，允许使用负数。,auto,为自动提取边距值，是默认值。,margin,复合属性和其他复合属性的设置方法是一样的，也可以取,1,到,4,个值来同时设置边框周围的四个边距。,15.5,边距,margin-top/margin-bottom/margin-left/margin-right/margin,实例代码,15.5,边距,margin-top/margin-bottom/margin-left/margin-right/margin,网页效果,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,基本语法,padding-top:,长度,|,百分比,padding-bottom:,长度,|,百分比,padding-left:,长度,|,百分比,padding-right:,长度,|,百分比,padding:,长度,|,百分比,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,语法说明,长度包括长度值和长度单位。,百分比是相对于上级元素宽度的百分比，不允许使用负数。,填充复合属性,padding,的取值方法，可以参照边框样式,border-style,的取值方法。,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,实例代码,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,接上页,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,网页效果,15.7,小实例,综合设置边框和边距,实例代码,15.7,小实例,综合设置边框和边距,接上页,15.7,小实例,综合设置边框和边距,网页效果,
展开阅读全文