1月21日 样式属性

一、背景与前景

(1)、背景

   background-color:#90;  /*背景色（以样式表为主，样工式表优先。）*/
    background-image:url(); /*设置背景图片（默认为平铺。）*/
    background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺
    repeat-x 橫向平铺  repeat-y 纵向平铺 */
     
    background-position:center; /*背景图片居中 right top背景图片放到右上角*/
    background-position:left 100px top 100px;/*离左边100px，离上边100px(可以为负傎)*/
    background-attachment:fixed/scroll; /*fixed背景是固定的，不随字体滚动。scoll随字体滚动*/

（2）、字体

    font-family:"新宋体";
    font-size:12px;
    font-weight:bold;
    font-style:italic;  /*italic倾斜 normal是正常*/
    color:#0FC;
    text-decoration:underline;   /*去掉下划线 overline 上划线  line-through删除 none 去掉下划线*/
    text-align:center;
    vertical-align:middle;  /*一行内垂直居中*/
    text-height:28px;  /*首行缩进量*/
    line-height:24px;   /*行高*/

二、边界和边框

（1）、边框 

    /*边框设置*/
    border:5px solid blue;
    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;
    margin-top:10px;
    margin:20px 0px 20px 0px;
    /*内容与边框之间的距离*/
    padding:10px;
    padding-top:10px;
    padding:20px 0 20px 0px;

三、列表与方块

    width、height、(top、bottom、left、right) 只有在绝对坐标情况下才有用
    list-style:none;   /*取消序号*/
    list-style:circle;  /*序号变为圆圈，样式相当于无序*/
    list-style-image:url();  /*图片做序*/
    list-style-position:outside;/*序号在内容外*/
    list-style-position:inside; /*序号跟内容在一起*/

四、格式与布局

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,显示。*/

 

小技巧：

（1）、超链接变色：

a:hover
{
    color:red;
}

(2)、DIV居中

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