Browser default tag style summary and CSS initialization program

　　most of the tags in the HTML have some bad style, some of the tags naturally come with, some browser default settings, we are writing Web pages, these default styles will occasionally jump out of the mess, make us very helpless. So when you write a CSS style, you usually write a initialization program at the beginning to get rid of these default styles, such as the simplest square method is to use *{margin:0;padding:0;}. But usually we seldom use this method, because the wildcard * is very inefficient. Which method should we use, and the following bloggers will introduce some common methods for you.

First, browser default style summary

Before we introduce the initialization program, let's look at the default styles that are set for those tags, and we'll be better able to initialize the label style if we understand it clearly.

(i), label comes with style

Block-level element html, body, Div,ol, p, UL, H1, H2,h3,h4,h5, H6, Address,blockquote, form,dd,dl, DT, fieldset, frame, frameset,nofr Ames,center, dir, HR, menu, pre {display:block}//list element class li{Display:list-item}ol{list-style-type:decimal}ol UL, ul o L,ul UL, ol ol {margin-top:0; margin-bottom:0}ol, ul{margin-left:40px}//Pre-formatted text Class I, cite, Em,var, address{Font-style  : Italic}big{font-size:1.17em}small, Sub, sup{font-size:. 83em}sub{vertical-align:sub}sup{vertical-align:super}s, Strike, del{Text-decoration:line-through}u, ins{text-decoration:underline}//title class h1{font-size:2em; margin:. 67em 0} h2{font-size:1.5em; margin:. 75em 0}h3{font-size:1.17em; margin:. 83em 0}h4, P,blockquote, Ul,fieldset, Form,ol, DL, D Ir,menu {margin:1.12em 0}h5 {font-size:.83em; margin:1.5em 0}h6{font-size:.75em; Margin:1.67em 0}h1, H2, H3, H4,H5 , H6, B,strong {font-weight:bolder}//pseudo-class br:before{content: "\a"}:before,: after{white-space:pre-line}:link,: Visit Ed {Text-decoration:unDerline}:focus{outline:thin dotted invert}//table class table{display:table}tr{display:table-row}thead{display:table-head Er-group}tbody{display:table-row-group}tfoot{display:table-footer-group}col{display:table-column}colgroup{ Display:table-column-group}td, th{Display:table-cell;} caption{display:table-caption}th{font-weight:bolder text-align:center}caption{text-align:center}table{border-s pacing:2px;} THEAD, Tbody,tfoot {vertical-align:middle}td, th {vertical-align:inherit}//other elements head{display:none}body{margin:8px; line-height:1.12} button, Textarea,input, Object,select {display:inline-block;} blockquote{margin-left:40px;margin-right:40px}pre, TT, CODE,KBD, samp {font-family:monospace}pre{white-space:pre }hr{border:1px inset}center{text-align:center}abbr, acronym{font-variant:small-caps; letter-spacing:0.1em} BDO[DI R= "ltr"] {direction:ltr; unicode-bidi:bidi-override} bdo[dir= "RTL"] {Direction:rtl; Unicode-bidi:bidi-override} /* Define BDO elements The default text read/write display order when its property is dir= "Ltr/rtl" */*[dir= "ltr"]{direction:ltr;unicode-bidi:embed} *[dir= "RTL"] {direction:       rtl;unicode-bidi:embed}/* Defines the default text read/write display order of any element when its property is dir= "Rtl/rtl" */@media print {h1{page-break-before:always} H1, H2, H3,h4, h5, h6 {page-break-after:avoid} ul, OL, dl{Page-break-before:avoid}}/* Define the default plot style for headings and lists * /

(ii), browse the default style class

The default styles for different browsers may vary, so the first thing to develop is how to unify them. If you do not initialize CSS, there will often be page differences between browsers.

1. Page margins

IE defaults to 10px, via the body's margin property settings
FF defaults to 8px, via the body's padding property settings

2. Segment Spacing

IE defaults to 19px, set by the margin-top properties of P
The FF defaults to 1.12EM, which is set by the properties of P margin-bottom

3. Heading styles

H1~h6 default bold display: font-weight:bold; .
Default size please refer to the table above
And it's written like this.

h1 {Font-size:xx-large;} h2 {Font-size:x-large;} h3 {Font-size:large;} h4 {Font-size:medium;} h5 {Font-size:small;} h6 {F Ont-size:x-small;}

4. List Style
ie default to 40px, through the margin properties of UL, OL set
FF default is 40px, through the UL, Ol padding property settings
The DL does not indent, but the internal description element dd is indented by default at 40px, while the name element DT is not indented.

5. Center Element

IE defaults totext-align:center;

　　　　FF defaults tomargin-left:auto;margin-right:auto;

6. Hyperlinks <a> Styles

A style is underlined by default, the display color is blue, the hyperlinks that have been visited become purple

7. Mouse Style

　　　　IE defaults tocursor:hand;

　　　　FF is the default for cursor:pointer; this declaration in IE also valid

8. Picture Link Style
ie default to purple 2px border line
FF default to blue 2px border line

Second, CSS initialization program

Bo Master summed up some of the initialization code, Bo friends can refer to, the specific use can be appropriate to cut some.

@charset "UTF-8";/*css initialize */html, body, UL, Li, ol, DL, DD, DT, p, H1, H2, H3, H4, H5, H6, form, fieldset, Legend, img { c1/>margin:0;    padding:0;} FieldSet, IMG, input, button {    border:none;    padding:0;    margin:0;    Outline-style:none;} UL, ol {    list-style:none;} input {    padding-top:0;    padding-bottom:0;    font-family: "SimSun", "Song Body";} Select, input {    vertical-align:middle;} Select, input, textarea {    font-size:12px;    margin:0;} textarea {    resize:none;} /* Prevent dragging */img {    border:0;    Vertical-align:middle;} /*  Remove the image low-test the default 3-pixel blank gap */table {    border-collapse:collapse;} Body {    font:12px/150% Arial, Verdana, "\5b8b\4f53";    Color: #666;    Background: #fff}h1, H2, H3, H4, H5, h6 {    text-decoration:none;    Font-weight:normal;    font-size:100%;} s, I, em {    font-style:normal;    Text-decoration:none;}

Browser default tag style summary and CSS initialization program