CSS技巧教程-css書(shū)寫(xiě)技巧

2020-03-24 19:06:22

字體：大中小

供稿：網(wǎng)友

nettuts帶來(lái)的5個(gè)css書(shū)寫(xiě)技巧，簡(jiǎn)單翻譯一下它的中心思想。 1. CSS Reset/重置你也許需要先了解什么是css重置。然后怎么樣寫(xiě)css重置呢。你可以copy Eric Meyer Reset, YUI Reset或其它c(diǎn)ss reset, 但你接下來(lái)應(yīng)該根據(jù)你的項(xiàng)目改成你自己的reset. 不要使用* { margin: 0; padding: 0; } 。我個(gè)人很愛(ài)用，原作者提到使用這句并不適用一些元素比如單選按鈕。不過(guò)俺博客里面也沒(méi)有單選按鈕，如果有，又重新給單選按鈕重設(shè)就好了嘛。 2. 按字母順序來(lái)排列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è)人覺(jué)得還好，差別也不是太大。不過(guò)也許會(huì)適合你。 3. 更好的組織css結(jié)構(gòu) 使用css注釋來(lái)分給css分組，這樣結(jié)構(gòu)明了，也有利于協(xié)同設(shè)計(jì)。/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx} 4. 保持一致性不要無(wú)意義的去討論到底一個(gè)選擇器的所有屬性寫(xiě)在一行，還是每個(gè)屬性寫(xiě)一行比較好。你自己覺(jué)得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è)人就喜歡寫(xiě)在一行，因?yàn)槊颗艑?xiě)一行會(huì)讓整個(gè)文檔感覺(jué)太長(zhǎng)了，找起來(lái)不方便。如果你喜歡寫(xiě)一行，但是發(fā)給team的另一個(gè)，他卻喜歡每排一行，那怎么辦？其實(shí)很簡(jiǎn)單，把css拿去w3c驗(yàn)證，它會(huì)有一份結(jié)果，會(huì)自動(dòng)轉(zhuǎn)換成每排一行。 5. 先標(biāo)記后css 這個(gè)我沒(méi)有太看懂。大概理解是對(duì)html的標(biāo)記弄好后再寫(xiě)css會(huì)比較不容易出錯(cuò)。比如我寫(xiě)一個(gè)頁(yè)面，先寫(xiě)一個(gè)最基本的標(biāo)記結(jié)構(gòu) body
div id="wrapper"
div id="header" !--end #header--
div id="container"
div id="content"
/div !--end #content--
div id="sidebar"
/div !--end #sidebarr--
/div !--end #container--
div id="footer"
/div ! --end #footer--
/div !--end #wrapper--
/body 然后就是盡量善用子選擇器，而不是一要給哪個(gè)元素進(jìn)行樣式化，就給它添加個(gè)選擇器。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面

下一篇：HTML與CSS中的3D轉(zhuǎn)換模塊