CSS是目前網頁佈局主流的形式,也是52CSS.com向大家介紹的核心內容,由於CSS被廣泛地使用在幾乎所有網站上,所以讓我們花些時間來創建樣式表並確保它符合良好的標準。以下的技巧會大大在開發過程中幫助CSS初學者。大家可以從中了解到DivCSS初學者應該知道的十種技巧和對Web標準的理解。
一、索引本處的定義將幫助你和其他開發者了解網站和CSS文件,也將幫助你們了解CSS文件中的內容。索引部分知識一個格式化了的CSS註解段落。
1.給予CSS檔案的作者資訊2、定義網站的設計(列數,靜態/動態)[columns, static/liquid]
3.持續追蹤文件版本(當文件有多個作者或未來需要有升級更新的時候非常有用)
二、錨點錨點就好像在同一個CSS文件中的書籤一樣,錨點使你清晰地瀏覽整個CSS文件按並且使它很有組織。
錨點需要在CSS的索引(上面提到的)處定義,因為CSS沒有自己的錨點系統,所以我在文件中使用了一個簡單的技巧定義錨點。
方法是用一個比較罕見的字符來定義註釋,當你想找某個錨點時,你就可以從索引處複製並查找錨點的定義符,並找到該錨點。
三、重定義重定義是用來覆寫HTML預設的標籤樣式,把它們重新定義的方法。你是否看過這樣的CSS程式碼,它只是想把那個特定的元素加上樣式!
CSS中一個非常美麗的用法是上下文選擇器,讓我們使用它:
四、命名規則一個很關鍵的因素將元素給出精確無誤並且乾淨有效的名字,這將避免混亂並讓你更容易快捷地讀懂你的CSS。
五、縮寫CSS中的縮寫功能是你可以將許多同類型的屬性合併成一個的屬性。
CSS縮寫讓開發過程更簡單並且讓你的CSS檔案乾淨、簡短、可讀,以下是幾個例子:
六、Sprites翻譯成精靈好像並不能對文章加深感性認識,反倒在真正看到英文的時候不理解了,所以乾脆不譯。將所有的背景圖片合併到一張並且使用背景定位來顯示不同的部分,這就是我們所說的CSS Sprites。
CSS Sprites能夠減少HTTP請求的數量,節省頻寬,使得讀取更快。同時也可以避免影像不穩定現象(例如當滑鼠經過一張圖片時可以顯示另一張圖片的效果,後一張圖片將在慢速的因特網連接中等待半天才會出現)。
CSS Sprites最佳且最受歡迎的例子是蘋果網站上的選單系統:
七、明確化選擇器明確化是當好幾個規則都可以被相同的元素使用時,優先使用哪一個的過程。
簡單說來,每個CSS選擇器都有權利重。選擇器的所有權重的總和決定了它在文件中的屬性。當CSS文檔很大,以至於你不知道元素哪個權重較大時,明確化就能起到很大的幫助。
恩,明確化是CSS中較大的領域,以至於很難用幾句話解釋清楚,還是看例子吧:
八、屬性重置全域屬性重置確保一個網站在所有瀏覽器中顯示幾乎一樣。在每一個案例中,不同的瀏覽器給所有網站使用它們自己的預設樣式設定集,這將使我們的網站在不同的瀏覽器中顯示不一樣。全域屬性重置將改正這種情況並讓你從絕對一致的基礎開始建立網站。
我並不總是建議使用CSS框架,但是CSS重置你還是需要用到的。現在有許多不同的重置方法,從簡單的到複雜的。
九、CSS Hacks即便是一個完美的CSS,它也不能在所有瀏覽器中產生完全一致的顯示,每個瀏覽器都有對CSS不同的解釋方法。總而言之,如果你需要你的網站在所有瀏覽器中保持一致,你不得不使用CSS Hacks。
使用CSS Hacks將減少CSS驗證時產生的錯誤,這一點我同意。要實現這一點,一個可選的方法是每個瀏覽器使用單一不同的CSS檔案並透過在HTML中包含判定瀏覽器的標籤來告訴瀏覽器應該使用哪個特定的CSS。我經常在我所有的項目中創建一個“fuck-ie.css” :) (譯者註:此處作者用髒話表達了他對IE的憤怒。如果翻譯成“和IE交配.css”,世界會不會和諧一些?
使用這種方法後,你的「主CSS檔案」將會通過驗證,同時,「fuck-ie.css」 檔案也會通過驗證,但是只會在IE瀏覽器中覆寫「主CSS檔案」。
十、驗證在創建CSS的時候就驗證它總是很必要的,這將確保你的CSS沒有錯誤並且可以被所有瀏覽器正確地解釋。
W3C驗證器是一個非常受歡迎的線上CSS驗證工具。