CSS code fragment: CSS Reset reset CSS

Article Introduction: This CSS reset reference to NORMALIZE.CSS, Bootstrap and so on, and then based on their years of experience to do some simple collation and modification to better suit their current use and some of the use of large-scale projects.

This CSS reset reference to normalize.css,Bootstrap and so on, and then based on their years of experience to do some simple collation and modification to better suit their current use and some of the use of large-scale projects.

In general, this CSS reset includes three parts, the first part is commonly used things (including commonly used elements and form elements), the second part is HTML5&CSS3, the third section belongs to the very label, if you are interested in this CSS reset, You can also delete the second and third parts according to your own project. Let me say some of the features of this reset.

First, the title part of the use of Line-height to achieve the title in the text spacing, according to Chinese and English, in general, we in the actual project H2 size of 14px, the height of the majority of 30px. And such as bootstrap or normalize.css face are all English fonts, so they default settings of the font than the Chinese to be larger, and the spacing is also relatively large.

Second, according to our commonly used requirements to the UL added two class style, one for Has-style, as the name implies is to have a list style, because we at the beginning of the reset has no style, but occasionally sometimes we do need that front of the dot, so there is this class to restore Another is Inline-style, that is, Li floating, but generally used in conjunction with Clearfix to clear the float.

Third, for normalize.css unsupported IE6, we added class to support. Because IE6 does not support property selectors, some resets of form form elements are added with class to support on normalize.css basis.

In the four, you can cut off the HTML5&CSS3 or the very label that you need according to your own needs to simplify.

Of course some like fish, and some people prefer fishing, if you are the latter, then you can look at normalize.css, where there are more code comments to give you a clear explanation.

2012-10-18 Update: Because Tahoma this font 12px looks really small, and then given the Helvetica performance in Apple's system, the Helvetica and Arial fonts are used by default, and Tahoma fonts are used for form elements. It's because the character is so weird that the form elements look pretty neat.

2012-11-06 Update: If your site is a blog class or need to paste code types will generally apply to the pre this element, so add the processing of the pre.

2012-12-20 update: According to soar feedback, inside the pre repeated, and then type for search style also a bit repetitive, and finally placeholder that to write alone, can not be merged together, thank you soar

@charset "Utf-8";
/* -------------------------------------------------
* Reset CSS
* -------------------------------------------------
*/
html{
height:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
}
body{
margin:0;
padding:0;
Background-color: #fff;
min-height:100%;
Height:auto!important;
height:100%;
Text-align:center;
Color: #404040;
font:12px/1.5 helvetica,arial;
}
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{
font-size:100%;
Font-family:tahoma;
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;
}
Input[type= "Search"]{
-webkit-appearance:textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
Box-sizing:content-box;
}
:-moz-placeholder{
Color: #999;
}
::-webkit-input-placeholder{
Color: #999;
}
/* -------------------------------------------------
* Very See label
* -------------------------------------------------
*/
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;
}