搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 HTML/CSS 語法 使用 CSS RESET 幫您解決各個瀏覽器CSS預設值差異的問題 ...
byadmin 發表於 2013-6-4 21:48:52 , 4768人已閱讀 , 0人回應
css-reset.png

其實有學過網頁設計的朋友應該都知道 , 每個瀏覽器其實都有他們預設的一些CSS設定 , 因此我們在設計網頁撰寫CSS的時候經常會發現 , 怎麼每個瀏覽器看到的都有些不一樣 , 例如預設的框限 、內距、外距以及各種標籤樣式 。要解決這個問題 , 我們必須要在撰寫CSS樣式前 , 先幫每個瀏覽器穿上相同的衣服 , 之後再開始幫他們美化 , 就可以將他們外觀差距縮到最小 (因為即便是reset後還是會有非常些微的不一樣) , 這就是CSS Reset最大的用意了 ~

下面引用一下小魚老師所撰寫的CSS RESET , 裡面有很詳細的註釋 , 幫助了解這些RESET值的意義:
  1. @charset "UTF-8";
  2. <span style="line-height: 1.5;">/*</span>
  3. Fishbecat Reset CSS
  4. (c) 2008, 小魚扮貓 http://www.fishbecat.com/
  5. Based on YUI http://developer.yahoo.com/yui/reset/ and Eric Meyer http://meyerweb.com/eric/tools/css/reset/
  6. version: 1.2 | create: 20080901 | update: 20101127
  7. */
  8. /*將有內距外距的元素歸零,避免不同瀏覽器內外距不同而錯位*/
  9. body, h1, h2, h3, h4, h5, h6, p, blockquote, th, td, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea {
  10.         margin: 0;
  11.         padding: 0;
  12. }
  13. /*重置頁面基本字型大小及行高*/
  14. body,td,th {
  15.         font-family: Verdana, Geneva, sans-serif;
  16.         font-size: 100%;
  17.         line-height: 1;
  18. }
  19. /*將標題的字型大小及粗細都重置*/
  20. h1, h2, h3, h4, h5, h6 {
  21.         font-size: 100%;
  22.         font-weight: normal;
  23. }
  24. /*將影像及欄位集的邊框歸零*/
  25. img, fieldset {
  26.         border: 0;
  27. }
  28. <span style="line-height: 1.5;">/*將清單樣式清除,其實只要list-style: none就好了,後面都是為了特定瀏覽器*/</span>
  29. ol, ul {
  30.         list-style: none;
  31. }
  32. <span style="line-height: 1.5;">/*將表格的邊框設定為結合,小魚覺得分離好醜;其實一行就夠了,第二行是為了特定瀏覽器*/</span>
  33. table {
  34.         border-collapse: collapse;
  35.         border-spacing: 0;
  36. }
  37. /*重置表格註解及標題儲存格的對齊*/
  38. caption, th {
  39.         text-align: left;
  40. }
  41. /*將連結、底線重置;其實應該要再加上一個 del 刪除線的,但小魚常常用del就不重置了*/
  42. a, ins {
  43.         text-decoration: none;
  44. }
複製代碼
想了解更詳細CSS RESET 歡迎至 http://blog.fishsaut.com/2010/11/reset-css.html 觀看詳盡內容


(下載檔案含包含 fishbecat.resetCSS.1.2.css 以及壓縮版 fishbecat.resetCSS.min.1.2.css )


Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.110890 second(s), 44 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-29 22:51

回頂部