一、自己總結的公用樣式解析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 { diplay: 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 fieldset blockquote 這些選取器 或是其他的選取器 一樣可以寫到裡面。第二行裡 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: 0 none; 這個習慣也就留到了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.simleangelfoundation.org/index.html新年到了，祝大家在新的一年裡，在各自的領域裡，取得更大的進步！本文由 站酷網 - sblqtd 原創，轉載請保留此資訊，多謝合作。
