aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/web/css/shorthand_properties/index.html
blob: 2e880da57e9824d6d069be5e6f651af5de7c01f6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
---
title: 特性簡寫
slug: Web/CSS/Shorthand_properties
translation_of: Web/CSS/Shorthand_properties
---
<h2 id="Definition" name="Definition">定義</h2>

<p><dfn>特性簡寫,是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。</dfn> 使用特性簡寫,網頁開發者可以寫出更簡潔、且通常更具可讀性的樣式表,省時又省力。</p>

<p>CSS 規範中定義,特性簡寫用來組合作用於相同主題的常見性質。舉例來說,CSS {{cssxref("background")}} 這個性質是個特性簡寫,可同時定義 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, 和 {{cssxref("background-position")}} 等屬性。同樣的,最常用的字體相關屬性,可以使用 {{cssxref("font")}} 來定義;圍繞在方塊周圍的邊界,則可簡單地以 {{cssxref("margin")}} 簡寫來定義。</p>

<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">需謹慎之處</h2>

<p>即便特性簡寫非常易於使用,仍有幾個需要銘記在心的情況:</p>

<ol>
 <li>未指明的值會被設為預設值。這聽起來真的很怪,但他的確會<strong>覆寫</strong>先前的設定值。比如:

  <pre class="brush: css">background-color: red;
background: url(images/bg.gif) no-repeat top right;</pre>
  不會將背景設為紅色,而是使用 {{cssxref("background-color")}} 的預設值 <code>transparent</code>,由於較後面的規則為優先。</li>
 <li>只有獨立的屬性可以被繼承。就如同遺失的值會被預設值取代一樣,不可能讓缺漏的值再去繼承個別屬性。關鍵字 <code>inherit</code> 可以用於屬性,但只能整體繼承,而不能用於個別值上。意思是,如果要繼承某個特定的值,就必須使用完整的語句,搭配 <code>inherit </code>關鍵字<code></code></li>
 <li>簡寫屬性試著不強迫使用特定順序,在那些屬性有許多不同類型的值的狀況下的確很方便。但是在許多屬性具有類似值時就沒這麼簡單了,此時會以以下規則處理:
  <ol>
   <li>關於區塊的簡寫性質,諸如 {{cssxref("border-style")}}, {{cssxref("margin")}}{{cssxref("padding")}},就會使用連貫的1~4個值來定義下列這些邊:
    <table>
     <tbody>
      <tr>
       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
       <td><em>單值語法:</em><code>border-width: 1em</code> — 這個唯一的值定義所有四邊</td>
      </tr>
      <tr>
       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
       <td><em>雙值語法:</em><code>border-width: 1em 2em</code> — 第一個值代表垂直部分,也就是上和下邊;第二個值則是指水平部分,也就是左右邊。</td>
      </tr>
      <tr>
       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
       <td><em>三值語法:</em><code>border-width: 1em 2em 3em</code> — 第一個值代表上邊,第二個值代表兩旁的邊,而第三個值代表下邊。</td>
      </tr>
      <tr>
       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
       <td>
        <p><em>四值語法:</em><code>border-width: 1em 2em 3em 4em</code> — 這四個值分別代表上、右、下、左邊,順時針的方向由上開始排列(可以以 trouble 來記憶,即英文首文字的縮寫 TRBL)</p>
       </td>
      </tr>
     </tbody>
    </table>
   </li>
   <li>與之相似地,關於區塊角落的屬性,像是 {{cssxref("border-radius")}},也會使用連貫的1~4個值來代表四個角落:
    <table>
     <tbody>
      <tr>
       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
       <td><em>單值語法:</em><code>border-radius: 1em</code> — 這唯一的值代表了所有角落。</td>
      </tr>
      <tr>
       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
       <td><em>雙值語法:</em><code>border-radius: 1em 2em</code> — 第一個值代表左上和右下,第二個值則是右上及左下角。</td>
      </tr>
      <tr>
       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
       <td><em>三值語法:</em><code>border-radius: 1em 2em 3em</code> — 第一個值代表左上,第二個值代表右上及左下,第三個值則是右下的角落。</td>
      </tr>
      <tr>
       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
       <td>
        <p><em>四值語法:</em><code>border-radius: 1em 2em 3em 4em</code> — 這四個值分別代表左上、右上、右下、左下,由左上開始的順時針排序。</p>
       </td>
      </tr>
     </tbody>
    </table>
   </li>
  </ol>
 </li>
</ol>

<h2 id="Background_Properties" name="Background_Properties">背景屬性</h2>

<p>背景會有下列這些屬性:</p>

<pre class="brush:css">background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>

<p>可以簡寫為一句宣告:</p>

<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>

<p>(寫成簡化屬性的效果,完全等同於上方未簡化的屬性,外加 <code>background-attachment: scroll</code> 及其他 CSS3 中額外增加的屬性。)</p>

<h2 id="Font_Properties" name="Font_Properties">字體屬性</h2>

<p>下列的宣告:</p>

<pre class="brush:css">font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;</pre>

<p>可以簡寫成這樣:</p>

<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>

<p>簡化定義的效果完全等同於未簡化前的屬性效果,加上 <code>font-variant: normal</code><code>font-size-adjust: none</code> (CSS2.0 / CSS3) 及 <code>font-stretch: normal</code> (CSS3) 等屬性。</p>

<h2 id="Border_Properties" name="Border_Properties">邊框屬性</h2>

<p>邊框的寬度、顏色、樣式可以簡寫成一句宣告。舉例來說:</p>

<pre class="brush:css">border-width: 1px;
border-style: solid;
border-color: #000;</pre>

<p>可以寫成:</p>

<pre class="brush:css">border: 1px solid #000;</pre>

<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">邊界與內距屬性</h2>

<p>margin 和 padding 的簡化版本大致相同。下列的 CSS 宣告:</p>

<pre class="brush:css">margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>

<p>等同於下面的宣告(注意值的排序是順時鐘的順序:上,右,下,左 (TRBL,可以「trouble」這個單字的諧音來記憶)</p>

<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>

<h2 id="See_also" name="See_also">相關連結</h2>

<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
 <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.</li>
</ul>