舊文件

此處文件僅供參考，請自行考量時效性與適用程度，其他庫藏文件請參考文件頁面；
我們亟需您的協助，進行共筆系統搬移、及文件整理工作，詳情請查閱參與我們。

「CSS 一般問題」修訂間的差異

出自 MozTW Wiki

小 （→‎My CSS is valid, but not correctly rendered）
小
 
(未顯示由 5 位使用者於中間所作的 17 次修訂)
行 1： 行 1：
−
這份文件舉出使用 CSS 時經常會碰上的狀況，並予以解答。本文編譯自 [http://developer.mozilla.org/en/docs/Common_CSS_Questions Common CSS Questions]，在 devmo 有正體中文版時可能會移過去。
+
{{MDC|CSS%20一般問題}}
−
 
+
這份文件舉出使用 CSS 時經常會碰上的狀況，並予以解答。
−
編修開始 --[[用戶:BobChao|BobChao]] 16:17 2005年九月29日 (CST)
 
  
 
=== 我的 CSS 合乎規格，但繪出的版面有誤 ===
 
=== 我的 CSS 合乎規格，但繪出的版面有誤 ===
行 31： 行 30：
 
</pre>
 
</pre>
  
−
=== Difference between <code>id</code> and <code>class</code> ===
+
=== <code>id</code> 與 <code>class</code> 之間的差別 ===
 +
 
 +
HTML 元素都可有 <code>id</code> 及 <code>class</code> 屬性。<code>id</code> 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；<code>class</code> 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 <code>class</code> 屬性值相同。) CSS 可以讓你以 <code>id</code> 或 <code>class</code> 來決定某元素的樣式。
 +
 
 +
如果你想指定某特定單一元素的樣式，則應使用 <code>id</code>。
  
−
HTML elements can have an <code>id</code> and/or a <code>class</code> attribute. The <code>id</code> attribute allows a name to be given to a certain element, and there must be only one element with that name. The <code>class</code> attribute allows an element to be assigned to a certain class, and in general there could be more than one element with the same <code>class</code> attribute. CSS allows styles to be applied to particular <code>id</code> and/or <code>class</code>.
+
----
  
−
Use an <code>id</code>-specific style when you want to restrict the style rules  to one specific block or element. This style will be used by '''only one''' element.
+
若有很多個元素皆有相同樣式，則可使用 <code>class</code>。
  
−
Use a <code>class</code>-specific style when you want to share the style rules  across a certain class of blocks and elements.
+
這方面的資訊亦可參考 [http://developer.mozilla.org/en/docs/CSS:Getting_Started:Selectors| CSS 選取符]。
  
−
See [[CSS:Getting_Started:Selectors| CSS selectors]]
+
----
  
−
=== Restore the default property value ===
+
=== 恢復某特性的預設值 ===
  
−
CSS2 does not have a way to specify the default value of a CSS property. The only way to restore the default value is to explicitly re-declare that property with the default value (you have to know it, because CSS does not provide any ''default'' keyword).
+
CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 ''default'' 的關鍵字。
  
−
Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as <code>p</code>) that you may want to override with more specific rules (such as those using ID or class selectors), because the original default value cannot be automatically restored.
+
所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 <code>p</code> 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。
  
−
Because of the ''cascading'' nature of CSS, it is good practice to define style rules as specifically as possible, in order to style only what you want to be styled.
+
此外，由於 CSS 具''串聯''特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。
  
−
=== Derived styles ===
+
=== 相依樣式 ===
  
−
CSS does not allow one style to be defined in terms of another. (See [http://archivist.incutio.com/viewlist/css-discuss/2685 Eric Meyer's note about the Working Group's stance)]. However, assigning multiple classes to a single element can provide the same effect.
+
CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 [http://archivist.incutio.com/viewlist/css-discuss/2685 Eric Meyer 所寫、關於 CSS 工作小組的說明]。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。
  
−
=== Assigning multiple classes ===
+
=== 套用多重類別 ===
  
−
HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to seperate them.
+
你可以在 HTML 元素的 <code>class</code> 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。
  
 
<pre>
 
<pre>
行 70： 行 73：
 
</pre>
 
</pre>
  
−
If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.
+
若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。
  
−
=== Style rules that don't work ===
+
=== 無用樣式 ===
  
−
Correctly defined style rules can be ignored. Usually, this is the correct behaviour, according to syntax and priority rules.
+
即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。
  
−
These are the most frequent causes of style rules being ignored:
+
以下是導致樣式被略過的常見情形：
−
* HTML elements hierarchy
+
* HTML 元素層次問題
−
* Explicitly re-defined style rule
+
* 樣式規則重新定義
−
* Use of a shorthand property
+
* 特性的簡寫法
−
* Use of the <code>*</code> selector
+
* 使用 <code>*</code> 選取符
−
* Specificity in CSS
+
* CSS 明確性
  
−
You can use [[DOM Inspector]]'s ''CSS Style Rules'' view to debug problems of this kind.
+
你可以使用 [http://developer.mozilla.org/en/docs/DOM_Inspector DOM Inspector] 的 ''CSS Style Rules'' 來檢查上述問題。
  
−
'''HTML elements hierarchy'''
+
'''HTML 元素層次問題'''
  
−
The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendant overrides the style of the parent, in spite of any specificity or priority of CSS rules.
+
此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。
  
 
<pre>
 
<pre>
行 94： 行 97：
  
 
<div id="section">
 
<div id="section">
−
   This is bold,
+
   粗體、
−
   <span class="redtext"> this is normal and red,</span>
+
   <span class="redtext">正常紅字、</span>
−
   and bold again
+
   又見粗體
 
</div>
 
</div>
 
</pre>
 
</pre>
  
−
In case of complex HTML hierarchies, if a rule seems to be ignored, check if the  element is inside another element with a different style.
+
如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。
  
−
'''Explicitly re-defined style rule'''
+
'''樣式規則重新定義'''
  
−
In CSS stylesheets, order '''is''' important. If you define a rule and then you re-define the same rule, the last definition is used.
+
在 CSS 樣式表中，先後次序'''非常'''重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。
  
 
<pre>
 
<pre>
 
#section { font-weight: bold; }
 
#section { font-weight: bold; }
 
.redtext { color: red; }
 
.redtext { color: red; }
−
/* other rules            */
+
/* 其他規則 */
−
/* other rules            */
+
/* 其他規則 */
−
/* other rules            */
+
/* 其他規則 */
−
.redtext { font-weight: normal; }
+
.redtext { color: green; }
  
 
<div id="section">
 
<div id="section">
−
  This is bold,
+
粗體、
−
  <span class="redtext"> this is normal and red,</span>
+
<span class="redtext">正常紅字？</span>
−
  and bold again
+
又見粗體
−
</div>
+
</div>  
 
</pre>
 
</pre>
  
−
To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.
+
為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。
  
  
−
'''Use of a shorthand property'''
+
'''特性的簡寫法'''
  
−
Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.
+
使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。
  
 
<pre>
 
<pre>
行 133： 行 136：
  
 
<div id="section">
 
<div id="section">
−
   This is bold 12px Verdana,
+
   採用 Verdana 粗體的 12px 字樣；
−
   <span class="redtext">this is normal 14px Arial and red,</span>
+
   <span class="redtext">採用 Arial 正常字體的 14px 紅字；</span>
−
   and bold 12px Verdana again
+
   還是採用 Verdana 粗體的 12px 字樣。
 
</div>
 
</div>
 
</pre>
 
</pre>
  
−
In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order '''is''' important.
+
前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序'''真的'''很重要。
  
 
<pre>
 
<pre>
 
#section {
 
#section {
 
   font-weight: bold;
 
   font-weight: bold;
−
   font: 12px Verdana;  /* font-weight is now normal */
+
   font: 12px Verdana;  /* 有了這行，font-weight 又回到預設的 normal 了 */
 
}
 
}
 
</pre>
 
</pre>
  
  
−
'''Use of the <code>*</code> selector'''
+
'''使用 <code>*</code> 選取符'''
  
−
The <code>*</code> selector referd to any element, and it has to be used with particular care.
+
<code>*</code> 選取符表示任何元素皆符合，但使用上應多加小心。
  
 
<pre>
 
<pre>
行 160： 行 163：
  
 
<div id="section">
 
<div id="section">
−
   This is normal,
+
   正常、
 
   <span class="boldtext">
 
   <span class="boldtext">
−
       <span class="redtext"> this is normal and red,</span>
+
       <span class="redtext">正常紅字、</span>
 
   </span>
 
   </span>
−
   and normal again
+
   又見正常。
 
</div>
 
</div>
 
</pre>
 
</pre>
  
−
In this example the <code>body *</code> selector applys the rule to all elements inside body, at any hierarchy level, including ''redtext''. So <code>font-weight: bold;</code> applied to ''boldtext'' class is overridden by <code>font-weight: normal;</code> applied to ''redtext''.
+
在此例中，選取符為 <code>body *</code> 的規則會套用到所有 <code>body</code> �內的元素，也包括 ''redtext''，所以原先套用到 ''boldtext'' 的 <code>font-weight: bold;</code> 就被覆蓋為 <code>font-weight: normal;</code> 了。
  
  
−
'''Specificity in CSS'''
+
'''CSS 明確性'''
  
−
When multiples rules apply to a certain element, the rule chosen depends on its style specificity . Inline styles (in HTML <code>style</code> attributes) come first, followed by <code>id</code> styles, then <code>class</code> styles and eventually element-name styles.
+
如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的  <code>style</code> 屬性中）優先權最高，其次是以 <code>id</code> 做選取符的規則，再其次是以 <code>class</code> 套用的類別，最後則是單純以元素名稱當選取符的規則。
  
 
<pre>
 
<pre>
行 180： 行 183：
 
.green { color: green; }
 
.green { color: green; }
  
−
<div id="orange" class="green" style="color: red;">This is red</div>
+
<div id="orange" class="green" style="color: red;">是紅的！</div>
 
</pre>
 
</pre>
  
−
The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the [http://www.w3.org/TR/CSS21/cascade.html#specificity CSS 2.1 Specification chapter 6.4.3]
+
如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 [http://www.w3.org/TR/CSS21/cascade.html#specificity CSS 2.1 規格書的 6.4.3 一節]。
 +
 
 +
=== -moz-* 特性是什麼玩意？ ===
 +
請見 [http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions Mozilla 擴充的 CSS]。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。
 +
 
 +
=== hacked by Daniel ===
 +
(please move these to a more appropriate place)
 +
 
 +
layout problem due to Strict DocType
 +
* [https://bugzilla.mozilla.org/show_bug.cgi?id=245938 bug 245938] Space is inserted above headings in table cells
 +
* [https://bugzilla.mozilla.org/show_bug.cgi?id=22274 bug 22274] Too much space (for descenders) under image (<img>) elements
  
−
=== What do the -moz-* properties do? ===
+
other stuff
−
Please see the [[Mozilla CSS Extensions]] page.
+
* [https://bugzilla.mozilla.org/show_bug.cgi?id=25537 25537] Alt text is not displayed as a tooltip over <img> (image)
  
−
[[Category:CSS:Articles]]
+
{{link|文件專案|開發人員文件主頁}}
−
[[Category:NeedsEditorialReview]]
 
−
[[Category:NeedsTechnicalReview]]
 

於 2006年12月10日 (日) 16:05 的最新修訂

本文已經移往 Mozilla 開發者中心，請前往目前網址參考最新資訊。

這份文件舉出使用 CSS 時經常會碰上的狀況，並予以解答。

我的 CSS 合乎規格，但繪出的版面有誤

如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。

新近瀏覽器都有兩種佈局模式：

  • Quirks 模式：也稱為相容模式，讓舊網頁能依照以前舊瀏覽器的方式顯現。
  • 標準模式：瀏覽器將依循 W3C 規範決定網頁的顯示方式。

以 Gecko 為核心的瀏覽器都有第三種近乎標準模式，其中只有一些些不合規範的地方。

如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。

以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

id 與 class 之間的差別

HTML 元素都可有 id 及 class 屬性。id 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；class 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 class 屬性值相同。) CSS 可以讓你以 id 或 class 來決定某元素的樣式。

如果你想指定某特定單一元素的樣式，則應使用 id。

若有很多個元素皆有相同樣式，則可使用 class。

這方面的資訊亦可參考 CSS 選取符。

恢復某特性的預設值

CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 default 的關鍵字。

所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 p 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。

此外，由於 CSS 具串聯特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。

相依樣式

CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 Eric Meyer 所寫、關於 CSS 工作小組的說明。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。

套用多重類別

你可以在 HTML 元素的 class 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。 

<style type="text/css">
.firstclass { background: black; color: white; }
.secondclass { font-weight: bold; }
</style>

<div class="firstclass secondclass">
... content ...
... content ...
... content ...
</div>

若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與class 屬性中的次序無關。

無用樣式

即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。

以下是導致樣式被略過的常見情形：

  • HTML 元素層次問題
  • 樣式規則重新定義
  • 特性的簡寫法
  • 使用 * 選取符
  • CSS 明確性

你可以使用 DOM Inspector 的 CSS Style Rules 來檢查上述問題。

HTML 元素層次問題

此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。 

#section { font-weight: bold; }
.redtext { font-weight: normal; color: red; }

<div id="section">
   粗體、
   <span class="redtext">正常紅字、</span>
   又見粗體
</div>

如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。

樣式規則重新定義

在 CSS 樣式表中，先後次序非常重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。 

#section { font-weight: bold; }
.redtext { color: red; }
/* 其他規則 */
/* 其他規則 */
/* 其他規則 */
.redtext { color: green; }

<div id="section">
粗體、
<span class="redtext">正常紅字？</span>
又見粗體
</div>

為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。


特性的簡寫法

使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。 

#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
.redtext { font: 14px Arial; color: red; }

<div id="section">
   採用 Verdana 粗體的 12px 字樣； 
   <span class="redtext">採用 Arial 正常字體的 14px 紅字；</span>
   還是採用 Verdana 粗體的 12px 字樣。
</div>

前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序真的很重要。 

#section {
   font-weight: bold;
   font: 12px Verdana;  /* 有了這行，font-weight 又回到預設的 normal 了 */
}


使用 * 選取符

* 選取符表示任何元素皆符合，但使用上應多加小心。 

body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }

<div id="section">
   正常、
   <span class="boldtext">
      <span class="redtext">正常紅字、</span>
   </span>
   又見正常。
</div>

在此例中，選取符為 body * 的規則會套用到所有 body �內的元素，也包括 redtext，所以原先套用到 boldtext 的 font-weight: bold; 就被覆蓋為 font-weight: normal; 了。


CSS 明確性

如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 style 屬性中）優先權最高，其次是以 id 做選取符的規則，再其次是以 class 套用的類別，最後則是單純以元素名稱當選取符的規則。 

div { color: black; }
#orange { color: orange; }
.green { color: green; }

<div id="orange" class="green" style="color: red;">是紅的！</div>

如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 CSS 2.1 規格書的 6.4.3 一節。

-moz-* 特性是什麼玩意？

請見 Mozilla 擴充的 CSS。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。

hacked by Daniel

(please move these to a more appropriate place)

layout problem due to Strict DocType

  • bug 245938 Space is inserted above headings in table cells
  • bug 22274 Too much space (for descenders) under image (<img>) elements

other stuff

  • 25537 Alt text is not displayed as a tooltip over <img> (image)

‧返回上一頁: 開發人員文件主頁

取自 "https://wiki.moztw.org/index.php?title=CSS_一般問題&oldid=23942"
個人工具