当前位置: 首页 > Web前端 > CSS

CSS重置样式

时间:2023-03-30 19:28:15 CSS

来看看各大网站新浪初始化的重置样式html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{保证金:0;padding:0}fieldset,img{border:0}img{display:block}address,caption,cite,code,dfn,th,var{字体样式:正常;font-weight:normal}ul,ol{list-style:none}input{padding-top:0;填充底部: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{border-collapse:collapse}京东初始化*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}我对样式重置的看法1.什么时候使用样式重置?1.其实每个网络网站的重置风格应该不同。2.当没有必要的样式或者样式会再次写入这个标签时,浏览器会重新渲染,所以尽量减少重置样式。3、合理灵活使用标签。网页中的某些样式完全相同。例如,所有或大部分文本p标签的字体样式和行高都相同,可以统一设置。包括其他标签,margin,padding,width,height,display,text-align等在大量使用的过程中可以统一设置,可以减少css样式,代码简洁,可读性强,可修改性强。2、如何重新设置样式?1、重置css可以整体调整整个网站的基本样式,比如大部分网页的字体样式、字体大小、字体颜色,以及最基本的有序列表和无序列表以及一个链接的样式。2.在一批首尾相同的样式中,我会把共同的样式放在重置样式表中。3、网站个别标签的样式也有特殊处理,比如我所有的a链接都应该是蓝色等。4、当一个样式需要大量使用时,主要会选择另一个类名对于需要这种风格的标签,比如flyLeft{float:left};,flyRight{float:right};从左向右浮动的样式,或清除浮动的样式。我的重置样式表body,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;}ol,ul{margin:0;padding:0;}li{list-style:none}input,button,textarea{padding:0;}/*另外:button和input有2px的边框,textarea和select有1px的边框,根据实际调整情况,或者去掉边框*/table{/*为表格设置合并边框模型*/border-collapse:collapse;/*设置表格边框之间的间距*/border-spacing:0px;}/*去除链接的下划线*/a{text-decoration:none;}a:hover{text-decoration:none;}/*个别浏览器兼容语义标签*/header,section,footer,aside,nav,main,article,figure{display:block;}h1,h2,h3,h4,h5,h6,em,i,b,cite{/*字体样式不是粗体*/font-weight:normal;font-style:normal;}a,input,button{/*清除点击阴影*/-webkit-tap-highlight-color:rgba(0,0,0,0);}body*{/*选择文本设置*/-weibkit-user-select:none;/*禁用文本缩放*/-webkit-text-size-adjust:100%;}