CSS例項 CSS的10個方法和技巧

css用於定義**的ui和將內容從外觀中分離。css在幾乎所有**中被廣泛應用。讓我們花點時間來看看我們編寫的樣式是否基於比較好的標準。下面的這些技巧將對css初學者在開發中有所幫助，對css高手或許也將有某些提高。

css用於定義**的ui和將內容從外觀中分離。

css在幾乎所有**中被廣泛應用。讓我們花點時間來看看我們編寫的樣式是否基於比較好的標準。

下面的這些技巧將對css初學者在開發中有所幫助，對css高手或許也將有某些提高。

索引這個定義可以幫助你和其他人更多的理解這個**。這個索引只是乙個格式化的文字段落，和css注釋一樣。

給該css的作者以一些著作權宣告定義**的布局[卷數，固定寬度或全屏]

跟蹤版本[對多個編輯者和特別更新很有用]

錨點錨點在css中就像書籤。錨點讓你很方便的瀏覽你的css而不會盲目和混亂，會讓一切變得有規律。

錨點在css的索引中定義。css沒有原生的錨點系統，所以我在文件中採用一種比較簡單的技術來定義錨點。

這個主意是用一套特定的字元來定義注釋。要找到乙個錨點，你可以通過複製和查詢(搜尋)索引中定義的錨點，然後就可以很正確的定位到相關的內容。

多類症多類症是乙個術語，用來描述在html中過度使用class定義的現象。

css中最美的地方之一就是上下文選擇器，讓我們使用這個吧:

命名規範

給你的元素宣告乙個恰當和簡潔的名字是乙個關鍵。這真的能夠避免混亂並能讓你更好更快的理解css。

事實上這涉及到**的語義化和可讀性，好的命名規則可以讓自己和團隊的工作更加輕鬆。

簡寫css中的縮寫是指,定義與單個樣式擁有相同屬性的一系列樣式.

css簡寫可使開發工作變得更加容易,並讓你的css保持簡潔、更小而且更易用。這裡是一些示例：

sprites

合併所有的背景到乙個單個裡面，並通過background-position屬性來使用這個，這就是我們所謂的css sprites的全部。

css sprites可以減少http請求的數量，節省頻寬並加快頁面載入。同時，可以避免閃爍[例如，如果系統或網速比較慢的時候，當滑鼠放到乙個按鈕時載入另外乙個就可能引起閃爍/中斷]。

最好和最著名的使用css sprites技術的例子就是apple公司官方**的選單系統。

**: apple.com

特異性選擇器特異性是一種用於確定當多個規則用於同乙個元素的時候哪乙個起作用（優先順序）的處理方法。

通常來說，每乙個css選擇器都有一些種類的關聯權重,某個選擇器的所有權重之和決定它在文件中的優先權。當遇到很大的css檔案時，特異性就非常有幫助。

然而，特異性在css中是乙個很大的領域，它不能用一些簡單的語句解釋清楚。這裡是一些示例：

重設全域性重設可以確保乙個**在所有瀏覽器保持統一的外觀。完全不一樣的瀏覽器會在乙個**上應用自己的預設設定，這可能導致乙個**在不同的瀏覽器有不同的介面表現……乙個全域性重設可以解決這個問題，可以讓你從乙個絕對基礎構建乙個**。

使用乙個css框架不是什麼時候都是恰當的，但是乙個css 重設是你每次都需要的。從簡單到複雜，有很多不同的重設方法。

hacks

即便是完美的css也未必能在所有的瀏覽器生成完全一致的輸出，因為瀏覽器解釋你的css的方法不同。如果你想使你的**在所有的瀏覽器中看起來一樣，你不得不使用css hacks。

我承認使用css hacks會在css驗證的時候出現錯誤。乙個替代的方法是建乙個獨立的針對某個瀏覽器的特別css檔案，然後在hwww.cppcns.comtml**中使用特定標籤引用它。我常常在我的所有專案中使用「****-ie.css」檔案

這樣你就可以驗證你的主要css檔案，而且也可以驗證「****-ie.css」檔案，只是在ie中的主要css檔案的優先順序低一點兒…

驗證當你寫好了css檔案之後，驗證一直是件很重要的事情。這可以確認你的css是沒有錯誤的而且在不同的瀏覽器中的解釋/表現是一樣的。

w3c validator 是乙個非常流行和有用的**驗證css的工具。