How to reset styles in CSS? Implementation of CSS style reset effect (code example)

This article will introduce how to reset the effect using CSS styles. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When we are preparing to develop a project, we must consider the compatibility of some browsers, or it is more convenient to write a page by ourselves. Then many people will think of CSS reset at this time, and most people will do this. Write.

@charset "utf-8";
/* 使用重置样式表 */

html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;    
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote, q{
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after{
    content: '';
    content:none;
}
/* remeber to define focus styles! */
:focus{
    outline:0;
}
/* remeber to highlight inserts somehow */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

/* tables still need 'cellspacing="0" in the markup' */
table{
    border-collapse:collapse;
    border-spacing:0;
}

Note that you cannot write like this on some websites: *{margin:0;padding:0;}, this will waste a lot of performance

But just a lot of tags above Generally speaking, we also have a lot of things that we don't use, and some that are unnecessary. In some cases, just use these.

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} 

ol,ul{margin:0; padding:0;}

Okay, that's it for the reset!

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of How to reset styles in CSS? Implementation of CSS style reset effect (code example). For more information, please follow other related articles on the PHP Chinese website!