今天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:
LEAVE YOUR COMMENT: