preface

The reset.css document is a common cascading style sheet document, known as A CSS document. A website usually uses three CSS documents to set the style of the website. Reset style (reset.css)(resets the default CSS style); Common styles (common.css)(a series of pages sharing a shared style, such as bottom header style); Standalone styles (styles used separately for each page, such as index.css) This is specifically about resetting styles, but the other two styles are project-specific and don’t have a lot of prescriptive Settings.

directory

  • Why reset.css
  • How to use
  • Reset. CSS content description
  • conclusion

Why reset.css

There are some default values for HTML tags in different browsers, but each browser will render them differently, such as different margins, different font color sizes and line heights. In order to prevent this situation, the main purpose is to reduce code duplication, improve code reuse, improve development efficiency, reset the default style of each browser, and solve the coupling problems caused by it. Summary is high reuse, low coupling, small file.

How to use

Create a separate CSS document to store the reset styles, such as reset. CSS, which only stores the reset styles. There is no absolute standard document, many are written according to the specific needs of the project, I summarize just some very common reset style, can be applied to most projects, of course, it is best to understand. Each time I write reset.css according to the project requirements.

Reset. CSS specification

@charset 'utf-8';
/* All of these elements are recommended to be reinitialized */
body.div.dl.dt.dd.ul.ol.li.tr.td.th.h1.h2.h3.h4.h5.h6.hr.br.img.table.input.form.a.p.textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei'.'宋体';
}
/* Remove the list default */
ul.ol.li{
    list-style:none;
}
/* Remove the bottom line */
/* Change the a element to a block-level element, depending on the situation */
a{
    text-decoration:none;
    display:block;
}
/* the img tag clears the border. * /
/*display set block to block level element, default display:inline; There is an extra 4px in the bottom line, so block*/ is used
img{
    border:0;
    display:block;
}
/* Clear the float collapse problem */
/* Clear floating compatible IE*/
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
Copy the code

conclusion

To be more formal and to work well with people, reset.css is available. This document should be written at the very beginning of the project. If I ask if this document is necessary, I can say no, you can write whatever attributes you see in a stylesheet first, but writing this document will save you time and make your code better. Thank you very much!

  • Back to the top