Css optimization + font

I. Some common global Css

1/** clear internal and external margins **/2 body, h1, h2, h3, h4, h5, h6, hr, p, 3 blockquote, /* structural elements structure element */4 dl, dt, dd, ul, ol, li,/* list elements list element */5 pre, /* text formatting elements text format element */6 form, fieldset, legend, button, input, textarea,/* form elements form Element */7 th, td, /* table elements table element */8 img/* img elements Image Element */{9 border: medium none; 10 margin: 0; 11 padding: 0; 12} 13/** set default font **/14 body, button, input, select, textarea {15 font: 12px/1.5 'body', Srial, sans-serif; 16} 17 h1, h2, h3, h4, h5, h6 {font-size: 100%;} 18 em {font-style: normal ;} 19/** reset list element **/20 ul, ol {list-style: none;} 21/** reset hyperlink element **/22 a {text-decoration: none; color: #333;} 23 a: hover {text-decoration: underline; color: # F40;} 24/** reset Image Element **/25 img {border: 0px;} 26/** reset table element **/27 table {border-collapse: collapse; border-spacing: 0 ;}

Ii. Simplified Css

1 # menu {2 font-style: italic;/* font style-italic */3 font-variant: small-caps; /* font change-convert lowercase letters to uppercase letters */4 font-weight: bold;/* font width-font bold */5 font-size: 18px; /* font size-18px */6 line-height: 150%;/* Row height-150% */7 font-family:, Arial, sans-serif; /* font type */8/* abbreviated form: font: italic small-caps bold 18px/150%, Arial, sans-serif ;*/9 width: 600px; 10 height: 400px; 11 border: 1px dotted Red; 12} 13 # menu li {14 list-style-type: square; /* list type */15 list-style-image: url ("list.gif");/* list item image */16 list-style-position: inside; /* position of the List flag (whether the flag appears outside the content of the list item or inside the content) */17/* Abbreviation: list-style: url ("list.gif") square inside 18 list-style values can be listed in any order, and these values can be ignored. If a value is provided, the other values are filled with their default values. 19 */20 21}

For fonts:

Sequence:font-style | font-variant | font-weight | font-size | line-height | font-family

(Note: in short, font-size and line-height can only form one value through a slash/, and cannot be written separately .)

If the font size is not specified, the default size of common text (such as paragraphs) is 16 pixels (16 PX = 1em ).

Note:Use em to set the font sizeTo avoid text adjustment in Internet Explorer, many developers use em units instead of pixels. We recommend that you use the em dimension unit at W3C. 1em is equal to the current font size. If the font-size of an element is 16 pixels, 1em is equal to 16 pixels. When setting the font size,
The em value changes the font size of the parent element. The default text size in the browser is 16 pixels. Therefore, the default size of 1em is 16 pixels. You can use the following formula to convert pixels to em: pixels/16 = em (Note: 16 is equal to the default font size of the parent element. Assume that the font-size of the parent element is 20px, change the formula to: pixels/20 = em) instance h1 {font-size: 3.75em;}/* 60px/16 = 3.75em */h2 {font-size: 2.5em ;} /* 40px/16 = 2.5em */p {font-size: 0.875em;}/* 14px/16 = 0.875em */in the preceding example, the text size in em is the same as that in pixels in the previous example. However, if the em unit is used,
You can resize the text in all browsers. Unfortunately, there are still problems in IE. When you reset the text size, it will be larger or smaller than the normal size.
Combined Use percentage and EMAn effective solution in all browsers is to set the default font-size value for the body element (parent element) as a percentage: instance body {font-size: 100% ;} h1 {font-size: 3.75em;} h2 {font-size: 2.5em;} p {font-size: 0.875em;} Our code is very effective. In all browsers, the same text size can be displayed, and the size of the text can be scaled by all browsers.
From: W3C

For background:

Background Abbreviation: background: # fff url(bg.gif) no-repeat fixed left top; equivalent to: background-color: # fff; background-image: url(bg.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; Order: background-color | background-image | background-repeat | background-attachment | background-position

Recommended reading:

Http://www.admin).com/document/431.html#key-value recommendation]
Http://www.cnblogs.com/MaxIE/archive/2007/10/17/927606.html