本css重置参考了normalize.css、bootstrap等,然后根据自己多年的经验进行了一些简单的整理并修改,以更适合自己目前的使用及一些大型项目的使用。
总的来说本css重置包括了三大部分,第一部分是常用的东西(包括常用元素及表单元素),第二部分是html5&css3,第三部分属于非常用标签,如果你对本css重置感兴趣的话,也可以根据你自己的项目需要对第二部分和第三部分进行删除。下面我再说下本重置的一些特色。
第一,标题部分采用的是line-height来实现标题于文字的间距,根据中英文有别,一般我们在实际项目中h2的大小为14px,高度为30px的居多。而如bootstrap或normalize.css面对的都是英文字体,所以他们默认设置的字体比中文的要大,且间距也比较大。
第二,根据我们常用的需求给ul添加了两个class样式,一个为has-style,顾名思义是拥有列表样式,因为我们在一开始重置了没有样式,但是偶尔有些时候我们又确实需要那个前面的小圆点,所以就有了这个class来还原;另一个为inline-style,即li浮动,不过一般和clearfix结合使用以清除浮动。
第三,对于normalize.css不支持的ie6,我们添加了class以支持。因为ie6不支持属性选择器,所以form表单元素的一些重置,我们在normalize.css基础上添加了class以支持。
第四,你可以根据自己的需要把你用不到的html5&css3或非常用标签的那部分直接删掉,以精简。
当然有些喜欢鱼,而有些人更喜欢渔,如果你是后者,那么可以看看normalize.css,那里有更多的代码注释给你明确的说明。
@charset "utf-8"; /* ------------------------------------------------- * reset css * copyright: www.w3cplus.com * author: 为之 * ------------------------------------------------- */ html{ height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing:antialiased; } body,button,input,select,textarea{ font:12px/1.5 tahoma,arial; } body{ margin:0; padding:0; background-color:#fff; min-height:100%; height:auto !important; height:100%; text-align:center; color:#404040; } h1,h2,h3,h4,h5,h6,p,figure,form{ margin:0; } table{ border-collapse:collapse; border-spacing:0; } img{ border:0; vertical-align:middle; -ms-interpolation-mode: bicubic; } a{ text-decoration:none; color:#29B4F0; } a:focus { outline: thin dotted; } a:hover{ color:#017CB9; text-decoration:underline; } /* hn */ h1{ font-size:16px; line-height:36px; } h2{ font-size:14px; line-height:30px; } h3{ line-height:24px; } h3,h4,h5,h6{ font-size:12px; } /* ul ol dl */ ul,li,ol{ margin: 0; padding:0; list-style: none outside none; } ul.has-style li,ol li{ margin-left:25px; } ul.has-style li{ list-style:disc; } ol li{ list-style:decimal; } ul.inline-style li{ float:left; display:inline; } dl{ margin-bottom: 18px; } dt{ font-weight: bold; } dd{ margin:0 0 0 9px; padding:0; } svg:not(:root) { overflow: hidden; } /* clearfix */ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ zoom:1; } /* ------------------------------------------------- * form * ------------------------------------------------- */ button,input,select,textarea{ margin: 0; outline: 0 none; vertical-align: baseline; *vertical-align: middle; } textarea{ overflow: auto; vertical-align: top; resize:none; } button,input{ line-height: normal; } button, html input[type="button"], input[type="reset"], input[type="submit"], .submit-btn{ -webkit-appearance: button; cursor: pointer; *overflow: visible; } button[disabled], input[disabled], .disable{ cursor: default; } input[type="checkbox"], input[type="radio"], .form-radio, .form-checkbox{ box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } fieldset{ border: 1px solid #c0c0c0; margin: 0 2px 18px; padding: 0.35em 0.625em 0.75em; } legend{ border: 0; padding: 0; white-space: normal; *margin-left: -7px; } button::-moz-focus-inner, input::-moz-focus-inner{ border: 0; padding: 0; } /* ------------------------------------------------- * css3 & html5 * ------------------------------------------------- */ /* html5 */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{ display: block; } audio,canvas,video{ display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]){ display: none; height: 0; } nav ul, nav ol { list-style: none; list-style-image: none; } input[type="search"]{ -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{ -webkit-appearance: none; } :-moz-placeholder, ::-webkit-input-placeholder{ color: #999; } /* ------------------------------------------------- * 非常见标签 * ------------------------------------------------- */ abbr[title]{ border-bottom: 1px dotted; } b,strong{ font-weight: bold; } blockquote{ margin: 1em 40px; } dfn{ font-style: italic; } mark{ background: #ff0; color: #444; } code,kbd,pre,samp{ font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre{ margin: 1em 0; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q{ quotes: none; } q:before, q:after{ content: ''; content: none; } small{ font-size: 80%; } sub,sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup{ top: -0.5em; } sub{ bottom: -0.25em; }