diff options
Diffstat (limited to 'files/zh-tw/web/css/common_css_questions/index.html')
| -rw-r--r-- | files/zh-tw/web/css/common_css_questions/index.html | 165 |
1 files changed, 165 insertions, 0 deletions
diff --git a/files/zh-tw/web/css/common_css_questions/index.html b/files/zh-tw/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..b824c671c4 --- /dev/null +++ b/files/zh-tw/web/css/common_css_questions/index.html @@ -0,0 +1,165 @@ +--- +title: CSS 一般問題 +slug: Web/CSS/Common_CSS_Questions +tags: + - CSS + - 待審閱技術 + - 待審閱文字 + - 所有類別 +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +<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><!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"> +</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><style type="text/css"> +.firstclass { background: black; color: white; } +.secondclass { font-weight: bold; } +</style> + +<div class="firstclass secondclass"> +... content ... +... content ... +... content ... +</div> +</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; } + +<div id="section"> + 粗體、 + <span class="redtext">正常紅字、</span> + 又見粗體 +</div> +</pre> +<p>如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。 +</p><p><b>樣式規則重新定義</b> +</p><p>在 CSS 樣式表中，先後次序<b>非常</b>重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。 +</p> +<pre>#section { font-weight: bold; } +.redtext { color: red; } +/* 其他規則 */ +/* 其他規則 */ +/* 其他規則 */ +.redtext { color: green; } + +<div id="section"> +粗體、 +<span class="redtext">正常紅字？</span> +又見粗體 +</div> +</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; } + +<div id="section"> + 採用 Verdana 粗體的 12px 字樣； + <span class="redtext">採用 Arial 正常字體的 14px 紅字；</span> + 還是採用 Verdana 粗體的 12px 字樣。 +</div> +</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; } + +<div id="section"> + 正常、 + <span class="boldtext"> + <span class="redtext">正常紅字、</span> + </span> + 又見正常。 +</div> +</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; } + +<div id="orange" class="green" style="color: red;">是紅的！</div> +</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" } ) }} |