CSS教程之重置默認樣式與IE兼容圓角的解決方法

小編這裏有一篇總結css reset以及IE兼容css教程3圓角的htc解決方法 ,屬於比較全面的文章,希望能對大家有所幫助。

CSS教程之重置默認樣式與IE兼容圓角的解決方法

  重置默認樣式

最近看到一個詞叫css reset。什麼叫做css reset呢?我理解爲重置css,也就是重置默認樣式。我在中講到,一些標籤元素在HTML下有一個默認屬性值,我們在寫css頁面的時候,爲了避免在css中重複定義它們,我們需要重置默認樣式(css reset)。每個人的用法和寫法都不一樣。找到一篇關於 可以看看國外使用css reset的比例調查。

接下來我也查看了國內的兩個網站,用Firebug按F12看看他們的css reset怎麼寫的?

淘寶():

html {

overflow-x:auto;

overflow-y:scroll;

}

body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {

font-weight:400;

margin:0;

padding:0;

}

h1, h2, h3, h4, h4, h5 {

margin:0;

padding:0;

}

body {

background-color:#FFFFFF;

color:#666666;

font-family:Helvetica,Arial,sans-serif;

font-size:12px;

padding:0 10px;

text-align:left;

}

select {

font-size:12px;

}

table {

border-collapse:collapse;

}

fieldset, img {

border:0 none;

}

fieldset {

margin:0;

padding:0;

}

fieldset p {

margin:0;

padding:0 0 0 8px;

}

legend {

display:none;

}

address, caption, em, strong, th, i {

font-style:normal;

font-weight:400;

}

table caption {

margin-left:-1px;

}

hr {

border-bottom:1px solid #FFFFFF;

border-top:1px solid #E4E4E4;

border-width:1px 0;

clear:both;

height:2px;

margin:5px 0;

overflow:hidden;

}

ol, ul {

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

caption, th {

text-align:left;

}

q:before, q:after, blockquote:before, blockquote:after {

content:"";

}

百度有啊():(架構基本上是模仿YUI來做的)

body {

font-family:arial,helvetica,sans-serif;

font-size:13px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:1.4;

text-align:center;

}

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {

margin:0;

padding:0;

}

h1, h2, h3, h4, h5, h6 {

font-size:100%;

font-weight:normal;

}

table {

font-size:inherit;

}

input, select {

font-family:arial,helvetica,clean,sans-serif;

font-size:100%;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:normal;

}

button {

overflow:visible;

}

th, em, strong, b, address, cite {

font-style:normal;

font-weight:normal;

}

li {

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

img, fieldset {

border:0 none;

}

ins {

text-decoration:none;

}

在《超越css》一書中建議我們做網站開始重置所有默認樣式:

/* Normalizes margin,padding */

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

/* Normalizes font-size for headers */

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

/* Removes list-style from lists */

ol,ul { list-style:none }

/* Normalizes font-size and font-weight to normal */

address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

/* Removes list-style from lists */

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

/* Removes border from fieldset and img */

fieldset,img { border:0 }

/* Left-aligns text in caption and th */

caption,th { text-align:left }

/* Removes quotation marks from q */

q:before,q:after { content:''}

那我們實際寫代碼的時候該怎麼來css reset呢?

我個人推薦使用(和)的 css reset

Eric Meyer's Reset:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

YUI:

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;

}

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;

}

ol,ul {

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;

}

結合他們的'css reset寫法,再根據自己的實際情況,一定能寫出符合自己網站的完美的css reset。