DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 簡化CSS中屬性的示例
簡化CSS中屬性的示例
編輯:CSS詳解     

在工作中編寫CSS代碼時,經常會出現冗余的代碼,特別是用“可見即可得”工具來編寫,為了提高代碼的質量及文件壓縮到最小,使代碼具有可讀性,我們不得不把CSS代碼簡化。

下面用一些比較常用的屬性來做示例:

  1. margin
    margin-top:1px;
    margin-right:1px;
    margin-bottom:1px;
    margin-left:1px;
    代碼簡化為:margin:1px
    margin-top:1px;
    margin-right:2px;
    margin-bottom:1px;
    margin-left:2px;
    代碼簡化為:margin:1px 2px
    margin-top:1px;
    margin-right:2px;
    margin-bottom:3px;
    margin-left:2px;
    代碼簡化為:margin:1px 2px 3px
    margin-top:1px;
    margin-right:2px;
    margin-bottom:3px;
    margin-left:4px;
    代碼簡化為:margin:1px 2px 3px 4px
    當屬性值是0的時候單位可以不寫如:0px 直接就寫成0
  2. padding
    padding的書寫方法和margin一樣,在此就不多敘述
  3. border
    border-width:1px;
    border-style:solid;
    border-color:#000000;
    代碼簡化為:border:1px solid #000
  4. background
    background-color:#CCFFFF;
    background-image:url(圖片路徑);
    background-repeat:repeat-x;
    background-position:5px 4px;
    代碼簡化為:background:#CFF url(圖片路徑)  repeat-x 5px 4px
  5. font
    font-size:26px;
    font-weight:bold;
    font-family: “宋體”;
    代碼簡化為:font:26px bold “宋體”
  6. color屬性值
    color:#000000;
    color:#ff0000;
    代碼簡化為:color:#000, color:#f00
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved