CSS是用來定義網站的用戶界面或將顯示和內容區分開來的。
由于CSS被廣泛地使用在幾乎所有網站上,所以讓我們花些時間來創建樣式表并確保它符合良好的標準。下面的技巧會極大地在開發過程中幫助CSS初學者。
索引
本處的定義將幫助你和其他開發者了解網站和CSS文件,還將幫助你們了解CSS文件中的內容。索引部分知識一個格式化了的CSS注釋段落。
- 給出CSS文件的作者信息
- 定義網站的設計(列數,靜態/動態)[columns, static/liquid]
- 持續跟蹤文件版本(當文件有多個作者或未來需要有升級更新的時候非常有用)
[Page: ]
錨點
錨點就好像在同一個CSS文件中的書簽一樣,錨點使你清晰地瀏覽整個CSS文件按并且使它很有組織。
錨點需要在CSS的索引(上面提到的)處定義,因為CSS沒有自己的錨點系統,所以我在文檔中使用了一個簡單的技巧定義錨點。
方法是用一個比較罕見的字符來定義注釋,當你想找某個錨點時,你就可以從索引處復制并查找錨點的定義符,并找到該錨點。
[Page: ]
重定義
重定義是用來覆蓋HTML默認的標簽樣式,把它們進行重定義的方法。你是否見過這樣的CSS代碼,它只是想把那個特定的元素加上樣式!
CSS中一個非常美麗的用法是上下文選擇器,讓我們使用它:
[Page: ]
命名規則
一個很關鍵的因素將元素給出精確無誤并且干凈有效的名字,這將避免混亂并讓你更容易快捷地讀懂你的CSS。
[Page: ]
速寫
CSS中的速寫功能是你可以將許多同類型的屬性合并成一個的屬性。
CSS速寫使開發過程更簡單并且讓你的CSS文件干凈、簡短、可讀,下面是幾個例子:
[Page: ]
Sprites
將所有的背景圖片合并到一張并且使用背景定位來顯示不同的部分,這就是我們所說的CSS Sprites。
CSS Sprites能夠減少HTTP請求的數量,節省帶寬,使得讀取更快。同時也可以避免圖像不穩定現象(比如當鼠標經過一張圖片時可以顯示另一張圖片的效果,后一張圖片將在慢速的因特網連接中等待半天才會出現)。
CSS Sprites最佳并且最受歡迎的例子是蘋果公司網站上的菜單系統:
[Page: ]
明確化
選擇器明確化是當好幾個規則都可以被相同的元素使用時,優先使用哪一個的過程。
簡單說來,每個CSS選擇器都有權重。選擇器的所有權重的總和決定了它在文檔中的屬性。當CSS文檔很大,以至于你不知道元素哪個權重較大時,明確化就能起到很大的幫助。
恩,明確化是CSS中一個較大的領域,以至于很難用幾句話解釋清楚,還是看例子吧:
[Page: ]
屬性重置
全局屬性重置確保一個網站在所有瀏覽器中顯示幾乎一樣。在每一個案例中,不同的瀏覽器給所有網站使用它們自己的默認樣式設置集,這將使我們的網站在不同的瀏覽器中顯示不一樣。全局屬性重置將改正這種情況并讓你從絕對一致的基礎開始建立網站。
我并不總是推薦使用CSS框架,但是CSS重置你還是需要用到的。現在有許多不同的重置方法,從簡單的到復雜的。
[Page: ]
Hacks
即便是一個完美的CSS,它也不能在所有瀏覽器中產生完全一致的顯示,每個瀏覽器有對CSS不同的解釋方法。總而言之,如果你需要你的網站在所有瀏覽器中保持一致,你不得不使用CSS Hacks。
使用CSS Hacks將減少CSS驗證時產生的錯誤,這一點我同意。要實現這點,一個可選的方法是每個瀏覽器使用單一不同的CSS文件并通過在HTML中包含判定瀏覽器的標簽來告訴瀏覽器應該使用哪個特定的CSS。我經常在我所有的項目中創建一個"fuck-ie.css" :) (譯者注:此處作者用臟話表達了他對IE的憤怒。如果翻譯成“和IE交配.css”,世界會不會和諧一些?)
使用這種方法后,你的“主CSS文件”將通過驗證,與此同時,"fuck-ie.css" 文件也會通過驗證,但是只在IE瀏覽器中覆蓋“主CSS文件”。
[Page: ]
驗證
在創建CSS的時候就驗證它總是很必要的,這將確保你的CSS沒有錯誤并且可以被所有瀏覽器正確地解釋。
W3C驗證器是一個非常流行的在線CSS驗證工具。
如果你有什么更多的技巧想加到本文中,請在文章評論中分享他們,我們希望這能幫到你。