第四课 css区块属性

1、设置网页元素背景

背景色 background-color   

取值与color属性一样。

背景图 background-image  

取值：url('图片文件URL')

背景图重复 background-repeat

 repeat 默认。背景图像将在垂直方向和水平方向重复。   no-repeat 背景图像将仅显示一次。
 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。   

背景图定位 background-position

top left  左上角    top center 顶部居中    top right  右上角    center left
center center     center right     bottom left    bottom center    bottom right
坐标：x y  可以为负数    例如：background-position:30px 20px;

背景固定 background-attachment

scroll默认值。背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时，背景图像不会移动。

一句话设置所有背景属性 background

background: #00FF00 url(aa.gif) no-repeat fixed center center

2、给网页元素加边框

统一设置边框属性 border

border:粗细 线型 颜色        

统一设置4条边框的粗细、线型、颜色

线型取值：none 无边框、dotted 点状边框、dashed 虚线、solid 实线、double 定义双线  groove 3D 凹槽边框、ridge 3D 垄状边框、inset 3D inset 边框、outset outset 边框

单独设置一条边

border-left:粗细 线型 颜色  ---设置左边框的粗细、线型、颜色
border-right:粗细 线型 颜色  ---设置右边框的粗细、线型、颜色  
border-top:粗细 线型 颜色     ---设置顶边框的粗细、线型、颜色
border-bottom:粗细 线型 颜色  ---设置底边框的粗细、线型、颜色

单独设置一条边的线型

左边框样式：border-left-style             右边框样式：border-right-style
顶边框样式：border-top-style             底边框样式：border-bottom-style

单独设置一条边的粗细

左边框粗细：border-left-width            右边框粗细：border-right-width
顶边框粗细：border-top-width           底边框粗细：border-bottom-width

单独设置一条边的颜色

左边框颜色：border-left-color            右边框颜色：border-right-color
顶边框颜色：border-top-color            底边框颜色：border-bottom-color

3、设置内外边距

内边距：padding

统一设置四个内边距    padding:10px;     --上下左右内边距都为10像素

单独设置四个内边距分别用以下属性

padding-bottom   底内边距        padding-top    顶内边距
padding-left    左内边距             padding-right    右内边距

 例如：padding-top:20px; 设置顶内边距20

外边距：margin

取值：像素值,auto

统一设置四个外边距  margin:10px;   --上下左右外边距都为10像素

单独设置四个外边距分别用以下属性

margin-bottom   底外边距       margin-top    顶外边距
margin-left    左外边距            margin-right    右外边距

padding和margin的简写 

1px              四边相同
1px 2px          上下、左右
1px 2px 3px      上、左右、下
1px 2px 3px 4px  上、右、下、左 

4、轮廓