7_31_html_css样式

背景属性

Background-color    背景颜色

Background-image 背景图片

:url(image.gif)

Background-repeat 设置一个指定的图像如何被重复

:no-repeat 不平铺

:repeat 水平和垂直方向都平铺 默认值

:repeat-x 在x轴方向平铺 即水平方向

:repeat-y 在y轴方向平铺 即垂直方向

Background-position 设置背景图片的位置

:bottom 靠低居中

:top 靠顶居中

:center 水平垂直方向都居中

:left 靠左居中 垂直方向居中，水平方向 靠左对齐

:right 靠右居中 垂直方向居中，水平方向 靠右居中

:right top 两个一起可以设置成右上位置

 

方框属性

 

边框属性

Border-left-color 左边框颜色

Border-left-width 左边看宽度

Border-left-style 左边框类型

:dashed 矩形虚线

:dotted 圆点虚线

:solid 一条直线

:double 双实线

边框的top,bottom,left,right都有这三个属性；

Border-left 这个属性可以同时设置左边框颜 色，宽度，和边框类型；

有top,bottom,left,right

Etc:

 Border-left: red 20px dashed

Border-width 这个属性可以同时设置4个边框的 宽度；

Border-color 这个属性可以同时设置4个边框的 颜色；

Border-style 这个属性可以同时设置4个边框的 边框类型；

 

边界属性

Margin-top 上边界距离

Margin-left 左边界距离

Margin-right 右边界距离

Margin-button 下边界距离

这里需要注意的地方有两点：

1.对于任意一个元素使用margin属性，如果这个属性周围没有其他属性，那么margin的距离是相对于浏览器边框的；如果有其他元素，则是相对于周围最近的其他元素；

2.margin属性存在很大的浏览器兼容性问题，比如margin-right有时是无法被浏览器解释的；那么只有在周围有其他元素时，margin-right和margin-bottom属性才起作用；当两个不同的元素分别设置了margin-right和margin-bottom属性时，解释其中最大的距离，而不会是两者相加的距离；

 

伪类选择器

特殊样式（超链接）

A:link{color:red} 未被访问的链接，默认状态

A:visited 已被访问过得链接

A:hover 鼠标悬停时的样式

A:active 鼠标点击时的样式