CSS学习笔记（2）背景/边框/外延/填充

参考文献： 《HTML, CSS, JavaScript 整合详解》 王津涛 编著，机械工业出版社

1.     CSS背景属性，包括背景颜色、背景图片、背景图片重复等

背景属性	属性值	说明	CSS版本	兼容性
background	background-color background-image background-repeat background-attachment background-position	设置背景，复合属性	CSS1	IE 4 NS 6 F 1
background- attachment	scroll fixed	背景图片是否随网页内容滚动	CSS1	IE 4 NS 6 F 1
background- color	color transparent	背景颜色	CSS1	IE 4 NS 4 F 1
background- image	url none	背景图片	CSS1	IE 4 NS 6 F 1
background- position	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos	背景图片位置	CSS1	IE 4 NS 6 F 1
background- repeat	repeat no-repeat repeat-x repeat-y	图片是否重复或如何重复	CSS1	IE 4 NS 4 F 1

IE（Internet Explorer）；N（Netscape）；F（Firefox）

①     background属性，设置网页背景，复合属性，语法格式为：

选择器 { background : background-color |background-image | background-repeat | background-attachment |background-position }

如：

②     background- attachment属性，设置图片是否随网页内容滚动，语法格式为：

选择器 { background- attachment : scroll |fixed }

l  scroll 图片随网页内容滚动

l  fixed 图片在网页中固定不动

③     background- color属性，设置网页元素背景颜色，语法格式为：

选择器 { background- color: color | transparent}

l  color 值可以为颜色名（如<hrcolor=red>）、十六位进制的颜色值（如<hr color=#FF000）、RGB混合模式（如<hr color=rgb(255,0,0)）

l  transparent 设置背景颜色为透明，该属性默认

④     background- image属性，设置网页元素背景图片，语法格式为：

选择器 { background- image : none | url }

l  none 无背景图片

l  url 设置图片使用的绝对地址或相对地址

如： url(image/test.jpg)

⑤     background- position属性，设置网页元素背景图像的位置，语法格式为：

选择器 { background- position : top left |top center | top right | center left | center center | center right | bottomleft | bottom center | bottom right | x-% y-% | x-pos y-pos )

l  top left | topcenter | top right | center left | center center | center right | bottom left |bottom center | bottom right 用于设置图片相对位置

l  x-% y-% 用于设置百分比长度，x影响水平位置，y影响垂直位置，左上角坐标 (0%,0%) 右下角坐标 (100%,100%)，如果只指定了其中的一个值，另一个为50%

l  x-pos y-pos 用于设置浮点数长度值，x影响水平位置，第二个影响垂直位置，左上角坐标为 (0,0)，单位可以是像素或是其他CSS单位，如果只指定了一个值，另一个值默认为50%，%和位置名称可以混合使用

⑥     background- repeat属性，设置背景图片是否重复或如何重复，语法格式为：

选择器 { background- repeat : repeat |no-repeat | repeat-x | repeat-y )

l  repeat 横向纵向重复铺满

l  no-repeat 图片不重复

l  repeat-x 图片水平重复

l  repeat-y 图片垂直重复

2.     CSS边框属性，指定HTML元素边框宽度、样式、颜色

边框属性	属性值	说明	CSS版本	兼容性
border	border-width border-style border-color	边框属性，复合属性	CSS1	IE 4 NS 4 F 1
border-color	color	边框颜色	CSS1	IE 4 NS 6 F 1
border-style	style	边框样式	CSS1	IE 4 NS 6 F 1
border-width	thin medium thick length	边框宽度	CSS1	IE 4 NS 4 F 1
border-bottom	border-bottom-width border-style border-color	底边框，复合属性	CSS1	IE 4 NS 6 F 1
border-bottom- color	color	底边框颜色	CSS2	IE 4 NS 6 F 1
border-bottom- style	style	底边框样式	CSS2	IE 4 NS 6 F 1
border-bottom- width	thin medium thick length	底边框宽度	CSS1	IE 4 NS 4 F 1
border-left	border-left-width border-style border-color	左边框，复合属性	CSS1	IE 4 NS 6 F 1
border-left- color	color	左边框颜色	CSS2	IE 4 NS 6 F 1
border-left- style	style	左边框样式	CSS2	IE 4 NS 6 F 1
border-left- width	thin medium thick length	左边框宽度	CSS1	IE 4 NS 4 F 1
border-right	border-right-width border-style border-color	右边框，复合属性	CSS1	IE 4 NS 6 F 1
border-right- color	color	右边框颜色	CSS2	IE 4 NS 6 F 1
border-right- style	style	右边框样式	CSS2	IE 4 NS 6 F 1
border-right- width	thin medium thick length	右边框宽度	CSS1	IE 4 NS 4 F 1
border-top	border-top-width border-style border-color	上边框，复合属性	CSS1	IE 4 NS 6 F 1
border-top- color	color	上边框颜色	CSS2	IE 4 NS 6 F 1
border-top- style	style	上边框样式	CSS2	IE 4 NS 6 F 1
border-top- width	thin medium thick length	上边框宽度	CSS1	IE 4 NS 4 F 1

①     border 属性，设置边框对象的特性，包括边框宽度、颜色以及样式，语法格式：

选择器 { border : border-width | border-style| border-color )

②     border-top、border-bottom、border-left、border-right属性，分别设置上下左右边框，复合属性，包括边框宽度、颜色以及样式，语法格式：

选择器 { border-top : border-top-width | border-style| border-color )

选择器 { border-bottom : border-bottom-width| border-style | border-color )

选择器 { border-left : border-left-width | border-style| border-color )

选择器 { border-right : border-right-width| border-style | border-color )

③     border-color属性，设置边框颜色，语法格式：

选择器 { border-color : color )

值可以为颜色名（如<hr color=red>）或十六位进制的颜色值（如<hr color=#FF000）或RGB混合模式（如<hr color=rgb(255,0,0)），可以提供1~4个参数，顺序为上、右、下、左，没用提供参数的方向使用对应方向的参数

注：若border-width为0或border-style为none，以上属性将失去作用

④     border-top-color、border-bottom-color、border-left-color、border-right-color属性，分别设置上下左右边框的颜色，语法格式：

选择器 { border-top-color : color )

选择器 { border-bottom-color : color )

选择器 { border-left-color : color )

选择器 { border-right-color : color )

注：若border-width为0或border-style为none，以上属性将失去作用

⑤     border-style属性，设置边框样式，语法格式：

选择器 { border-style : style )

其中style的属性值如下：

l  none 无边框

l  hidden 隐藏边框，IE不支持

l  dotted 点线边框

l  dashed 虚线边框

l  solid 实线边框

l  double 双实线边框，两线宽度一样

l  groove 3D 凹槽边框，效果依赖于border-color的值

l  ridge 3D脊形边框，效果依赖于border-color的值

l  inset 3D凹下边框，效果依赖于border-color的值

l  outset 3D凸起边框，效果依赖于border-color的值

骗人的，下面的3D效果没用，难道是俺不会用 ~~

可以提供1~4个参数，顺序为上、右、下、左，没用提供参数的方向使用对应方向的参数

注：若border-width为0，以上属性将失去作用

⑥     border-top-style、border-bottom-style、border-left-style、border-right-style属性，分别设置上下左右边框的样式，语法格式：

选择器 { border-style : style )

选择器 { border-top-style : style )

选择器 { border-bottom-style : style )

选择器 { border-left-style : style )

选择器 { border-right-style : style )

注：若border-width为0，以上属性将失去作用

⑦     border- width属性，设置边框宽度，语法格式：

选择器 { border-width : medium | thin |thick | length )

l  medium 默认宽度

l  thin 小于默认宽度

l  thick 大于默认宽度

l  length 由浮点数设置宽度值，不可为负值

可以提供1~4个参数，顺序为上、右、下、左，没用提供参数的方向使用对应方向的参数

注：若border-style为none，以上属性将失去作用

⑧     border-top-width、border-bottom-width、border-left-width、border-right-width属性，分别设置整个边框和上下左右边框的样式，语法格式：

选择器 { border-width : medium | thin |thick | length )

选择器 { border-top-width : medium | thin |thick | length )

选择器 { border-bottom-width : medium |thin | thick | length )

选择器 { border-left-width : medium | thin| thick | length )

选择器 { border-right-width : medium | thin| thick | length )

注：若border-style为none，以上属性将失去作用

3.     CSS外边距属性，设置元素的外延边距

外边距属性	属性值	说明	CSS版本	兼容性
margin	length	设置四边外延边距	CSS1	IE4 NS4 F1
margin-bottom	auto length %	设置底部外延边距	CSS1	IE4 NS4 F1
margin-left	auto length %	设置左边外延边距	CSS1	IE4 NS4 F1
margin-right	auto length %	设置右边外延边距	CSS1	IE4 NS4 F1
margin-top	auto length %	设置顶端外延边距	CSS1	IE4 NS4 F1

①     margin可以有1~4个参数，顺序为上、右、下、左，没用提供参数的方向使用对应方向的参数，length可以是浮点数字值、百分比值和浏览器默认值，左右外延边距可以取负数

②     margin属性不可用于id和tr对象

4.     CSS内部填充属性，确定元素边框到内部内容间的距离

内部填充属性	属性值	说明	CSS版本	兼容性
padding	length	设置四边的填充边距	CSS1	IE4 NS4 F1
padding-bottom	length %	设置底部填充边距	CSS1	IE4 NS4 F1
padding-left	length %	设置左边填充边距	CSS1	IE4 NS4 F1
padding-right	length %	设置右边填充边距	CSS1	IE4 NS4 F1
padding-top	length %	设置顶端填充边距	CSS1	IE4 NS4 F1

       注：padding可以有1~4个参数，顺序为上、右、下、左，没用提供参数的方向使用对应方向的参数，length可以是浮点数字值、百分比值和浏览器默认值，不可取负数