CSS重置默認樣式reset.css代碼模板


     由於各大瀏覽器存在兼容性問題,同一個CSS屬性在不同瀏覽器下的表現不一定相同,有經驗的前端設計者都會自定義一個重置瀏覽器樣式的CSS文件,在這個文件中定義一些針對不同的瀏覽器最終表現出一致的代碼,大家最熟悉的也許就是* {margin:0 0}了,其實這是最簡單的兼容性的代碼,一般情況下,僅有這個是不夠的,因此筆者收集了幾個前端設計網站使用的reset.css代碼模板,如果需要你可以復制這些代碼保存為reset.css文件,然后引用在所需的html文件中即可。

  注意:您可以根據您自己的實際情況去修改代碼中選擇器的定義,如果確定用不上代碼中對某些選擇器的定義,可以刪除掉

代碼01:

body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial,"微軟雅黑";
    font-size: 12px;
    color: #434343;
}
.clear {
    clear: both;
    font-size: 0px;
}
ul,li {
    list-style: none;
}
img {
    border: none;
}
/*一般鏈接*/
a {
    text-decoration: none;
    color: #555;
}
a: hover {
    color: #3366ff;
} 
代碼01

代碼02:

@charset 'utf-8';
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
margin:0;
padding:0
}
fieldset,img {
border:0
}
img {
display:block
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal
}
ul,ol {
list-style:none
}
input {
padding-top:0;
padding-bottom:0;
font-family:"SimSun","宋體"
}
input::-moz-focus-inner{
border:0;
padding:0
}
select,input{
vertical-align:middle
}
select,input,textarea{
font-size:12px;
margin:0
}
input[type="text"],input[type="password"],textarea{
outline-style:none;
-webkit-appearance:none
}
textarea{
resize:none
}
table{
b order-collapse:collapse
}
代碼02

代碼03:來自Eric Meyer網站

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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
: focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote: before, blockquote: after,
q: before, q: after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
代碼03

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM