CSS样式总结

1. 背景:背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性

1. Background-color:背景颜色
2. Background-image:用于设置背景图片。注意:如果同时设置背景颜色(background-color)和背景图片(background-image),背景颜色会被背景图片覆盖。该属性需要用URL()含数指定图片地址,图片的地址既可以是相对的也可以是绝对的。
3. Background-repeat:用于设置对象的背景图片是否平铺(重复显示).在指定该属性之前,必须先指定背景图片(background-image)。

该属性有    repeat(纵横同时重复),

no-repeat(不重复),

repeat-x(x轴方向重复),

repeat-y(y轴方向重复)4个值

1. Background-position:用于控制图片的位置。Background-position有5个关键值分别是:top、left、botton、right、center。可以通过任意两个关键字组合来定位。也可以通过百分比来定位。例如:background-position:50% 50%。第一个百分比对应横坐标,第二个百分比对应纵坐标。
2. Background-attachment:设置背景图片是随对象内容滚动还是固定。在指定该属性之前,必须先指定背景图片。该属性两个值:scroll(默认) fixed(固定)。
3. Background:这是一个复合属性,可以同时设置背景颜色,背景图片,背景重复,背景位置等。

例: <style type="text/css">

#divone {

         width: 800px;

         height: 600px;

         border: 3px solid #900;

         margin:20px auto;

         background-image:url(image/flower.gif),

                            url(image/haha.png), url(image/backgroundimage.jpg);

         background-repeat:repeat-y, repeat-x, repeat;

         background-position:center top, left center, left top;

}

#divtwo {

         width: 800px;

         height: 600px;

         border: 3px solid #900;

         margin:20px auto;

         background-image:url(image/backgroundimage.jpg);

         background-attachment:fixed;

}

1. 边框属性

1. 边框3个相关属性

宽度(border-width):可以使用thin,medium,thick等文本值,也可以使用除了百分比和负数之外的任何绝对值。

1. 样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双线边框),groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D入边框),outset(3D凸出边框)等文本值。
2. 颜色(background-color):可以使用任何颜色值,包括RGB，HSL，十六进制颜色值和相关的关键字。
3. CSS3提供的圆角边框:border-radius:该属性用于指定圆角边框的圆角半径。

Border-top-left-radius:该属性用于指定左上角的圆角半径。

Border-top-right-radius:该属性用于指定右上角的圆角半径。

Border-bottom-left-radius:该属性用于指定左下角的圆角半径。

Border-bottom-right-radius:该属性用于指定右下角的圆角半径。

1. box-shadow:是一个复合属性，box-shadow属性为盒模型添加阴影。它包含有以下5个属性值。

hOffset:该属性值控制阴影在水平方向的偏移。

vOffset:该属性值控制阴影在垂直方向的偏移。

blurLength:该属性值控制阴影的模糊程度。

ScaleLength:该属性值控制阴影的缩放程度。

Color:该属性值控制阴影的颜色。

{box-shadow:10px}

3.定位(position):CSS布局的核心是position属性,对元素应用这个属性,可以相对它在常规文档流中的位置重新定位。

1. position属性有4个值:static(默认),relative,absolute,fixed。
2. static:静态定位的情况下,每个元素都处在常规文档流中,它们都是块级元素,所以就会在页面上自上而下的堆叠起来。
3. relative相对定位中的相对是指和它原来的文档流中的位置(或者默认位置)。可以用top,right,bottom,left属性值来改变它的位置。多数情况下我们用top和left就可以实现效果。
4. absolute:绝对定位和前面3种定位完全不一样。因为绝对定位会把元素彻底从文档流中拿出来。然后再相对于其他元素定位。
5. fixed:从完全移除文档流的角度来说,固定定位和绝对定位类似。