The related concepts and examples of CSS reset

Source: Internet
Author: User

Original

The original Book of Jane: https://www.jianshu.com/p/fdb79010895c

Outline

1. What is CSS reset?
2. Example of CSS Reset

1. What is CSS reset?

Personal understanding: is to make different browser initialization CSS style Unified

1.1. In today's web design/development practice, it is important to use CSS to add style styles to semantic (X) HTML tags. There is a perfect world in the designers ' dreams: All browsers are able to understand and apply CSS rules and have the same visual effect (no compatibility issues). However, we do not live in this perfect world, the reality of the theft is always the opposite, many CSS styles in different browsers have different interpretations and rendering.

1.2. In today's popular browsers (such as Firefox, Opera, Internet Explorer, Chrome, Safari, etc.), some are in their own way to understand the CSS specification, This leads to the browser's interpretation of CSS and the designer's CSS definition of conflict, so that the appearance of the Web page in some browsers can be correctly displayed according to the designer's ideas, but some browsers do not follow the way the designer wants to display, which leads to browser compatibility issues. To make things worse, some browsers completely ignore some of the CSS's declarations and properties.

1.3, because the above conflicts and problems still exist in this "imperfect world", so some designers think of a way to avoid browser compatibility problems, that is, CSS Reset, what is the CSS reset? We can call it CSS Reset, others called CSS Reset, default CSS, CSS reset and so on. CSS reset is because the various browsers interpret the initial value of CSS style is different, causing the designer to not define a CSS property, different browsers will follow their own default values to the undefined style assignment, so we have to define some CSS style, To let all browsers interpret the CSS in the same way, so that this problem can be avoided.

2. Example of CSS Reset

The following CSS reset instances are I collected from the Internet, usually also according to the circumstances of the selection of one to use, readers can choose one according to their preferences to use, hoping to help readers.

2.1. The most simplified CSS reset (reset)
    /* This is the most common and simplest CSS reset, setting the padding and margin values of all elements to 0, which avoids the "divergence" of some browsers in understanding the default values of the two properties. (This method is not recommended, too rough */* {      padding:0;      margin:0;}
2.2. Csslab CSS Reset
/* Reference URL: http://blog.bingo929.com/css-reset-collection.html*/html, body, Div, 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, DL, DT, DD, OL, UL, Li, FieldSet, form, label, legend, table, caption, Tbody, t     Foot, THEAD, tr, TH, TD {Margin:0;     padding:0;     border:0;     outline:0;     Font-weight:inherit;     Font-style:inherit;     font-size:100%;     Font-family:inherit; Vertical-align:baseline;     }: Focus {outline:0;} table {border-collapse:separate; border-spacing:0;     } caption, Th, TD {Text-align:left; Font-weight:normal; } a img, iframe {border:none;} OL, ul {list-style:none;} input, textarea, select, button {font-size:10     0%; Font-family:inherit; } select {Margin:inherit;}/* Fixes incorrect placement of numbers in Ol ' s in IE6/7 */OL {Margin-leFt:2em;     }/* = = Clearfix = = */. Clearfix:after {content: ".";     Display:block;     height:0;     Clear:both; Visibility:hidden; }. clearfix {display:inline-block;} * html. clearfix {height:1%;}. clearfix {display:block;}
2.3, Zhang Xin Xu's css-reset
HTML, body, Div, span, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,ABBR, address, cite, Code,del, DFN, EM, I MG, ins, kbd, Q, Samp,small, strong, Sub, SUP, var,b, I,DL, DT, DD, OL, UL, Li,fieldset, form, label, Legend,table, Captio  N, Tbody, TFOOT, THEAD, tr, TH, td,article, aside, canvas, details, figcaption, figure, Footer, Header, Hgroup, menu, NAV,    section, Summary,time, mark, audio, video {margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    Vertical-align:baseline; Background:transparent;} Body {line-height:1;}:focus {outline:1;} article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;} Nav ul {list-style:none;} BLOCKQUOTE, q {quotes:none;}    Blockquote:before, Blockquote:after,q:before, q:after {content: '; Content:none;}    a {margin:0;    padding:0;    border:0;    font-size:100%;    Vertical-align:baseline; Background:transparent;} INS {background-color: #ff9;    Color: #000; Text-decoration:none;}    Mark {background-color: #ff9;     Color: #000;    Font-style:italic; Font-weight:bold;} del {Text-decoration:line-through;}    Abbr[title], Dfn[title] {border-bottom:1px dotted #000; Cursor:help;}    Table {border-collapse:collapse; border-spacing:0;}    HR {display:block;    height:1px;       border:0;    border-top:1px solid #cccccc;    Margin:1em 0; padding:0;} Input, select {Vertical-align:middle;}

  

The related concepts and examples of CSS reset

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.