YUI中的css

    這是YUI中reset.css的原始代碼。

html{}{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,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;}/**/ 
li{}{list-style:none;}
caption,th{}{text-align:left;}
h1,h2,h3,h4,h5,h6{}{font-size:100%;font-weight:normal;}
q:before,q:after{}{content:'';} 
abbr,acronym {}{border:0;font-variant:normal;}/**/ 
/**//* to preserve line-height and selector appearance */
sup {}{vertical-align:text-top;}
sub {}{vertical-align:text-bottom;}
input,textarea,select{}{font-family:inherit;
font-size:inherit;font-weight:inherit;}
/**//*to enable resizing for IE*/
input,textarea,select{}{*font-size:100%;} 
legend{}{color:#000;}

    首先，將常見的和容易理解的簡略的說一下。詳見注釋后的reset.css。

html{}{color:#000;background:#FFF;}/*設定html文檔的前景色和背景色*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,p,blockquote,th,td{}{margin:0;padding:0;}
/*所有的空白邊和內補丁設為0，因為瀏覽器默認有margin和padding且不盡相同。
我的一般做法是用一個*選擇器選擇所有的元素*{margin:0;padding:0;}*/
table{}{border-collapse:collapse;border-spacing:0;}
fieldset,img{}{border:0;}
input{}{border:1px solid #fff;}/**//*我自己添加的，加上這條語句，
所有的input的邊框樣式都會被重置*/
address,caption,cite,code,dfn,em,strong,th,var{}{font-style:normal;
font-weight:normal;}/**//*dfn可標記那些對特殊術語或短語的定義,將默認的斜體或粗體改為一般字體*/
li{}{list-style:none;}/*去掉列表符號*/
caption,th{}{text-align:left;}/*默認為居中顯示，改為居左*/
h1,h2,h3,h4,h5,h6{}{font-size:100%;font-weight:normal;}/*改成一般的字體樣式*/
q:before,q:after{}{content:'';}/**//*引用的前后不能有通過before和after偽類添加的內容*/
abbr,acronym {}{border:0;font-variant:normal;}/**//*abbr表示它所包含的文本是一個
更長的單詞或短語的縮寫形式，acronym表示包含的文本是一個首字母的縮寫詞*/
/**//* to preserve line-height and selector appearance */
sup {}{vertical-align:text-top;}
sub {}{vertical-align:text-bottom;}
input,textarea,select{}{font-family:inherit;font-size:inherit;font-weight:inherit;}
/**//*to enable resizing for IE*/
input,textarea,select{}{*font-size:100%;}
/**//*because legend doesn't inherit in IE */
legend{}{color:#000;}

    然后說說YUI中reset.css的重要知識點

1，table{border-collapse:collapse;border-spacing:0;}

border-collapse是表格邊框獨立屬性，當它設為separate時border-spacing為行和單元格的邊在橫向和縱向上的間距。
當border-collapse設為collapse時，設置border-spacing在firefox2中會有效果，而在ie6中沒有效果。

table { border-spacing: 10px;border:1px solid black; } td{border:1px solid #f00;}
Firefox2中	ie6中

2，fieldset,img{border:0;}
    img一般在作為a元素的子元素的時候會出現邊框，這里把它的邊框消零。而fieldset是將表單內容的一部分打包，
生成一組相關表單字段（html&xhtml權威指南）。在不同的瀏覽器 效果不盡相同。所以要將邊框消零。

fieldset{}  input{border:1px solid #000;}
ie6中	firefox2中

通過設定fieldset的border為0之后，效果有了很大的改變，你會看到我設了input的boder屬性為1像素的黑色實心邊框，
這是因為在ie6和firefox2中文本框的默認樣式也不相同。

fieldset{border:0;}  input{border:1px solid #000;}
ie6中	firefox2中

3，legend{color:#000;}
    legend不會繼承field的color屬性；所以要單獨設legend的文字顏色。

body{color:#0c0;} fieldset{border:0;color:#c00;}  input{border:1px solid #000;}
firefox2中	ie6中

4，input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/*to enable resizing for IE*/

input,textarea,select{*font-size:100%;}
    在瀏覽器中input，textarea（文本框），select（多選元素）中的字體都會比父元素的小。

ie6中	firefox2中

加入input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}會讓firefox2等標準瀏覽器中文
本框等的字體大小和父元素相同，加入input,textarea,select{*font-size:100%;}會讓ie6中文本框等的字體大小和父元素相同。

input,textarea,select{*font-size:100%;}	input,textarea,select{font-family:inherit; font-size:inherit;font-weight:inherit;}
ie6	firefox2中