分享 | 我的reset.css是這麼寫的

今天aj問我,要怎麼製作reset.css?
我才想到原來我一直沒有釋出reset.css的檔案給大家,文章只有兩篇相關介紹文而已。
所以我決定把我自己在使用的reset.css分享給大家,順便簡單說明我是怎麼設定的 :)

想使用的朋友,直接抓取以下的css語法即可。

reset.css 語法

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
img {border: 0;}
:focus {outline: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}

input, button, textarea,select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {font-size: 100%;}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {*font-size: 100%;}
body {line-height: 180%;}
ol, ul, li {list-style: none;}
:link, :visited , ins {text-decoration: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

在這個重製表裡頭,我主要的設定就是將整張網頁,包含圖層、表格、項目符號...等的邊界都設成「0」,為的是讓所有瀏覽器在初始條件下完全相等。
此外還有把每個人的字體都調成100%,同樣是讓瀏覽器環境相等。

接著是網頁的按鈕元素,在字體大小、顏色、樣式....等地方我都設定了「inherit」這個繼承屬性,他可以用來繼承父元素的設定。如果不懂繼承的概念,可以參考CSS選擇器說明裡頭第四點:子選擇器,有稍微提到繼承的意思。

重製表主要就是要解決瀏覽器之間的不同,所以我做的設置大概是這樣。

重製表的製作很簡單,只要抓住一個概念,他是為了要讓網頁在一開始,在所有瀏覽器都長得一模一樣。只要抓住這個原則就好了~

有關其他重製表的介紹,可以參考以下兩篇文章:
1. 快速寫好css的五種方法 (在第一點有提到css重置)
2. 打造自己的reset.css

最後請再容許我打一下廣告:我的書上市啦!!!
「親手打造部落格的家:WordPress架站、管理、經營」

引用網址:

EVERYBODYs COMMENT:

  • ajneok
    1
    ajneok (LV.22) // 2010.02.06 02:30

    阿~媽我上某作者的BLOG了~媽我在第一行~~((揮手

    謝謝 muki

  • Arno Ruan
    2
    Arno Ruan (LV.176) // 2010.02.06 09:42

    諾的Reset在電腦機殼前方...

  • 生蛋
    3
    生蛋 (LV.2) // 2010.02.07 21:48

    @ ajneok
    我可以插花嗎一一

  • 獨夜
    4
    獨夜 (LV.9) // 2010.02.08 12:45

    夜沒有Reset


  • LEAVE YOUR COMMENT:




    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:
     
    字體大小: 小字型 12px大字型 15px
    ▲ back to top