css 書寫技巧 CSS 技巧教程簡(jiǎn)介

　　nettuts帶來的5個(gè)css書寫技巧，簡(jiǎn)單翻譯一下它的中心思想。

　　1. CSS Reset/重置

　　你也許需要先了解什么是css重置。然后怎么樣寫css重置呢。

　　你可以copy Eric Meyer Reset, YUI Reset或其它c(diǎn)ss reset, 但你接下來應(yīng)該根據(jù)你的項(xiàng)目改成你自己的reset.

　　不要使用* { margin: 0; padding: 0; } 。我個(gè)人很愛用，原作者提到使用這句并不適用一些元素比如單選按鈕。不過俺博客里面也沒有單選按鈕，如果有，又重新給單選按鈕重設(shè)就好了嘛。

　　2. 按字母順序來排列css

　　不按字母順序排的

　　div#header h1 {

　　z-index: 101;

　　color: #000;

　　position: relative;

　　line-height: 24px;

　　margin-right: 48px;

　　border-bottom: 1px solid #dedede;

　　font-size: 18px;

　　}

　　按字母順序排的

　　div#header h1 {

　　border-bottom: 1px solid #dedede;

　　color: #000;

　　font-size: 18px;

　　line-height: 24px;

　　margin-right: 48px;

　　position: relative;

　　z-index: 101;

　　}

　　理由是這樣可以更好的找到某個(gè)屬性。個(gè)人覺得還好，差別也不是太大。不過也許會(huì)適合你。

　　3. 更好的組織css結(jié)構(gòu)

　　使用css注釋來分給css分組，這樣結(jié)構(gòu)明了，也有利于協(xié)同設(shè)計(jì)。

　　/*****Reset*****/

　　xxxxxxx{xxxxx}

　　xxxxx{xxxxx}

　　/*****layouts*****/

　　xxxxxxx{xxxxx}

　　xxxxx{xxxxx}

　　4. 保持一致性

　　不要無意義的去討論到底一個(gè)選擇器的所有屬性寫在一行，還是每個(gè)屬性寫一行比較好。你自己覺得ok就好。

　　iv#header { float: left; width: 100%; }

　　div#header div.column {

　　border-right: 1px solid #ccc;

　　float: rightright;

　　margin-right: 50px;

　　padding: 10px;

　　width: 300px;

　　}

　　div#header h1 { float: left; position: relative; width: 250px; }

　　比如我個(gè)人就喜歡寫在一行，因?yàn)槊颗艑懸恍袝?huì)讓整個(gè)文檔感覺太長(zhǎng)了，找起來不方便。如果你喜歡寫一行，但是發(fā)給team的另一個(gè)，他卻喜歡每排一行，那怎么辦？其實(shí)很簡(jiǎn)單，把css拿去w3c驗(yàn)證，它會(huì)有一份結(jié)果，會(huì)自動(dòng)轉(zhuǎn)換成每排一行。

　　5. 先標(biāo)記后css

　　這個(gè)我沒有太看懂。大概理解是對(duì)html的標(biāo)記弄好后再寫css會(huì)比較不容易出錯(cuò)。比如我寫一個(gè)頁面，先寫一個(gè)最基本的標(biāo)記結(jié)構(gòu)

　　!<--end footer--="">

　　然后就是盡量善用子選擇器，而不是一要給哪個(gè)元素進(jìn)行樣式化，就給它添加個(gè)選擇器。

【css 書寫技巧 CSS 技巧教程簡(jiǎn)介】相關(guān)文章：

css屬性定位教程07-23

CSS入門教程01-25

CSS閉合浮動(dòng)元素教程06-26

CSS入門知識(shí)-圖片水平對(duì)齊技巧07-20

CSS選擇器教程06-05

CSS教程之盒模型10-17

關(guān)于網(wǎng)站制作css書寫規(guī)范02-26

關(guān)于CSS教程:復(fù)合型條狀圖表01-25

CSS基礎(chǔ)教程之背景圖片07-31

CSS-層疊樣式表基礎(chǔ)教程08-10