由於XHTML+CSS是自己自學的，所以有的地方術語不太對的地方，各位酷友要提出來啊。
一、自己總結的公用樣式解析
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5,h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0;padding: 0; }
img { border: 0 none; vertical-align: top; }
ul, li { list-style-type: none; }
h1, h2, h3, h4, h5, h6 { font-size: 14px; }
body, input, select, button, textarea { font-size: 12px;font-family: Tahoma, Geneva,sans-serif; }
button { cursor: pointer; }
i, em, cite { font-style: normal; }
body { background: #fff; color: #363636; line-height: 1.2;}
a, a:link { color: #222; text-decoration: none; }
a:visited { }
a:active, a:hover { text-decoration: underline; }
a:focus { outline: none; }
.fixed:after { content: "."; display: block; clear:both; height: 0; visibility: hidden; }
.fixed { display: block; min-height: 1%; }
*html .fixed { height: 1%; }
.clear { display: block!important; float: none!important;clear: both; overflow: hidden; width: auto!important; height: 0!important;margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }
.more { float: right; }
.more a {font-weight: normal; font-size: 12px; }
.fl, .fr { display: inline; float: left; }
.fr { float: right; }
這是我做網頁製作近三年來經過參考和自己研究出來的公用樣式，大體就是這樣，樣式會根據網頁具體的效果進行微調。
注：在這裏寫這些註解就是爲了讓剛接觸到CSS的朋友明白一些東西 不至於繞彎路，知道這些代碼都是怎麼回事的就可以跳到第三條了，可能寫的有些囉嗦。呵呵！
第一行html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form,input, select, button, textarea, iframe, table, th, td 樣式大家應該都明白這樣是把原先的選擇器自帶的外填充和內填充去掉歸0
也許有人還在用“ * ” 通配符，但是這樣是有缺點的 會讓代碼變得冗餘尤其是子父級嵌套關係越深越麻煩，建議大家要儘量減少使用，在這裏建議大家多使用我在第一行裏寫的通用樣式，可能選擇器還比較少，但是我日常用到的選擇器就這麼些，如果大家有用到 pre fieldsetblockquote 這些選擇器或是其他的選擇器 一樣可以寫到裏面。
第二行裏 img 圖片標籤的樣式 大家是各有不同，目的都是一個讓瀏覽器裏默認圖片是沒有邊框的，還有ie6裏圖片底部出現的空白間隔消失掉。有的愛用 display:block;border: none;
但是這樣寫的話，都會有這樣或那樣的缺點，display: block; 這樣寫的話 你要讓圖片左右居中於一個盒子內的時候 你怎麼辦？ margin: auto; 這樣嗎？但是你要讓外面的盒子有一個實際的寬度，如果是換成vertival-align: top; 或是 vertival-align: middle; 的話那麼這個實際的寬度就不必寫了，只用加一個 text-align: center; 圖片也不用加外填充了。
還有就是有的酷友會奇怪我寫的 border: 0 none; 這裏要寫 0 再加一個 none，這個問題我還是想說一下是因爲我在寫文本框 input 的時候，發現在不同的 windows 系統外觀下，你光寫border: none 或是 border: 0; 都不行，文本框的邊框還是在的，所以就必須寫 border: 0none; 這個習慣也就留到了img 上，所以大家還是可以寫成 border: none; 但是寫 input 的時候，要邊框沒有的時候還是要寫 border: 0 none;
第三行 ul, li 裏就不用解釋了吧，大家都明白怎麼回事。
第四行h1, h2, h3, h4, h5, h6 還是根據要搭的頁面標題字體大小來修改，或是把 h1 h2 h3 h4 這些選擇器分開來寫各自的字體大小。
第五行body, input, select, button, textarea 是因爲我搭頁面的時候發現ie6裏的文本框和下拉菜單等... 裏的字體大小不是正常的12號字體，所以在兼容性上不是很完美，所以我就寫了字體的大小爲12號，然後在 firfox 裏這些標籤的字體默認又是宋體，所以我就又寫上了字體，然後 body 也要寫字體大小和大小，所以就在 input 的前面加上了 body，所以後面就不用再寫了。
第六行 button 這個按鈕的鼠標觸發屬性是默認的箭頭，在用戶體驗上不是特別好，所以我把鼠標觸發的屬性改成了小手。
第七行就是在寫一些不是特別重要 或是裝飾的標籤時我就是用到這些選擇器 由於他們都有文字的默認屬性，所以我去掉了，在用到的時候不至於出問題。
第八行 body 寫背景色 是因爲有的 windows 系統外觀會把瀏覽器背景色也改成別的色，所以爲了不會問題，就加上背景白色了，然後再加上文字顏色，字體大小和字體我在前面已經寫了。
第九行到第十一行 a:link 這些大家寫的都差不多吧?
第十二行 點擊鏈接時出現的虛線框消失，就是消除焦點。（描述不太專業，見諒！）
在下面我寫了 .fixed 和 .clear 這兩個清除浮動的樣式
具體這兩個我都用在什麼地方呢？我畫了兩張示意圖看了後 大家就會明白了！
.fixed 的例子
.clear 的例子
還有就是講解一下關於 .clear 裏面很多屬性我要寫 !important 的問題
因爲我們在寫子級盒子浮動的時候 肯定會寫到 float: left; margin或是 padding，還有 width 等等，我也在 .clear的屬性裏把儘可能會發生衝突的屬性加了!important，瀏覽器就會把這些屬性的優先級排到最前，並且ie6也是支持讀取!important的，大家會想到，ie6瀏覽器只要讀到相同的屬性，以最後的屬性爲優先級，但是他是對於在同一樣式內的，而不是同一樣式內的屬性他就不會以最後的屬性爲優先了 看下面這段代碼
大家看完這兩段代碼後就會明白了！
.more 這個樣式 搭頁面的過程中欄目或是標題欄肯定會有更多這個鏈接，所以我就在前面加了這個樣式，在後面就減少了 float: right 這個屬性，這個的意義不是很大。
.fl .fr 這兩個我是在一些需要向左或是向右浮動的盒子上附加的，這樣寫靈活性很高，也可以省掉一部分css代碼。
二、講一些自己對ie6瀏覽器顯示bug的一些兼容樣式
我想現在大家都在用 jquery 或是其他一些的js框架吧？
我們在用到這些框架開發出的燈箱相冊時（就是點擊圖片後 圖片彈出 圖片與網頁之間有一層遮罩類的）。
有的燈箱相冊代碼寫的不是很完善，例如：ie6下，當內容的高度不足以撐滿整個頁面時，再點擊相冊中的一張圖片時，我們發現圖片後面的遮罩層並沒有把整個瀏覽器佔滿。
如下圖：
這時候我們會想到要不要換一個代碼來用，但是這個相冊代碼除了遮罩這個外其他都很完善，找不到其他的完善的相冊時。我們怎麼辦？
下面就是我寫的css 解決方案！瀏覽器分辨率目前測試最高的是1050px。
代碼如下：
*html body { overflow-x: hidden; position: relative;height: 99%; margin-top: -1.5%; padding-top: 1%; }
*html { padding-top: 1.5%; }
接下來我來做一下解釋
overflow-x: hidden; position: relative; margin-top: -1.5% 這三個屬性是爲了讓高度爲 99%的時候不在右側出現滾動條，而padding-top:1%; 這個是爲了讓在高分辨率顯示器下右側不出現滾動條
而 *html { padding-top: 1.5%; } 則是爲了添補上面樣式中寫到的 margin-top: -1.5%; 這個負值。
大家可以在用jquery或是其他js框架的開發出來有缺陷的代碼中測試一下這段代碼
三、寫css時和程序員之間的溝通
各位酷友在搭完頁面後與程序員溝通時會有些小問題。
注：下面的建議裏寫的都是關於和asp.net程序員之樣式命名的問題。
例如我們在寫子級樣式時，會這樣寫：.wraper form {}，這樣寫的時候，我們要考慮這個頁面內有沒有分頁之類的代碼了，因爲asp.net程序員會在有分頁的頁面內加一個 form 控件 這樣我們寫在裏面的form 就會被去掉，所以我們要把.wraper form {}改成.wraper.formWraper {} 就可以，這樣問題就會解決了
還有就是複選框和單選框的地方。
類似於這樣的寫法在asp.net裏 大部分程序員還是愛拿服務器控件，輸出到前臺頁面後，就會變成
變成這樣後，前臺頁面就會變亂，所以我們碰到類似的情況時還是要更改一下寫法
還有一個就是 button {}
在asp.net 裏也會用到服務器控件，輸出到前臺，就會就成 
這樣的話 我們的樣式又無效了，所以要給這個按鈕起一個樣式名，而不能用選擇器，例：.message_btn {}
差不多就這些問題。以後有了會繼續更新的！
四、一些自己對大家的建議。
由於自己是自學的css樣式，還有就是沒有英語基礎，所以在這裏建議和我一樣也沒有什麼英語基礎的也在自學或是有一部分基礎的酷友們在寫樣式的時候儘量手寫，不要用軟件自帶的聯想功能，當你沒有這個軟件的時候，你就會有些困難了，還有就是樣式的名稱儘量用英文，就算你不明白這個名字是什麼意思，也可以先翻譯一下，知道大概的意思，以後用的多了自然也就知道是什麼意思了，對於以後學習其他的東西是有幫助的。
推薦剛剛學習和有了一部分基礎的酷友們一本CSS的進階書籍，精通CSS：高級Web標準解決方案 這本書的封面是青灰色的。大家可以上網看看！
呃.. 這就是目前自己寫的一些心得吧，寫的比較亂，也比較囉嗦，如果文章內有錯誤的地方，請大家提出，我會盡快修改，和大家一起進步，一起學習！
轉載地址：http://www.zcool.com.cn/article/ZMTY5ODg=.html