Reset CSS - 取消 Html 原有樣式

在剛開始學 CSS 的時後, Html Tag 的原有樣式要取消是最頭大的, 正好看到 Yahoo! UI library 有 Reset CSS, 正好就是取消這些功能, 連 CSS 壓縮(濾空白, 合成一行等.)都做好了.

Yahoo! UI Library: Reset CSS

在取得檔案後, yui/build/reset 裡面有兩個檔案, reset.css 和 reset-min.css, reset-min.css 就是壓縮過的 CSS file.

使用方法:

1. 解壓縮後, 將 reset-min.css 拷到 css template path.
2. 改個名字~ mv reset-min.css reset.css (隨興囉~)
3. 在頁面 head 中加上 <link rel="stylesheet" type="text/css" href="reset.css" /> 這段語法即可.

reset.css file 內容也很簡單, 貼出來取用方便~

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

License: BSD License

詳可見: http://developer.yahoo.net/yui/license.txt

下面有另外做過中文處理的 CSS Reset

URL: http://tw.yimg.com/i/tw/hp/wd/lsm_generic.css

內容如下:

body { font-family:"Arial","MingLiU","PMingLiU"; font:"MingLiU","PMingLiU"; font-size:80%;margin:0 0 16px 0;padding:0;background:white; }
fieldset{border-width:0;padding:0;margin:0;}
input,select,option,textarea{font-family:"Arial","MingLiU","PMingLiU";}
h1,h2,h3,h4,h5,h6,th,blockquote,p,ul,li,form,fieldset{margin:0;padding:0;font-size:100%;font-weight:normal;list-style:none;}
th,td{text-align:left;font-weight:normal;}
em,strong,b,i,cite,ins,small,big,tr,tr,table,tbody,abbr,s,del,address,dfn,kdb,code,var,{font-size:100%;font-style:normal;font-weight:normal;text-decoration:none;}
a img{border:solid 0 red;}
a{color:#0000bb;}
a:visited{color:#3987C6;}
a:hover{color:red}
a:active{color:red}

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章