技術(shù)分享 調(diào)用CSS Reset重設(shè)瀏覽器樣式
本文向大家描述一下CSS Reset的使用,CSS Reset即重設(shè)瀏覽器的樣式,但并不是所有的瀏覽器都使用一樣的數(shù)值,所以,有了CSS Reset,以讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)一致。
CSS Reset
CSS Reset即重設(shè)瀏覽器的樣式。在各種瀏覽器中,都會對CSS的選擇器默認(rèn)一些數(shù)值,譬如當(dāng)h1沒有被設(shè)置數(shù)值時,顯示一定大小。但并不是所有的瀏覽器都使用一樣的數(shù)值,所以,有了CSS Reset,以讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)一致。
正在使用CSS的你,用過CSS Reset嗎?當(dāng)然,或許你用了,卻不知道正在用,比如你可能用到:
viewsourceprint?
- 1*{
- 2padding:0;
- 3margin:0;
- 4border:0;
- 5}
這也是一種CSS Reset的方法,讓所有的選擇器的padding、margin和border都設(shè)置成0。這是一種強(qiáng)大的方法,也是最簡單,最安全的方法,不過,也是最占用資源的方法。對于小型的網(wǎng)站來說,用這個并不會帶來大的資源浪費(fèi),但如果是像Yahoo這種架構(gòu)非常大的網(wǎng)站,剛需要有選擇地進(jìn)行CSS Reset,以減少資源浪費(fèi)。下面是Yahoo的CSS Reset代碼,也是受最多人喜愛的CSS Reset方法,YUI選擇的方法是:
viewsourceprint?
- 01body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
- 02form,fieldset,input,textarea,p,blockquote,th,td{
- 03padding:0;
- 04margin:0;
- 05}
- 06
- 07table
- 08{
- 09border-collapse:collapse;
- 10border-spacing:0;
- 11}
- 12
- 13fieldset,img
- 14{
- 15border:0;
- 16}
- 17
- 18address,caption,cite,code,dfn,em,strong,th,var
- 19{
- 20font-weight:normal;
- 21font-style:normal;
- 22}
- 23
- 24ol,ul
- 25{
- 26list-style:none;
- 27}
- 28
- 29caption,th
- 30{
- 31text-align:left;
- 32}
- 33
- 34h1,h2,h3,h4,h5,h6
- 35{
- 36font-weight:normal;
- 37font-size:100%;
- 38}
- 39
- 40q:before,q:after
- 41{
- 42content:'';
- 43}
- 44
- 45abbr,acronym
- 46{
- 47border:0;
- 48}
OK,相信你也已經(jīng)了解了CSS Reset的目的,或許你也可以根據(jù)自己的喜好,寫一個自己的CSS Reset系統(tǒng),畢竟大家的需求和習(xí)慣的不同的。
【編輯推薦】
- 主流瀏覽器CSS Reset的方法
- 八個困擾新手的DIV CSS網(wǎng)頁布局問題
- 全面解析CSS優(yōu)先級規(guī)則
- 專家推薦 10款優(yōu)秀CSS框架
- 實(shí)例解析清除CSS float浮動的三種方法