速記屬性

簡寫屬性是 CSS 屬性，可以同時設定多個其他 CSS 屬性的值。使用簡寫屬性，可以編寫更簡潔（通常更易讀）的樣式表，從而節省時間和精力。

CSS 規範定義了簡寫屬性，用於對作用於同一主題的常見屬性進行分組定義。例如，CSS background 屬性是一個簡寫屬性，它可以定義 background-color、background-image、background-repeat 和 background-position 的值。類似地，可以使用簡寫 font 定義最常見的字型相關屬性，可以使用 margin 簡寫定義盒子周圍的不同邊距。

棘手的邊緣情況

使用簡寫屬性時，需要注意一些邊緣情況。

省略屬性

未指定的值將設定為其初始值。這意味著它將覆蓋先前設定的值。例如

css
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

這不會將背景顏色設定為red，而是設定為background-color 的預設值，即transparent。

只有單個屬性值可以繼承。由於缺失的值會被其初始值替換，因此無法透過省略它們來允許繼承單個屬性。inherit 關鍵字可以應用於屬性，但只能作為整體應用，而不是作為某個值或另一個值的關鍵字。這意味著，要使某個特定值繼承，唯一的方法是使用帶有 inherit 關鍵字的長屬性。

對屬性進行排序

簡寫屬性試圖不對其替換的屬性的值強加特定的順序。當這些屬性使用不同型別的 value 時，這很好用，因為順序並不重要，但在多個屬性可以具有相同 value 時，這就不太好用了。

這裡有兩個重要的例子

盒子的邊緣

處理與盒子邊緣相關的屬性的簡寫，如 border-style、margin 或 padding，始終使用一致的 1 到 4 值語法來表示這些邊緣

  • 1 值語法： border-width: 1em — 單個值表示所有邊緣：使用一個值語法的盒子邊緣
  • 2 值語法： border-width: 1em 2em — 第一個值表示垂直邊緣，即頂部和底部邊緣，第二個值表示水平邊緣，即左側和右側邊緣：使用兩個值語法的盒子邊緣
  • 三值語法： border-width: 1em 2em 3em — 第一個值代表頂部邊框，第二個值代表水平邊框（即左右邊框），第三個值代表底部邊框：使用三值語法的盒子邊框
  • 四值語法： border-width: 1em 2em 3em 4em — 四個值分別代表頂部、右側、底部和左側邊框，始終按此順序，即從頂部開始順時針：使用四值語法的盒子邊框 頂部-右側-底部-左側的首字母與單詞“trouble”中子音的順序相匹配：TRBL。你也可以把它記住為時針旋轉的順序：1em 從 12 點鐘位置開始，然後 2em 在 3 點鐘位置，然後 3em 在 6 點鐘位置，最後 4em 在 9 點鐘位置。

盒子的角

類似地，處理與盒子角相關的屬性的簡寫，例如 border-radius，始終使用一致的 1 到 4 值語法來表示這些角。

  • 一值語法： border-radius: 1em — 單個值表示所有角：使用一值語法的盒子角
  • 二值語法： border-radius: 1em 2em — 第一個值代表左上角和右下角，第二個值代表右上角和左下角：使用二值語法的盒子角
  • 三值語法： border-radius: 1em 2em 3em — 第一個值代表左上角，第二個值代表右上角和左下角，第三個值代表右下角：使用三值語法的盒子角
  • 四值語法： border-radius: 1em 2em 3em 4em — 四個值分別代表左上角、右上角、右下角和左下角，始終按此順序，即從左上角開始順時針：使用四值語法的盒子角

背景屬性

考慮以下屬性的背景

css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

這四個宣告可以縮寫為一個

css
background: #000 url(images/bg.gif) no-repeat left top;

（簡寫形式實際上等同於上面的長寫屬性加上 background-attachment: scroll，並且在 CSS3 中還包含一些額外的屬性。）

有關更多詳細資訊，包括 CSS3 屬性，請參閱 background。

字型屬性

考慮以下宣告

css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

這 5 個語句可以縮寫為以下語句

css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;

此簡寫宣告實際上等同於上面的長寫宣告加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。

邊框屬性

對於邊框，寬度、顏色和樣式可以簡化為一個宣告。例如，考慮以下 CSS

css
border-width: 1px;
border-style: solid;
border-color: #000;

它可以簡化為

css
border: 1px solid #000;

邊距和填充屬性

邊距和填充值的簡寫版本的工作原理類似；margin 屬性允許使用一個、兩個、三個或四個值來指定簡寫值。考慮以下 CSS 宣告

css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

它們與使用四個值簡寫形式的以下宣告相同。請注意，這些值的順序是順時針的，從頂部開始：頂部、右側、底部、左側（TRBL，“trouble”中的子音）。

css
margin: 10px 5px 10px 5px;

一個、兩個、三個和四個值宣告的邊距簡寫規則如下

  • 當指定一個值時，它將應用相同的邊距到所有四個邊。
  • 當指定兩個值時，第一個邊距應用於頂部和底部，第二個邊距應用於左側和右側。
  • 當指定三個值時，第一個邊距應用於頂部，第二個邊距應用於左側和右側，第三個邊距應用於底部。
  • 當指定四個值時，邊距將按順序應用於頂部、右側、底部和左側（順時針）。

定位屬性

對於位置，頂部、右側、底部和左側的簡寫版本可以簡化為一個宣告。例如，考慮以下 CSS

css
top: 0;
right: 20px;
bottom: 0;
left: 20px;

它可以簡化為

css
inset: 0 20px 0 20px;

與邊距和填充類似，內邊距值的順序是順時針的 - 頂部、右側、底部、左側（TRBL）。

通用速記屬性

CSS 提供了一個通用的簡寫屬性，all，它將它的值應用於文件中的所有屬性。它的目的是更改屬性的繼承模型。

有關繼承在 CSS 中的工作方式的更多資訊，請參閱 級聯和繼承 或 介紹 CSS 級聯。

速記屬性

另請參閱