舊文件

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

「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">

idclass 之間的差別

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

如果你想指定某特定單一元素的樣式,則應使用 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 InspectorCSS 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,所以原先套用到 boldtextfont-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)
個人工具