css命名規範
一．檔案命名規範
全域性樣式：global.css；
框架布局：layout.css；
字型樣式：font.css；
鏈結樣式：link.css；
列印樣式：print.css；
css書寫規範及方法
一. 常規書寫規範及方法
1. 選擇doctype：
xhtml 1.0 提供了三種dtd宣告可供選擇：
過渡的(transitional):要求非常寬鬆的dtd，它允許你繼續使用html4.01的標識(但是要符合xhtml的寫法)。完整**如下：
嚴格的(strict):要求嚴格的dtd，你不能使用任何表現層的標識和屬性，例如
。完整**如下：
框架的(frameset):專門針對框架頁面設計使用的dtd，如果你的頁面中包含有框架，需要採用這種dtd。完整**如下：
理想情況當然是嚴格的dtd，但對於我們大多數剛接觸web標準的設計師來說，過渡的dtd(xhtml 1.0 transitional)是目前理想選擇(包括本站，使用的也是過渡型dtd)。因為這種dtd還允許我們使用表現層的標識、元素和屬性，也比較容易通過w3c的**校驗。
關於dtd您可以參考：
2. 指定語言及字符集：
為文件指定語言：
為了被瀏覽器正確解釋和通過w3c**校驗，所有的xhtml文件都必須宣告它們所使用的編碼語言；如：
常用的語言定義：
標準的xml文件語言定義：
<?xml version=」1.0″ encoding=」 utf-8″?>
針對老版本的瀏覽器的語言定義：
為提高字符集，建議採用「utf-8」。
3. 呼叫樣式表：
外部樣式表呼叫：
頁面內嵌法：就是將樣式表直接寫在頁面**的head區。 如：
6、輔助用背影圖處理：
這裡的」輔助」是指那些不是作為頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的。將其做背影圖處理，可以在不改動頁面的情況下通過css樣式來進行改動，如：
#logo
7、結構與樣式分離：
在頁面裡只寫入文件的結構，而將樣式寫於css檔案中，通過外部呼叫css樣式表來實現結構與樣式的分離。
8、文件的結構化書寫：
頁面css文件都應採用結構化的書寫方式，邏輯清晰易於閱讀。如：
/******主導航******/
#mainmenu
#mainmenu ul li
/******主導航結束******/
9、滑鼠手勢：
在xhtml標準中，hand只被ie識別，當需要將滑鼠手勢轉換為「手形」時，則將「hand」換為「pointer」，即「cursor:pointer;」
二．注釋書寫規範
1、行間注釋：
直接寫於屬性值後面，如：
.search
2、整段注釋：
分別在開始及結束地方加入注釋，如：
/******搜尋條******/
.search
/******搜尋條結束******/
關於注釋，您可以參考：
三．樣式屬性**縮寫
1、不同類有相同屬性及屬性值的縮寫：
對於兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應對其加以合併縮寫，特別是當有多個不同的類而有相同的屬性及屬性值時，合併縮寫可以減少**量並易於控制。如：
#mainmenu
#submenu
兩個不同類的屬性值有重複之處，剛可以縮寫為：
#mainmenu,#submenu
#mainmenu
#submenu
2、同一屬性的縮寫：
同一屬性根據它的屬性值也可以進行簡寫，如：
.search
.search
3、內外側邊框的縮寫：
在css中關於內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不同時也可直接縮寫，如：
.btn
則可縮寫為：
.btn
而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可以直接縮寫為兩個，如：
.btn
縮寫為：
.btn
而當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成乙個，如：
.btn
縮寫為：
.btn
4、顏色值的縮寫：
當rgb三個顏色值數值相同時，可縮寫顏色值**。如：
.menu
可縮寫為:
.menu
關於縮寫您可以參考：
四．hack書寫規範
因為不同瀏覽器對w3c標準的支援不一樣，各個瀏覽器對於頁面的解釋呈視也不盡相同，比如ie在很多情況下就與ff存在3px的差距，對於這些差異性，就需要利用css 的hack來進行調整，當然在沒有必要的情況下，最好不要寫hack來進行調整，避免因為hack而導致頁面出現問題。
1、 ie6、ie7、firefox之間的相容寫法：
寫法一：
ie都能識別*;標準瀏覽器(如ff)不能識別*；
ie6能識別*，但不能識別 !important,
ie7能識別*，也能識別!important;
ff不能識別*，但能識別!important;
根據上述表達，同一類/id下的css hack可寫為：
.searchinput
一般三者的書寫順序為：ff、ie7、ie6.
寫法二：
ie6可識別「_」，而ie7及ff皆不能識別，所以當只針對ie6與ie7及ff之間的區別時，可這樣書寫：
.searchinput
寫法三：
*+html 與 *html 是ie特有的標籤, firefox 暫不支援。
.searchinput
*html .searchinput /*僅ie6*/
*+html .searchinput /*僅ie7*/
遮蔽ie瀏覽器：
select是選擇符，根據情況更換。第二句是mac上safari瀏覽器獨有的。
*:lang(zh) select /*ff的專用*/
select:empty /*safari可見*/
ie6可識別：
這裡主要是通過css注釋分開乙個屬性與值，注釋在冒號前。
select
ie的if條件hack寫法：
所有的ie可識別：
only ie
只有ie5.0可以識別:
only ie 5.0
ie5.0包換ie5.5都可以識別:
only ie 5.0+
僅ie6可識別:
only ie 6-
ie6以及ie6以下的ie5.x都可識別:
only ie 6/+
僅ie7可識別:
only ie 7/-
關於css hack和bug您可以參考：
2、清除浮動：
在firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的hack來對父級做一次定義，那麼就可以解決這個問題。
select:after
DIV CSS網頁布局常用的一些命名規則和書寫
介紹服務 主導航 mainmenu mainmenu ul li 主導航結束 9 滑鼠手勢 在xhtml標準中，hand只被ie識別，當需要將滑鼠手勢轉換為 手形 時，則將 hand 換為 pointer 即 cursor pointer 二 注釋書寫規範 1 行間注釋 直接寫於屬性值後面，如 se...
DIV CSS網頁布局常用的方法與技巧
css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 程式 1 這裡是第一列 這裡是第二列 這是違背web標準意圖的，只是想說明在它下面的元素...
DIV CSS網頁布局常用的方法與技巧
float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml example source code 這裡是第一列 這裡是第二列 這是違背web標準意圖的，只是想說明在它下...