|
15、完成一個(gè)初步的CSS框架
之前提到了，樣式重置作為一個(gè)所有項(xiàng)目可以使用的共性存在，而不同的項(xiàng)目應(yīng)當(dāng)有其個(gè)性。當(dāng)然還有其他一些共性，不屬于樣式重置的部分，但同樣重要。再往下講就可以做一個(gè)CSS框架了。CSS框架所要考慮的內(nèi)容遠(yuǎn)比一個(gè)CSS Reset要考慮的多很多，這里只是點(diǎn)到為止，不做更多展開。
layout.css
首先除了reset.css之外要建立的layout.css，這里目前主要推薦放入.clearfix。清除浮動(dòng)很重要。但這不屬于樣式重置，放在布局當(dāng)中正合適。
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
此外，layout.css中還可以放入自己常用的布局，比如
#wrap{margin:0 auto;width:960px;}
之類的規(guī)則�？磦�(gè)人喜好而定。
typography.css
這里可以放置很多規(guī)則，非常重要的是以下三個(gè)：
:focus, a, ins
這三個(gè)是被重置掉的，但又很重要的內(nèi)容，建議在reset之后立即在typography中設(shè)定全站樣式，保持樣式統(tǒng)一。
ins可以單獨(dú)設(shè)置， :focus 最好設(shè)置成跟 :hover一樣，而a的樣式還是按照LoVe,HAte的法則來設(shè)置。
h1-h6系列也是之前被重置掉的。可以考慮在這里設(shè)置樣式。按站點(diǎn)特性來定。我個(gè)人是不喜歡全局定義hx系列的字體大小的，統(tǒng)一為100%我覺得挺好。
接下來要設(shè)置的是font-family屬性，可以參考 射雕的文章 。另外，小麥的文章 中提到，表單元素的字體在IE中都不能繼承父元素的字體，所以要單獨(dú)設(shè)置。
至于其他需要全局設(shè)置的，可以參考前文中的敘述，找到相應(yīng)的部分添加到typography.css中即可。這樣就可以在保證reset.css通用性的情況下，使不同的項(xiàng)目又有個(gè)性。盡量保證reset.css在所有項(xiàng)目中都是一樣的。有利于項(xiàng)目的開發(fā)。最后不要忘記在寫表格的時(shí)候加cellspacing="0" 來達(dá)到完美重置效果。
16、探討
文章寫的比較倉促，也受限與本人能力所限，只能寫到這里。歡迎留言探討，也可發(fā)郵件或上Twitter找我。以便進(jìn)一步完善這個(gè)reset。謝謝。
原文地址： http://shawphy.com/2009/03/my-own-reset-css.html
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2913841-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6472.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 打造自己的Reset.css [5] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 6 頁 打造自己的Reset.css [6]
