亚洲国产视频精品_欧美成人午夜免费影院手机在线看_a天堂中文字幕_中文亚色_日日噜噜噜噜人人爽亚洲精品_国产日韩精品一区二区三区春色

簡單的CSS優化


一、CSS代碼優化地方：

     1、border(CSS邊框)簡寫：
         border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;
        可以簡寫為：border:1px solid #000;

    2、padding（CSS padding）簡寫：
        padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
        可簡寫為：padding:1px 2px 3px 4px;
        padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
        可簡寫為：padding:1px;

    3、margin簡寫
        margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
        可簡寫為：margin:1px 2px 3px 4px;
        margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;
        可簡寫為：margin:1px;

    4、background簡寫
        background-color:#000;可以簡寫為background:#000;
        background-image:url(圖片地址)
        可簡寫為：background:url(圖片地址)

    5、font簡寫
        font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
        可簡寫為：font:12px/12px Arial, Helvetica, sans-serif;

 

二、CSS重用優化

        這里主要介紹是CSS代碼的共用屬性提取來達到節約代碼、維護方便，CSS實例如下：
        .yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
        .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
        他們都有相同高度、寬度、浮動、文字大小，而只有內容居左居右不同(你可能需要了解CSS居中)，我們就可以提取他們相同屬性優化后:
        .yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
        .yangshi_b{text-align:right; }
       

重慶網絡公司