Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS設計規範[6]-CSS簡寫(shorthand)

CSS簡寫能夠大大的縮小檔案的size,所以在寫樣式定義的時候,遇到可以簡寫的屬性,一律都用簡寫。

底下是有簡寫和沒簡寫的差別。
說明有無簡寫的差別

以下是簡寫的範例:

  1. : 10px 9px 8px 7px;
    : 10px 9px 8px 7px;

    順序是:-top | -right | -bottom | -left。
    padding的順序也跟margin相同。
     
  2. : italic small-caps bold 12px/20px Verdana;
    順序是:-style | -variant | -weight | -size | line-height | -family
    -size和font-family需同時存在才能寫簡寫。
     
  3. background: #fff url(bg.gif) no-repeat fixed left top;
    順序是:background- | background-image | background-repeat | background-attachment | background-position。
    background比較特殊的地方是沒有規定特定的特性質,可以只設定其中一個,而忽略其他的特性。但是如果沒有設,就會變成預設值,所以要設定background的時候要注意,可能因為預設值而不小心覆蓋掉其他的設定。
     
  4. border: 1px solid #000;
    順序是:border-width | border-style | border-
    這樣的書寫就把四個邊都統一成一種寫法,如果上、右、下、左需要不同的樣式的話就再另外書寫成border-top | border-right | border-bottom | border-left。
     
  5. list-style: disc url(bg.gif) outside;
    list和background一樣,不一定要把全部屬性書寫出來,這邊的url也跟background一樣都是不加引號的,如果有需要用到背景圖的時候要注意。
     
  6. outline: 1px dotted #fff;
    outline的簡寫是跟border一樣的,但是因為並非所有瀏覽器都有支援,所以使用並不多,最常使用的情況是在沒有reset的頁面,設定outline: 0;,這是為了消掉Firefox的連結點了周圍會出現的虛線框。
     
  7. : #000;
    顏色的簡寫很簡單,將原本6碼的顏色代碼兩兩一組,如果三組裡面的代碼都兩兩彼此相同,便可縮寫成3碼的簡寫。如#336699可以寫成#369,#ddeeff可以寫成#def,但是如果其中一組沒有兩兩彼此相同,那就得維持6碼的寫法。 如#334599只能維持6碼的寫法,這是沒辦法簡寫的,所以顏色的縮寫只有6碼和3碼這兩種而已。
     
  8. : 0;
    CSS的單位值有pt、px、em、cm、ex…很多種,但是當數值是0的時候,這些單位值就應該要省略,因為單位對0來說是沒有意義的。

 

另外簡寫有幾點需要特別注意的:

  1. margin、padding的值可以是1~4個,順序為:上、右、下、左(順時針的順序)
    如:margin: 10px 5px;這是指margin-top、margin-bottom是10px,margin-right、margin-left是5px。margin: 10px 5px 3px;這是指margin-top是10px,margin-right、margin-left是5px,margin-bottom是3px,以下為簡單的示意圖:
    說明margin與padding的簡寫順序為上右下左
     
  2. font的簡寫一定要有font-size和font-family。
     
  3. 單行置中的方式有一項為:將高、行高設成一樣,我們會特別把這兩個屬性放一起,如果底下有font屬性就要特別再寫一次line-height屬性,不然行高會變為預設值而無法達成置中。
     
  4. background的簡寫可以不全部寫出來,可以只寫顏色或是只加入背景圖,但是其他沒有寫到的,就會變成是預設值,所以背景原本要繼承上面屬性的,在這裡需要特別注意,會不會被預設值蓋過去。
     
  5. 上述屬性值沒宣告會被預設值蓋掉的問題,可以將屬性值明確設定為inherit,而避免誤採用到預設值,不過就要留意那些屬性可以支援inherit繼承。
     
  6. border屬性的順序並沒有那麼重要,三個可以任意排列,不過我們的順序都是寫成:border: 1px solid #ff0000;。
    說明border屬性的順序可以任意排列

 

Leave a Reply

*