「CSS 一般問題」修訂間的差異
出自 MozTW Wiki
小 （→Assigning multiple classes） |
小 （→Style rules that don't work） |
||
| 行 72： | 行 72： | ||
若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。 | 若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。 | ||
| − | === | + | === 無用樣式 === |
| − | + | 即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。 | |
| − | + | 以下是導致樣式被略過的常見情形： | |
| − | * HTML | + | * HTML 元素層次問題 |
| − | * | + | * 樣式規則重新定義 |
| − | * | + | * 特性的簡寫法 |
| − | * | + | * 使用 <code>*</code> 選取符 |
| − | * | + | * CSS 明確性 |
| − | + | 你可以使用 [http://developer.mozilla.org/en/docs/DOM_Inspector DOM Inspector] 的 ''CSS Style Rules'' 來檢查上述問題。 | |
| − | '''HTML | + | '''HTML 元素層次問題''' |
| − | + | 此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。 | |
<pre> | <pre> | ||
| 行 94： | 行 94： | ||
<div id="section"> | <div id="section"> | ||
| − | + | 粗體、 | |
| − | <span class="redtext"> | + | <span class="redtext">正常紅字、</span> |
| − | + | 又見粗體 | |
</div> | </div> | ||
</pre> | </pre> | ||
| − | + | 如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。 | |
| − | ''' | + | '''樣式規則重新定義''' |
| − | + | 在 CSS 樣式表中，先後次序'''非常'''重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。 | |
<pre> | <pre> | ||
| 行 115： | 行 115： | ||
<div id="section"> | <div id="section"> | ||
| − | + | 粗體、 | |
| − | <span class="redtext"> | + | <span class="redtext">正常紅字、</span> |
| − | + | 又見粗體 | |
</div> | </div> | ||
</pre> | </pre> | ||
| − | + | 為避免此類錯誤發生，請僅為特定選取符定義一次樣式、並, try to define rules only once for a certain selector, and group all rules belonging to that selector. | |
| + | |||
| + | 譯註：這段跟我的認知上有出入，實驗結果亦證明我的認知無誤，待詢問。 --[[用戶:BobChao|BobChao]] 14:18 2005年九月30日 (CST) | ||
於 2005年9月30日 (五) 14:18 的修訂
這份文件舉出使用 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 具串聯特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。
相依樣式
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; }
/* other rules */
/* other rules */
/* other rules */
.redtext { font-weight: normal; }
<div id="section">
粗體、
<span class="redtext">正常紅字、</span>
又見粗體
</div>
為避免此類錯誤發生，請僅為特定選取符定義一次樣式、並, try to define rules only once for a certain selector, and group all rules belonging to that selector.
譯註：這段跟我的認知上有出入，實驗結果亦證明我的認知無誤，待詢問。 --BobChao 14:18 2005年九月30日 (CST)
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。
