本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
15、完成一個初步的CSS框架
之前提到了，樣式重置作為一個所有項目可以使用的共性存在，而不同的項目應(yīng)當(dāng)有其個性。當(dāng)然還有其他一些共性，不屬于樣式重置的部分，但同樣重要。再往下講就可以做一個CSS框架了。CSS框架所要考慮的內(nèi)容遠(yuǎn)比一個CSS Reset要考慮的多很多，這里只是點到為止，不做更多展開。
layout.css
首先除了reset.css之外要建立的layout.css，這里目前主要推薦放入.clearfix。清除浮動很重要。但這不屬于樣式重置，放在布局當(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ī)則。看個人喜好而定。
typography.css
這里可以放置很多規(guī)則，非常重要的是以下三個：
:focus, a, ins
這三個是被重置掉的，但又很重要的內(nèi)容，建議在reset之后立即在typography中設(shè)定全站樣式，保持樣式統(tǒng)一。
ins可以單獨設(shè)置， :focus 最好設(shè)置成跟 :hover一樣，而a的樣式還是按照LoVe,HAte的法則來設(shè)置。
h1-h6系列也是之前被重置掉的?？梢钥紤]在這里設(shè)置樣式。按站點特性來定。我個人是不喜歡全局定義hx系列的字體大小的，統(tǒng)一為100%我覺得挺好。
接下來要設(shè)置的是font-family屬性，可以參考 射雕的文章 。另外，小麥的文章 中提到，表單元素的字體在IE中都不能繼承父元素的字體，所以要單獨設(shè)置。
至于其他需要全局設(shè)置的，可以參考前文中的敘述，找到相應(yīng)的部分添加到typography.css中即可。這樣就可以在保證reset.css通用性的情況下，使不同的項目又有個性。盡量保證reset.css在所有項目中都是一樣的。有利于項目的開發(fā)。最后不要忘記在寫表格的時候加cellspacing="0" 來達(dá)到完美重置效果。
16、探討
文章寫的比較倉促，也受限與本人能力所限，只能寫到這里。歡迎留言探討，也可發(fā)郵件或上Twitter找我。以便進(jìn)一步完善這個reset。謝謝。
原文地址： http://shawphy.com/2009/03/my-own-reset-css.html

最新評論