path: root/files/zh-tw/learn/css/howto/css_faq/index.html

---
title: CSS 一般問題
slug: Learn/CSS/Howto/CSS_FAQ
tags:
  - CSS
  - 待審閱技術
  - 待審閱文字
  - 所有類別
translation_of: Learn/CSS/Howto/CSS_FAQ
original_slug: Web/CSS/Common_CSS_Questions
---
<p>
</p>
<h4 id=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4" name=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4"> 我的 CSS 合乎規格，但繪出的版面有誤 </h4>
<p>如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。
</p><p>新近瀏覽器都有兩種佈局模式：
</p>
<ul><li> <i>Quirks 模式</i>：也稱為相容模式，讓舊網頁能依照以前舊瀏覽器的方式顯現。
</li><li> <i>標準模式</i>：瀏覽器將依循 W3C 規範決定網頁的顯示方式。
</li></ul>
<p>以 Gecko 為核心的瀏覽器都有第三種<i><a href="zh_tw/Gecko_%e8%bf%91%e4%b9%8e%e6%a8%99%e6%ba%96%e6%a8%a1%e5%bc%8f">近乎標準</a></i>模式，其中只有一些些不合規範的地方。
</p><p>如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。
</p><p>以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
</pre>
<h4 id="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5" name="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5"> <code>id</code> 與 <code>class</code> 之間的差別 </h4>
<p>HTML 元素都可有 <code>id</code> 及 <code>class</code> 屬性。<code>id</code> 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；<code>class</code> 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 <code>class</code> 屬性值相同。) CSS 可以讓你以 <code>id</code> 或 <code>class</code> 來決定某元素的樣式。
</p><p>如果你想指定某特定單一元素的樣式，則應使用 <code>id</code>。
</p>
<hr>
<p>若有很多個元素皆有相同樣式，則可使用 <code>class</code>。
</p><p>這方面的資訊亦可參考 <a href="zh_tw/CSS/Getting_Started/Selectors">CSS 選取符</a>。
</p>
<hr>
<h4 id=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC" name=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC"> 恢復某特性的預設值 </h4>
<p>CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 <i>default</i> 的關鍵字。
</p><p>所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 <code>p</code> 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。
</p><p>此外，由於 CSS 具<i>串聯</i>特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。
</p>
<h4 id=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F" name=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F"> 相依樣式 </h4>
<p>CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer 所寫、關於 CSS 工作小組的說明</a>。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。
</p>
<h4 id=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5" name=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5"> 套用多重類別 </h4>
<p>你可以在 HTML 元素的 <code>class</code> 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。
</p>
<pre>&lt;style type="text/css"&gt;
.firstclass { background: black; color: white; }
.secondclass { font-weight: bold; }
&lt;/style&gt;

&lt;div class="firstclass secondclass"&gt;
... content ...
... content ...
... content ...
&lt;/div&gt;
</pre>
<p>若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。
</p>
<h4 id=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F" name=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F"> 無用樣式 </h4>
<p>即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。
</p><p>以下是導致樣式被略過的常見情形：
</p>
<ul><li> HTML 元素層次問題
</li><li> 樣式規則重新定義
</li><li> 特性的簡寫法
</li><li> 使用 <code>*</code> 選取符
</li><li> CSS 明確性
</li></ul>
<p>你可以使用 <a href="zh_tw/DOM_%e8%a7%80%e5%af%9f%e5%99%a8">DOM 觀察器</a> 的 <i>CSS Style Rules</i> 來檢查上述問題。
</p><p><b>HTML 元素層次問題</b>
</p><p>此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。
</p>
<pre>#section { font-weight: bold; }
.redtext { font-weight: normal; color: red; }

&lt;div id="section"&gt;
   粗體、
   &lt;span class="redtext"&gt;正常紅字、&lt;/span&gt;
   又見粗體
&lt;/div&gt;
</pre>
<p>如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。
</p><p><b>樣式規則重新定義</b>
</p><p>在 CSS 樣式表中，先後次序<b>非常</b>重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。
</p>
<pre>#section { font-weight: bold; }
.redtext { color: red; }
/* 其他規則 */
/* 其他規則 */
/* 其他規則 */
.redtext { color: green; }

&lt;div id="section"&gt;
粗體、
&lt;span class="redtext"&gt;正常紅字？&lt;/span&gt;
又見粗體
&lt;/div&gt;
</pre>
<p>為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。
</p><p><br>
<b>特性的簡寫法</b>
</p><p>使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。
</p>
<pre>#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
.redtext { font: 14px Arial; color: red; }

&lt;div id="section"&gt;
   採用 Verdana 粗體的 12px 字樣；
   &lt;span class="redtext"&gt;採用 Arial 正常字體的 14px 紅字；&lt;/span&gt;
   還是採用 Verdana 粗體的 12px 字樣。
&lt;/div&gt;
</pre>
<p>前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序<b>真的</b>很重要。
</p>
<pre>#section {
   font-weight: bold;
   font: 12px Verdana;  /* 有了這行，font-weight 又回到預設的 normal 了 */
}
</pre>
<p><br>
<b>使用 <code>*</code> 選取符</b>
</p><p><code>*</code> 選取符表示任何元素皆符合，但使用上應多加小心。
</p>
<pre>body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }

&lt;div id="section"&gt;
   正常、
   &lt;span class="boldtext"&gt;
      &lt;span class="redtext"&gt;正常紅字、&lt;/span&gt;
   &lt;/span&gt;
   又見正常。
&lt;/div&gt;
</pre>
<p>在此例中，選取符為 <code>body *</code> 的規則會套用到所有 <code>body</code> 內的元素，也包括 <i>redtext</i>，所以原先套用到 <i>boldtext</i> 的 <code>font-weight: bold;</code> 就被覆蓋為 <code>font-weight: normal;</code> 了。
</p><p><br>
<b>CSS 明確性</b>
</p><p>如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 <code>style</code> 屬性中）優先權最高，其次是以 <code>id</code> 做選取符的規則，再其次是以 <code>class</code> 套用的類別，最後則是單純以元素名稱當選取符的規則。
</p>
<pre>div { color: black; }
#orange { color: orange; }
.green { color: green; }

&lt;div id="orange" class="green" style="color: red;"&gt;是紅的！&lt;/div&gt;
</pre>
<p>如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 規格書的 6.4.3 一節</a>。
</p>
<h4 id="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F" name="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F"> -moz-* 特性是什麼玩意？ </h4>
<p>請見 <a href="zh_tw/Mozilla_%e6%93%b4%e5%85%85%e7%9a%84_CSS">Mozilla 擴充的 CSS</a>。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS" } ) }}