帖子管理老师 发表于 2014-10-15 17:25:47

常用的css规则书写





/*---------------------------------------其他的写法---------------------------------------------*/
.qita{
        letter-spacing:20px;/*字符间距   */
        text-indent:20px; /*段落缩进*/
        text-align:center;/*文字居中right/left居右、居左*/
        text-decoration:underline;/*下划线 overline上划线 linethrough删除线*/
        display:inline;/*转化为内联元素或者是快状block*/
        border-top:; border-right:; border-bottom:; border-left:; border-width:;/*宽度*/ border-style:; /*边框样式*/ border-color:;/*颜色*/

}

/*   */
/*---------------------------------------字体的写法---------------------------------------------*/
#div{

        font-style:italic;/*这里指的是字体的倾斜*/
        font-weight:bold;   /*这里指的是字体的加粗*/
        font-size:23px;      /*这里指的是字体的大小*/
        line-height:40px;    /*这里指的是行高大小*/
        font-family:Simsum/SimHei;

        /*黑体、微软雅黑等都是 无撑线 字体,即可写为sans-serif
        '微软雅黑','黑体',sans-serif      */
        /*正文、宋体等都是 有撑线 字体,即可写为serif*/
        /*那么上面的就可以写为*/
        font:italic bold 23px/40px '微软雅黑','黑体',sans-serif;
        font:12px/37px SimSun,serif;                     
}


/*-----------------------------------------背景的写法-------------------------------------------*/

#div{
        background-color:red;   /*这里指的是背景的颜色*/
        background-image:url(   small.jpg);/*这里指的是背景的图片(这里写上图片的地址)*/
        background-repeat:repeat-x; /*这里指的是背景沿着x轴重复*/
        background-repeat:repeat-y; /*这里指的是背景沿着y轴重复*/
        background-repeat:no-repeat;/*这里指的是背景不重复*/
        background-attachment:fixed;/*这里指的是设置或者是检索背景图像是随着内容滚动还是固定的*/
        background-position:center top;   /*这里指的是背景先水平居中在竖直上顶部*/
        background-position:right center;/*这里指的是背景先水平居右在竖直居中*/
        background-position:center center;/*这里指的是背景先水平居中在竖直上居中*/
        background-position:center center;/*这里指的是背景先水平居中在竖直上居中*/
        background-position:-150px -280px;/*这里指的是背景先向左 150px 在向上280px */

        /*那么上面的背景一般就可以写为*/

        background:gray url(small.jpg) no-repeat 150px 53px;
        background:url(small.jpg) no-repeat;
    /* 那么背景的表述方法常用可以考虑上面的2种,当然还有及其他的 */

}

/*-----------------------------------------border的用法-------------------------------------------*/

.four{
        border:1px solid blue;    /*这里指的是border的像素 实心 颜色 */
}

/*-----------------------------------------margin的用法-------------------------------------------*/
.four{
        margin:0px auto;      /*值得是居中*/
}

/*-----------------------------------------float的用法-------------------------------------------*/
.four{
        float:left;
}

页: [1]
查看完整版本: 常用的css规则书写