CSS combat notes (1): reset work before writing web pages

 

reset.css is a must-have style for every html, and there are codes for clearing various element attributes.

Why have reset.css

Let the CSS styles of each browser have a unified benchmark, such as clearing the margin, padding, etc. that each browser brings to the element. Examples of reset necessity:

 

Just write a div and find that its left and top have white gaps with the browser border:

  

After adding the code to clear margin and padding in css, the edge of the div fits perfectly with the browser:

            

 

The collection of all the codes used for element initialization (standardization) operations similar to those drawn by red lines , written in the reset.css file , can be loaded into each page, which is the web page reset process.

 

what to reset

The part of the unified standard in all pages of the web project, mainly including

• The inner and outer margins of each element (zero, it is necessary)
• The font used in the web project (font)
• clear float
• The font, color, underline or not of the link
• list reset
• =========

reset.css specific code

Organized from: http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html

/* *Remove inner and outer spacing* */ 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements */ 
dl, dt, dd, ul, ol, li, / * list elements list elements */ 
pre, /* text formatting elements */ 
fieldset, lengthend, button, input, textarea, /* form elements form elements */ 
th, td { /* table elements table elements */ 
    margin : 0 ; 
    padding : 0 ;
}

/* set default font */
body,
button, input, select, textarea { /* for ie */ 
    /* font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif; */ 
    font : 12px/1 Tahoma, Helvetica, Arial, "\ 5b8b\4f53", sans-serif ; /* represented in ascii characters, so no problem in any encoding */
}


/* *Image to border* */ 
img { border : none ;}

/* *Reset list elements, without. * */ 
li { list-style : none ;}

input,select,textarea{
    outline:none;
    border:none;
    /**针对ie6**/
    background:none;
}

textarea{resize:none;}


/**清除浮动**/
.clearfix:after {
    content:"";
    display:block;
    clear:both;
} 
.clearfix {
     /* * For ie6, activate clearing the float * */ 
    zoom : 1 ;
}

/* *Frequently used left and right floats* */ 
.fl { 
    float : left ;
}
.fr {
    float:right;
}

/**link的属性**/
a { text-decoration: none; }
a:hover { text-decoration: underline; }

 

Summarize

reset.css should be tailored for each web project to avoid code redundancy. Similar structure, modified content, selective use.

When looking for information, I saw the introduction of Normalize.css. Generally, I don’t want to reset.css one size fits all. Code it first: http://blog.teamtreehouse.com/applying-normalize-css-reset-quick-tip