CSS样式表---------第三章：样式属性

三、样式属性

1、背景与前景

background-color:#90; ------------背景色，样式表优先级高。

background-image:url(路径）--------------设置背景图片。

background-repeat:no-repeat;----------------no-repeat,不平铺；repeat,平铺；repeat-x,横向平铺；repeat-y,纵向平铺。

background-position:center;-----------------背景图居中，设置背景图位置时，repeat必须为"no-repeat"。

background-position:top;-------------------背景图放到右上角（方位可以自己更改）。

background-position:left 100px top 200px;-------------------离左边100像素，离上边200像素（可以设为负值）。

background-attachment:fixed;-----------------------------背景是固定的，不随字体滚动。

background-attachment:scroll;------------------------------背景随字体滚动。

2、字体

font-family:"新宋体"；------------------------------------字体。

font-size:12px;---------------------------------------字体大小。常用像素12px、14px、18px、还可以用"em","2.5em"即：默认字体的2.5倍，还可以用百分数。

font-weight:bold;--------------------------------------bold是加粗，normal是正常。

font-style:italic;-------------------------------------italic是倾斜，normal是正常。

color:#03C;-----------------------------------------颜色。

text-decoration:-------------------------------------underline:下划线，overline：上划线，line-through:删除线，none：去掉下划线。

text-align:-------------------------------------------center:水平居中对齐，left:左对齐，right:右对齐。

vertical-align:-----------------------------------middle：垂直居中对齐，top:顶部对齐，bottom:底部对齐。一般设置行高后使用。

text-indent:28px-------------------------------------首行缩进量。

line-height:24px------------------------------------行高。一般为1.5~2倍字体大小。

3、边界与边框

*注：四个边框的顺序按顺时针方向：上，右，下，左。

border(表格边框、样式等）、 margin（表外间距）、padding（内容与单元格间距）

（1）边框

/*边框设置*/
    border:5px solid blue;（四边框、5像素宽、实线、蓝色）相当于下面三行红的。
    border-width:5px;
    border-style:solid;
    border-color:blue;

    border-top:5px solid blue;
    border-bottom:5px solid blue;
    border-left:5px solid blue;
    border-right:5px solid blue;

（2）边距

    /*四边外边框之间的距离*/
    margin:10px;            ------四边外边框宽度为10像素。auto，居中。
    margin-top:10px;        ------上边外边框宽度为10像素；其他三边边框类似。
    margin:20px 0px 20px 0px;------上-右-下-左，四边外边框顺时针顺序。
    /*内容与边框之间的距离*/
    padding:10px;           --------内容与边框的四边间距为10像素。
    padding-top:10px;       --------内容与边框的上间距为10像素；其他三边间距类似。
    padding:20px 0 20px 0px;--------上-右-下-左，内容与边框的四边间距顺时针顺序。

4、列表与方块

width、height、（top、right、bottom、left)--------------------只有在绝对坐标情况下才能用。

list-style:none;----------取消序号。

list-style:circle;--------序号变为圆圈，样式相当于无序。

list-style-image:url(图片地址）；-----------图片做序号。

list-style-position:outside;--------------序号在内容外。

list-style-position:inside;-------------序号跟内容在一起。

5、格式与布局

    position:fixed; ------------------------锁定位置（相对于浏览器的位置），上浮不可排列。

    position:absolute;---------------------------绝对位置 1、外层没有position:absolute(或relative),那么div相对于浏览器定位 2、如果有，那么div相对于外层边框定位。

    position:relative;----------------------相对于默认位置的移动。   

 
    float:left; --------------------------------左浮动。

    float:right; ------------------------------右浮动   

    <div style="clear:both"></div> ----------------------截断流。

   
    overflow:hidden;  ---------------------------超出范围时隐藏; soroll,auto超出范围时出滚动条。
    
    display:none;   ------------------------------none,不显示;inline-block,显示为块，不自动换行，宽高可设;

    block------------------------------------------显示为块,自动换行;

    inline------------------------------------------效果同span标签,不自动换行,宽高不可设。

    visibility:hidden;  ----------------------------可视性。hidden,隐藏但是占空间;visible,显示。

    z-index:2;---------------------------------上浮到第二层，默认是第一层。

超链接变色：

a:hover
{
    color:red;
}

DIV居中

如何让一个DIV居中对齐？
第一步：设置外层的DIV的text-align:center;
第二步：设置里层的DIV的margin:auto
以上两个DIV都不要设置float.