CSS重置样式和公共样式

╰+攻爆jí腚メ 2022-10-11 01:08 214阅读 0赞

有时候需要写几个简单的活动页面，但是浏览器的默认样式并不是我们想要的，各个浏览器的样式还都不一样；这时候就需要对样式进行重置，写一些公共的样式，来兼容各个浏览器的默认样式了。以下是一些参考：

@charset 'utf-8';
    
    html{ color:#333;background:#eee;font-family:Arial,'Microsoft Yahei';}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{ padding:0;margin:0;font-family:Arial,'Microsoft Yahei';}
    table{ border-collapse:collapse;border-spacing:0;}
    fieldset,img{ border:0;}
    a{ text-decoration:none; color:#33c; outline:none;}
    var,em,strong{ font-style:normal;}
    address,caption,cite,code,dfn,em,strong,th,var, optgroup{ font-style:inherit;font-weight:inherit;}
    del,ins{ text-decoration:none;}
    li{ 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;font-variant:normal;}
    sup{ vertical-align:baseline;}
    sub{ vertical-align:baseline;}
    legend{ color:#333;}
    input,button,textarea,select,optgroup,option{ font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
    input,button,textarea,select{ *font-size:100%;}
    body{ -webkit-user-select:none;-webkit-text-size-adjust:none;-webkit-transform-style:preserve-3d;}
    *{ -webkit-tap-highlight-color:rgba(0,0,0,0);}
    .clearfix:after { content:"\200B"; display:block; height:0; clear:both; }
    .clearfix {  *zoom:1; }
    
    .text-in {                
    	text-indent: 2em;
    }
    .text-center { 
    	text-align: center;
    }
    .text-right { 
    	text-align: right;
    }
    .cl-red { 
    	color: #e02525;
    }
    .cl-yellow { 
    	color: #ffec51;
    }
    .cl-white { 
    	color: #fef4de;
    }
    .cl-coffee { 
    	color: #a7660c;
    }
    .cl-blue { 
    	color: #06aaff;
    }
    .bg-white { 
    	background: #fff;
    }