CSS 一般問題
出自 MozTW Wiki
這份文件舉出使用 CSS 時經常會碰上的狀況，並予以解答。本文編譯自 Common CSS Questions，在 devmo 有正體中文版時可能會移過去。
編修開始 --BobChao 16:17 2005年九月29日 (CST)
內容大綱
我的 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 具串聯特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。
Derived styles
CSS does not allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect.
Assigning multiple classes
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to seperate them.
<style type="text/css">
.firstclass { background: black; color: white; }
.secondclass { font-weight: bold; }
</style>
<div class="firstclass secondclass">
... content ...
... content ...
... content ...
</div>
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 class attribute is not relevant.
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
- Explicitly re-defined style rule
- Use of a shorthand property
- Use of the
*selector - Specificity in CSS
You can use DOM Inspector's CSS Style Rules view to debug problems of this kind.
HTML elements hierarchy
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.
#section { font-weight: bold; }
.redtext { font-weight: normal; color: red; }
<div id="section">
This is bold,
<span class="redtext"> this is normal and red,</span>
and bold again
</div>
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.
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.
#section { font-weight: bold; }
.redtext { color: red; }
/* other rules */
/* other rules */
/* other rules */
.redtext { font-weight: normal; }
<div id="section">
This is bold,
<span class="redtext"> this is normal and red,</span>
and bold again
</div>
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.
#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
.redtext { font: 14px Arial; color: red; }
<div id="section">
This is bold 12px Verdana,
<span class="redtext">this is normal 14px Arial and red,</span>
and bold 12px Verdana again
</div>
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.
#section {
font-weight: bold;
font: 12px Verdana; /* font-weight is now normal */
}
Use of the * selector
The * selector referd to any element, and it has to be used with particular care.
body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }
<div id="section">
This is normal,
<span class="boldtext">
<span class="redtext"> this is normal and red,</span>
</span>
and normal again
</div>
In this example the body * selector applys the rule to all elements inside body, at any hierarchy level, including redtext. So font-weight: bold; applied to boldtext class is overridden by font-weight: normal; applied to redtext.
Specificity in CSS
When multiples rules apply to a certain element, the rule chosen depends on its style specificity . Inline styles (in HTML style attributes) come first, followed by id styles, then class styles and eventually element-name styles.
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">This is red</div>
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 CSS 2.1 Specification chapter 6.4.3
-moz-* 特性是什麼玩意？
請見 Mozilla 擴充的 CSS。
