CSS Master讀書筆記:CSS 基礎

 

在樣式表中使用特殊性

在編寫CSS時,特殊性可以對一般的元素應用一般樣式,然後再更特殊的元素上覆蓋他們。假設希望站點上大多數表單的寬度是30em,但是搜索表單的寬度只有15em

form {width: 30em;}

form#search {width: 15em;}

但在大型站點上,例外情況會越來越多。每當創建更特殊的樣式時,可能需要覆蓋一些一般規則,可能需要一些額外的代碼。而且,因爲元素可以從許多地方獲得樣式,情況可能變得非常複雜。

爲了避免過分混亂,應儘量保持一般性樣式非常一般,特殊樣式儘可能特殊,從而不需要覆蓋特殊樣式。

 

在主體標籤上添加類或ID

一種有意思的使用特殊性的方法是在主體(body)標籤上應用類或ID。這樣做之後,就可以根據頁面或在站點範圍內覆蓋樣式。例如,如果希望主頁具有與站點其餘部分不同的佈局,那麼可以在主頁的主題元素上添加一個類名,並且使用它覆蓋樣式:

#content {float: left;}

#nav {float: right;}

/*homepage.html*/

<body class="homepage">…</body>

.homepage #content {float: right;}

.homepage #nav {float: left;}

 

管理CSS代碼的方法,包括將文件分割爲多個樣式表、按邏輯對樣式進行分組以及通過添加註釋使代碼更容易閱讀。

 

對文檔應用樣式

從文檔外部導入樣式表

<link href="/css/basic.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

@import url("/css/advanced.css");

-->

</style>

 

多個樣式表導入到一個樣式表中,然後將這個樣式錶鏈接到HTML頁面中

@import url(/css/layout.css);
@import url(/css/color.css);
這樣可以降低html文檔的複雜性。導入規則需要放置在樣式表的最前邊。
應避免兩層以上的簽到導入。

 

添加結構性註釋。在開頭添加一個註釋塊,它描述這個樣式表的用途、創建日期或版本號、創建者以及如何與創建者聯繫。

/*---------------------------------------------------------------

Basic Style Sheet (for version 4 browsers)

 

version:               1.1

author:                Alex Young

email:                  [email protected]

website:              http://blog.csdn.net/javangin

-----------------------------------------------------------------*/

使其他開發人員能夠了解這個文件的概況,瞭解它是否是最近編寫的,如果有某些東西無法理解,他們還可以與原來的作者聯繫。

 

然後,將樣式表分爲幾大塊。常常首先編寫一般規則,比如版式、標題和鏈接。接下來根據在文檔流中出現的次序處理頁面的主要部分。通常包括品牌部分、主要內容、次要內容、主導航、輔助導航和頁腳部分。最後,處理在整個站點上無規律地出現的一般元素。常常包括框樣式、表單樣式和圖形按鈕。

/* Typography

-------------------------------------------------------------------------*/

採用大註釋塊從視覺上分隔每個部分,儘可能的將所有的東西自然地分成定義明確的塊。代碼的分隔越細緻、越合理,就越容易理解,而且能更快的找到要尋找的規則。

 

還可以添加在所有站點上都使用的常用規則,形成某種原型CSS文件。

 

自我提示

/*

Use the star selector hack to give IE a different font size

http://www.xxx.com/xxx

*/

* html body {font-size: 75%;}

有時候可能需要用某種技巧解決某個問題。最好記錄這個問題、你使用的解決辦法和解釋這個修復辦法的URL

另外使用關鍵字來區分重要的註釋。如:使用TODO來表示某些東西需要在以後進行修改、修復或複查;用BUG表示代碼或特定瀏覽器遇到的問題;用KLUDGE表示並不完善的權宜之計

 

最後要刪除註釋並優化樣式表

最好的優化方法可能是啓用服務器端壓縮。如果使用Apache服務器,那麼應該安裝mod_gzipmod_deflate。依賴於現代瀏覽器對Gzip壓縮文件即時解壓的支持。這些Apache模塊探測瀏覽器是否能夠處理這種文件,如果可以,就發送壓縮的版本,可以減少對帶寬的佔用。

 

在開發團隊中建立樣式指南是一種非常好的做法。

樣式指南是一個文檔、網頁或小型站點,它們解釋代碼和站點的視覺設計師如何組合在一起的。

應該首先概括站點結構、文件結構和命名約定。

應該詳細描述編碼標準,設計人員、開發人員和內容編輯人員需要遵守這些標準,從而保持站點的質量。這包括使用的XHTML/CSS版本、選擇的可訪問性級別、瀏覽器支持細節和一般的編碼最佳實踐。

樣式指南應該詳細描述佈局和樣式元素,比如各個元素的尺寸、隔離帶的尺寸、使用的調色板和相關的十六進制值。

還應該給出特殊CSS樣式的說明和示例。例如,如果使用一個類來表示反饋,那麼應該說明這個類可以應用於哪些元素以及這些元素的外觀是什麼樣的。

 

組織樣式表

用一個CSS文件處理基本佈局,用另一個文件處理版式和設計修飾。

還可以進一步細分,如用單獨的CSS文件處理顏色。

每個CSS文件都意味着要對服務器進行一次額外的調用。

一般應儘可能保持靈活性和維護的簡單性。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章