Details of CSS global styles

On the Internet, I read the article about many advanced css ((reset.css), and once again I realized what is "Details determine success or failure ". Original article: Workshop /. The original article is based on the translation plug-in. It generally refers to the definition of CSS and the different CSS rules of various browsers. The "css reset" is designed for compatibility and unification, correct and effective use of "css reset" can save time and money to some extent. My understanding is: the significance of CSS reset is not to let you get rid of it all, but to make all kinds of browsers start from the same point as possible.

Newton stood on the shoulders of the giant Galileo, and we can do the same. The following two details should be noted after passing the tests by experts. You can check the global CSS of your website or blog.

Not recommended: * {margin: 0; padding: 0 ;}

Not recommended: * {margin: 0; padding: 0;} reason:

1. * This feeling is not very good and will definitely affect the efficiency, although it cannot be noticed by the naked eye.
2. Performance consumption is one of the factors. I personally think the biggest drawback is the impact on the form elements. For example, the checkbox, radio, and button labels are displayed in the browser after being defined. You need to rewrite the code in a targeted manner, which consumes more code and time.

However, for some simple pages, the tag element can be used boldly if it is simple.

Suggested use: IMG {border: 0 none ;}

The reason is for compatibility, because the Border border attributes have different rendering methods in different browsers.

For example, if only IMG {border: 0;} is used in ff and IE, the border-width values are 0 in both browsers, however, border-style and border-color attributes are different.

Specific analysis results can be viewed: http://blog.linxz.cn/border/

Reset.css sample

The details of how to define tags globally are not mentioned. For example, if tags are not used in your project, why do you need to define them globally?

Most of the following reset.css is copied to: Yui.

Wake up: do not believe in your hands. There is no perfect, only the most appropriate.

Body, Div, DL, DT, DD, UL, ol, Li,
H1, H2, H3, H4, H5, H6, pre, code,
Form, fieldset, legend, input, button,
Textarea, P, BLOCKQUOTE, Th, TD {
Margin: 0;
Padding: 0;
}
Fieldset, IMG {
Border: 0 none;
}
/* Remember to define focus Styles! */
: Focus {
Outline: 0;
}
Address, caption, cite, code, dfn,
Em, strong, Th, VAR, optgroup {
Font-style: normal;
Font-weight: normal;
}
H1, H2, H3, H4, H5, H6 {
Font-size: 100%;
Font-weight: normal;
}
Abbr, acronym {
Border: 0;
Font-variant: normal;
}
Input, button, textarea,
Select, optgroup, option {
Font-family: Inherit;
Font-size: Inherit;
Font-style: Inherit;
Font-weight: Inherit;
}
Code, KBD, SAMP, TT {
Font-size: 100%;
}
/* @ Purpose to enable resizing for IE */
/* @ Branch for IE6-Win, IE7-Win */
Input, button, textarea, select {
* Font-size: 100%;
}
Body {
Line-Height: 1.5;
}
OL, UL {
List-style: none;
}
/* Tables still need 'cellspacing = "0" 'in the markup */
Table {
Border-collapse: collapse;
Border-Spacing: 0;
}
Caption, Th {
Text-align: left;
}
Sup, sub {
Font-size: 100%;
Vertical-align: baseline;
}
/* Remember to highlight anchors and inserts somehow! */
: Link,: visited, INS {
Text-Decoration: none;
}
BLOCKQUOTE, q {
Quotes: none;
}
BLOCKQUOTE: before, BLOCKQUOTE: after,
Q: before, Q: After {
Content :'';
Content: none;
}