nettuts帶來(lái)的5個(gè)css書(shū)寫(xiě)技巧9(link)，簡(jiǎn)單翻譯一下它的中心思想。
你也許需要先了解什么是css重置。然后怎么樣寫(xiě)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ì )適合你。
使用css注釋來(lái)分給css分組，這樣結構明了，也有利于協(xié)同設計。
/*****Reset*****/xxxxxxx{xxxxx}xxxxx{xxxxx}/*****layouts*****/xxxxxxx{xxxxx}xxxxx{xxxxx}不要無(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ě)在一行，因為每排寫(xiě)一行會(huì )讓整個(gè)文檔感覺(jué)太長(cháng)了，找起來(lái)不方便。如果你喜歡寫(xiě)一行，但是發(fā)給team的另一個(gè)，他卻喜歡每排一行，那怎么辦？其實(shí)很簡(jiǎn)單，把css拿去w3c驗證，它會(huì )有一份結果，會(huì )自動(dòng)轉換成每排一行。
這個(gè)我沒(méi)有太看懂。大概理解是對html的標記弄好后再寫(xiě)css會(huì )比較不容易出錯。比如我寫(xiě)一個(gè)頁(yè)面，先寫(xiě)一個(gè)最基本的標記結構
<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è)選擇器。
聯(lián)系客服
