CSS 縮寫屬性筆記

1. 需要遵守順序的縮寫屬性

(1) font

正確順序：font: [style] [variant] [weight] [size]/[line-height] [family]

✅ 正確範例

p {
    font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

❌ 錯誤範例

p {
    font: "Arial", sans-serif bold italic small-caps 16px/1.5;
}
注意：font-size 是必要的，且必須出現在 font-family 之前。font-family 一定要放在最後，否則無法解析。

(2) background

正確順序：background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip]

✅ 正確範例

div {
    background: #f00 url("bg.jpg") no-repeat center/cover fixed;
}

❌ 錯誤範例

div {
    background: center/cover #f00 fixed url("bg.jpg") no-repeat;
}
注意：background-position 和 background-size 之間必須用 / 分隔。background-color 不能放在 background-size 之後。

(3) border

正確順序：border: [width] [style] [color]

✅ 正確範例

div {
    border: 2px solid red;
}

❌ 錯誤範例

div {
    border: solid red 2px;
}
注意：border-style 必須出現在 border-width 之後，否則可能會無效。

2. 不一定要遵守順序的縮寫屬性

(1) list-style

✅ 正確範例

ul {
    list-style: circle inside;
}
ul {
    list-style: inside circle;
}

❌ 錯誤範例

ul {
    list-style: inside 10px; /* 無效 */
}

(2) flex

✅ 正確範例

div {
    flex: 1 0 50%;
}
div {
    flex: 1 50%;
}

結論