1. 程式人生 > >CSS RESET —— 瀏覽器樣式重置

CSS RESET —— 瀏覽器樣式重置

ack tex 1.5 現實 兼容性 add body blog 高效

CSS Reset

1. CSS Reset為什麽存在?

只要您的客戶存在使用不同瀏覽器(ie,firefox,chrome等)的可能,那你就不得不從完美的理想狀態回到現實,因為不同核心的瀏覽器對CSS的解析效果呈現各異,導致您所期望的效果跟瀏覽器的“理解”效果有偏差,今天提到的css reset就是用來重置(復位)元素在不同核心瀏覽器下的默認值,盡量保證元素在不同瀏覽器下的同一“起跑線”。
——引用自關於CSS Reset


2. CSS Reset該怎麽寫?

CSS reset(css重置)基本上是不需要的,至少可以說80%的的CSS reset都是沒有必要的,反而增加了頁面CSS
的重寫,尤其像*{margin:0;}的做法更是要不得(反而破壞了很多UI的兼容性,比如說單復選框等)。我不是一概鄙棄CSS
reset,有些常用標簽我也是會簡單重置一下的,而且會避免overwrite(樣式重寫),以保證樣式最精簡,渲染最高效
——摘錄自張鑫旭的這篇文章我是如何對網站CSS進行架構的


個人理解:
對於不同的項目的CSS Reset也會有變化。CSS Reset應當是個人積累的經驗的總結,重置一些經常使用的,在不斷學習中修改。
那作為初學者該如何寫呢? 首先可以參考一些網站的CSS RESET(參考第三點),切不可復制過來直接用。應當像砌墻一樣,一塊磚一塊磚的積累。當你覺得你每次都要寫這個重置樣式,那就加進你的CSS Reset表吧。


3. CSS Reset 示例

3.1 tmall,淘寶商城

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,
form,fieldset,legend,button,input,textarea,th,td  {margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5     tahoma,arial,\5b8b\4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:courier new,courier,monospace;}

small{font-size:12px;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}

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

  

3.2 tudou,土豆網

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}

body{color:#000;background:#fff;font-size:12px;line-    height:1.25;font-family:tahoma,arial,\5b8b\4f53,sans-serif}

th,td{text-align:left;vertical-align:top}

h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}

p{margin:0 0 1em 0}

blockquote{margin:0 0 1em 0}

a{color:#14647d;text-decoration:none;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:arial,sans-serif}

a:hover{text-decoration:underline}

img{display:block;border:0}

li{list-style:none}

ol{padding:0 0 0 2em}

input,label,select,option,textarea,button,fieldset,legend{font-size:1em;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:Arial,sans-serif}

input[type=text],textarea{-webkit-appearance:none;-webkit-border-radius:0;outline:none}

input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:3px 2px;height:14px}

input.radio,input.checkbox{margin-right:2px;vertical-align:-2px}

input.radio,input.checkbox{margin-left:-2px}

label.radio,label.checkbox{margin-right:5px}

textarea{border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:1px;resize:none}

  

3.3 sohu,搜狐網

/* 全局CSS定義 */
body{font-family:’宋體‘;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}

body > div{text-align:center;margin-right:auto;margin-left:auto;}

div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}

img,a img{border:0;margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}

ul,ol,li{list-style:none}

table,td,input{font-size:12px;padding:0}

/* 默認鏈接顏色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}

  

CSS RESET —— 瀏覽器樣式重置