|
|
原文：mezzoblue CSS Crib Sheet
在使用CSS建站時(shí)，您肯定遇到過(guò)形形色色的布局問(wèn)題，最后可能被搞得焦頭爛額。本文的目的是讓您的設(shè)計(jì)過(guò)程更為容易，當(dāng)您遇到困難時(shí)為您提供快速參考。
如果您有所補(bǔ)充，請(qǐng)?jiān)谶@里發(fā)表您的意見.
本文的其他語(yǔ)言版：法語(yǔ), 德語(yǔ), 西班牙語(yǔ) 和 匈牙利語(yǔ)。 歡迎提供其他翻譯。
有疑問(wèn)，先驗(yàn)證
在調(diào)試時(shí)，先對(duì)您的代碼進(jìn)行驗(yàn)證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會(huì)導(dǎo)致許多布局上的錯(cuò)誤。
在其他瀏覽器中進(jìn)行測(cè)試之前，請(qǐng)先在最先進(jìn)的瀏覽器中撰寫和測(cè)試CSS代碼，而不是相反。
如果您在破舊的瀏覽器中編寫和測(cè)試，你的代碼就不得不依賴那個(gè)破舊瀏覽器的糟糕的顯示，然后在符合標(biāo)準(zhǔn)的瀏覽器中進(jìn)行測(cè)試，看到顯示結(jié)果“不正常”時(shí)，你會(huì)很沮喪的。相反，您應(yīng)該先將您的代碼完善，然后再設(shè)法為較低級(jí)的瀏覽器打算。這樣從一開始您的代碼就是符合標(biāo)準(zhǔn)的，你不必再為支持其他瀏覽器而勞心費(fèi)神。當(dāng)然了，目前遵從標(biāo)準(zhǔn)的瀏覽器無(wú)疑就是 Mozilla, Safari 或 Opera。
確保您想要的效果真的存在
許多特定的瀏覽器專有的CSS擴(kuò)展在正式標(biāo)準(zhǔn)中并不存在。 如果您對(duì) filter(濾鏡) 或滾動(dòng)條指定樣式，您用的就是私有代碼，除了IE之外，在別的瀏覽器中毫無(wú)作用。如果驗(yàn)證器告訴您代碼沒(méi)有定義，極有可能您用了私有樣式，別指望在不同的瀏覽器中得到一致的效果。
如果布局中一定要用浮動(dòng)對(duì)象，別忘了適時(shí)使用清除（clear）屬性。
浮動(dòng)元素似易實(shí)難，而且難以駕馭。如果您發(fā)現(xiàn)浮動(dòng)對(duì)象伸出了容器的邊界，或者不像您所期望的那樣顯示，請(qǐng)檢查您的期望是否正確。關(guān)于這個(gè)問(wèn)題請(qǐng)看Eric Meyer 的教程
邊距的合并：可用padding 或 border 來(lái)避免。
您可能被多余的(或者想要卻不出現(xiàn)的)空白搞得焦頭爛額。如果您用了 margins，邊距的合并可能就是問(wèn)題的根源。 Andy Budd 對(duì)此的解釋也許能為你解惑。再這里對(duì)PJblog的結(jié)構(gòu)補(bǔ)充一下。如果你用了Flash請(qǐng)檢查一下Xml文件里是是否設(shè)置了邊距
避免將 padding/border 和固定寬度同時(shí)應(yīng)用到同一元素。
IE5 錯(cuò)誤的區(qū)塊模型是罪魁禍?zhǔn)祝撬咽虑榕脕y七八糟。雖然有補(bǔ)救方案，不過(guò)最好是繞過(guò)這個(gè)問(wèn)題，當(dāng)子元素的寬度固定時(shí)，為其父元素指定padding。
避免IE下未指定樣式內(nèi)容的閃爍。
如果您用 @import 來(lái)輸入外部樣式表，早晚會(huì)發(fā)現(xiàn)IE有“閃爍”的毛病。在應(yīng)用CSS樣式之前，未格式化的HTML文本會(huì)短暫地出現(xiàn)。這是可以避免的.
別指望 min-width 在IE中有用。
IE不支持它，但是它將 width 當(dāng)作 min-width，所以通過(guò)一些 IE 的過(guò)濾技巧(filtering)，可以實(shí)現(xiàn)同樣的最終效果。這個(gè)很郁悶我現(xiàn)在這個(gè)Skin就沒(méi)能實(shí)現(xiàn)
走投無(wú)路時(shí)，試一試減少寬度
由于舍入誤差，有時(shí) 50% 加上 50% 等于 100.1%，破壞某些瀏覽器中的布局。不妨試試將 50% 減到 49%，甚至 49.9%。還有假如你用了邊框（border）記得要把他的寬度加進(jìn)去，500px的框加了一圈1px的邊框那他就是502px。
IE 中顯示不正常？
可能是 Peekaboo 臭蟲在作怪，尤其是當(dāng)鼠標(biāo)經(jīng)過(guò)超鏈接時(shí)能顯示正常。修補(bǔ)方法見Position is Everything。
如果使用了錨點(diǎn)，在應(yīng)用超鏈接樣式時(shí)要特別小心。
如果您在代碼中使用了傳統(tǒng)的錨點(diǎn)(<a name="anchor">)，您會(huì)注意到 :hover 和 :active偽類也會(huì)作用于它。要避免這種情形，你可以使用 id，或者使用鮮為人知的語(yǔ)法: :link:hover, :link:active
記住“LoVe/HAte”（愛/恨）鏈接規(guī)則
要以下面的順序指定超鏈接偽類：Link, Visited, Hover, Acitve。任何其他順序都不妥當(dāng)。假如用了 :focus，次序應(yīng)為 LVHFA(“Lord Vader's Handle Formerly Anakin”，Matt Haughey這樣建議)。
請(qǐng)記住“TRouBLED”（麻煩的）邊框。
邊框(border)、邊距(margin)和補(bǔ)白(padding)的簡(jiǎn)寫次序?yàn)椋喉槙r(shí)針?lè)较驈纳祥_始，即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。
非零值要指明單位。
在用CSS指定字體、邊距或大小時(shí)，必須指明所用的單位（唯一的例外是 line-height，很奇怪，它不需要單位）。某些瀏覽器對(duì)未指明單位的處理方法不足為憑。零就是零，不管是 px 還是 em。其他的非零值都要明確指定單位。例如： padding: 0 2px 0 1em;
測(cè)試不同的字體大小。
像 Mozilla 和 Opera 這樣的高級(jí)瀏覽器都允許你改變字體大小，不管你用什么字體單位。某些用戶的默認(rèn)字體大小肯定和你的不同，盡最大努力去滿足他們。
測(cè)試時(shí)用嵌入式樣式，發(fā)布時(shí)再改為外部輸入。
將樣式表嵌入在你的 HTML 源代碼中，在測(cè)試時(shí)可以消除許多緩存引起的錯(cuò)誤，尤其是某些 Mac 下的瀏覽器。但在發(fā)布前，一定要記住將樣式表移到外部文件，用 @import 或 <link>引入。
加上明顯的邊框有助于布局調(diào)試。
像 div {border: solid 1px #f00;} 之類的全局規(guī)則可以暫時(shí)為你查出布局問(wèn)題。為特定的元素加上邊框可幫您找到難以發(fā)覺的重疊或空白問(wèn)題。 這個(gè)方法很實(shí)用，大家一定要嘗試一下
圖片路徑不要用單引號(hào)。
當(dāng)設(shè)置背景圖片時(shí)，要堅(jiān)持用雙引號(hào)。盡管看起來(lái)好像多此一舉，但是如果不這么做，IE5/Mac 會(huì)噎住。 這個(gè)好像最容易忽視了
不要為將來(lái)的樣式表（比如手持式設(shè)備或打印用樣式表）“占位子”。
Mac IE5 對(duì)空的樣式表比較感冒，會(huì)增加頁(yè)面的裝入時(shí)間。建議樣式表中至少應(yīng)該有一條規(guī)則（哪怕是注釋也好），免得 MacIE噎住。
還有一些建議雖然不針對(duì)某些功能，但是在開發(fā)過(guò)程中值得注意：
好好組織您的CSS文件
恰當(dāng)?shù)爻蓧K注釋CSS，將相似的CSS選擇符編為一組，養(yǎng)成一致的命名習(xí)慣和空白格式（為跨平臺(tái)考慮，建議用空白字符而不是tab。）以及適當(dāng)?shù)拇涡颉?
以功能（而不是外觀）為類和ID命名
假如您創(chuàng)建了一個(gè) .smallblue 類，后來(lái)打算將文字改大，顏色變?yōu)榧t色，這個(gè)類名就不再有任何意義了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。
組合選擇符
保持CSS短小對(duì)減少下載時(shí)間非常重要。請(qǐng)盡量為選擇符分組、 利用繼承(inheritance)以及使用簡(jiǎn)寫(shorthand)來(lái)減少冗余。
使用圖片替換技術(shù)時(shí)要考慮親和力
已經(jīng)發(fā)現(xiàn)傳統(tǒng)的FIR在屏幕閱讀器，以及關(guān)閉圖片顯示的瀏覽器中會(huì)出問(wèn)題。對(duì)此有其他解決辦法，要根據(jù)具體情況，慎重使用。
HTML/CSS技術(shù)：CSS錦囊，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
