CSS初學者技巧 CSS標準和最佳樣本

CSS初學者技巧 CSS標準和最佳樣本

CSS是用來定義網站的使用者介面或將顯示和內容區分開來的。
由於CSS被廣泛地使用在幾乎所有網站上，所以讓我們花些時間來建立樣式表並確保它符合良好的標準。下面的技巧會極大地在開發過程中協助CSS初學者。
索引
本處的定義將協助你和其他開發人員瞭解網站和CSS檔案，還將協助你們瞭解CSS檔案中的內容。索引部分知識一個格式化了的CSS注釋段落。
1給出CSS檔案的作者資訊
2定義網站的設計（列數，靜態/動態）［columns， static/liquid］
3持續追蹤檔案版本（當檔案有多個作者或未來需要有升級更新的時候非常有用）

 

1.gif (42.62 KB)

2009-2-23 20:07

錨點
錨點就好像在同一個CSS檔案中的書籤一樣，錨點使你清晰地瀏覽整個CSS檔案按並且使它很有組織。
錨點需要在CSS的索引（上面提到的）處定義，因為CSS沒有自己的錨點系統，所以我在文檔中使用了一個簡單的技巧定義錨點。
方法是用一個比較罕見的字元來定義注釋，當你想找某個錨點時，你就可以從索引處複製並尋找錨點的定義符，並找到該錨點。

 

2.gif (48.56 KB)

2009-2-23 20:07

 

重定義
重定義是用來覆蓋HTML預設的標籤樣式，把它們進行重定義的方法。你是否見過這樣的CSS代碼，它只是想把那個特定的元素加上樣式！
CSS中一個非常美麗的用法是上下文選取器，讓我們使用它：

3.gif (48.23 KB)

2009-2-23 20:07

命名規則
一個很關鍵的因素將元素給出精確無誤並且乾淨有效名字，這將避免混亂並讓你更容易快捷地讀懂你的CSS。

4.gif (14.21 KB)

2009-2-23 20:07

速寫
CSS中的速寫功能是你可以將許多同類型的屬性合并成一個的屬性。
CSS速寫使開發過程更簡單並且讓你的CSS檔案乾淨、簡短、可讀，下面是幾個例子：

 

5.gif (44.93 KB)

2009-2-23 20:07

 

Sprites
（譯者註：翻譯成精靈好像並不能對文章加深感性認識，反倒在真正看到英文的時候不理解了，所以乾脆不譯。）
將所有的背景圖片合并到一張並且使用背景定位來顯示不同的部分，這就是我們所說的CSS Sprites。
CSS Sprites能夠減少HTTP請求的數量，節省頻寬，使得讀取更快。同時也可以避免映像不穩定現象（比如當滑鼠經過一張圖片時可以顯示另一張圖片的效果，後一張圖片將在慢速的網際網路串連中等待半天才會出現）。
CSS Sprites最佳並且最受歡迎的例子是蘋果公司網站上的菜單系統：

6.gif (16.68 KB)

2009-2-23 20:07

明確化
選取器明確化是當好幾個規則都可以被相同的元素使用時，優先使用哪一個的過程。
簡單說來，每個CSS選取器都有權重。選取器的所有權重的總和決定了它在文檔中的屬性。當CSS文檔很大，以至於你不知道元素哪個權重較大時，明確化就能起到很大的協助。
恩，明確化是CSS中一個較大的領域，以至於很難用幾句話解釋清楚，還是看例子吧：

 

7.gif (19.21 KB)

2009-2-23 20:07

 

屬性重設
全域屬性重設確保一個網站在所有瀏覽器中顯示幾乎一樣。在每一個案例中，不同的瀏覽器給所有網站使用它們自己的預設樣式設定集，這將使我們的網站在不同的瀏覽器中顯示不一樣。全域屬性重設將改正這種情況並讓你從絕對一致的基礎開始建立網站。
我並不總是推薦使用CSS架構，但是CSS重設你還是需要用到的。現在有許多不同的重設方法，從簡單的到複雜的。

 

8.gif (25.43 KB)

2009-2-23 20:07

  

Hacks

即便是一個完美的CSS，它也不能在所有瀏覽器中產生完全一致的顯示，每個瀏覽器有對CSS不同的解釋方法。總而言之，如果你需要你的網站在所有瀏覽器中保持一致，你不得不使用CSS Hacks。

 

9.gif (16.18 KB)

2009-2-23 20:07

 

使用CSSHacks將減少CSS驗證時產生的錯誤，這一點我同意。要實現這點，一個可選的方法是每個瀏覽器使用單一不同的CSS檔案並通過在HTML中包含判定瀏覽器的標籤來告訴瀏覽器應該使用哪個特定的CSS。我經常在我所有的項目中建立一個“fuck-ie.css” ：）（譯者註：此處作者用髒話表達了他對IE的憤怒。如果翻譯成“和IE交配.css”，世界會不會和諧一些？）
使用這種方法後，你的“主CSS檔案”將通過驗證，與此同時，“fuck-ie.css” 檔案也會通過驗證，但是只在IE瀏覽器中覆蓋“主CSS檔案”。
驗證
在建立CSS的時候就驗證它總是很必要的，這將確保你的CSS沒有錯誤並且可以被所有瀏覽器正確地解釋。
W3C驗證器是一個非常流行的線上CSS驗證工具。

 

10.jpg (16.02 KB)

2009-2-23 20:07

 

（來源：http://www.dezinerfolio.com/2009 ... ards-best-practices）