Css最佳化+字型

一、一些常用的全域Css

 1 /** 清除內外邊距 **/ 2 body, h1, h2, h3, h4, h5, h6, hr, p, 3 blockquote, /* structural elements 結構元素 */ 4 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 5 pre, /* text formatting elements 文字格式設定元素 */ 6 form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */ 7 th, td, /* table elements 表格元素 */ 8 img/* img elements 圖片元素 */{ 9   border:medium none;10   margin: 0;11   padding: 0;12 }13 /** 設定預設字型 **/14 body,button, input, select, textarea {15   font: 12px/1.5 '宋體', Srial, sans-serif;16 }17 h1, h2, h3, h4, h5, h6 { font-size: 100%; }18 em{font-style:normal;}19 /** 重設列表元素 **/20 ul, ol { list-style: none; }21 /** 重設超連結元素 **/22 a { text-decoration: none; color:#333;}23 a:hover { text-decoration: underline; color:#F40; }24 /** 重設圖片元素 **/25 img{ border:0px;}26 /** 重設表格元素 **/27 table { border-collapse: collapse; border-spacing: 0; }

二、Css簡寫

 1 #menu{ 2     font-style:italic;    /*字型樣式-斜體*/ 3     font-variant:small-caps;/*字型變化-小寫轉換為大寫*/ 4     font-weight:bold;/*字型粗細-字型加粗*/ 5     font-size:18px;/*字型大小-18px*/ 6     line-height:150%;/*行高-150%*/ 7     font-family:宋體,Arial,sans-serif;/*字型類型*/ 8     /*簡寫形式：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;/*清單類型*/15     list-style-image:url("list.gif");/*清單項目映像*/16     list-style-position:inside;/*列表標誌位置(確定標誌出現在清單項目內容之外還是內容內部)*/17     /*簡寫：list-style:url("list.gif") square inside 18    list-style的值可以按任何順序列出，且這些值都可以忽略。只要提供了一個值，其它的就會填入其預設值。19     */20     21 }

 對於字型：

順序：font-style | font-variant | font-weight | font-size | line-height | font-family

（註：簡寫時，font-size和line-height只能通過斜杠/組成一個值，不能分開寫。）

如果沒有規定字型大小，普通文本（比如段落）的預設大小是 16 像素 (16px=1em)。

注意：使用 em 來設定字型大小如果要避免在 Internet Explorer 中無法調整文本的問題，許多開發人員使用 em 單位代替 pixels。W3C 推薦使用 em 尺寸單位。1em 等於當前的字型尺寸。如果一個元素的 font-size 為 16 像素，那麼對於該元素，1em 就等於 16 像素。在設定字型大小時，
em 的值會相對於父元素的字型大小改變。瀏覽器中預設的文字大小是 16 像素。因此 1em 的預設尺寸是 16 像素。可以使用下面這個公式將像素轉換為 em：pixels/16=em（註：16 等於父元素的預設字型大小，假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em）執行個體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 */在上面的例子中，以 em 為單位的文字大小與前一個例子中以像素計的文本是相同的。不過，如果使用 em 單位，
則可以在所有瀏覽器中調整文字大小。不幸的是，在 IE 中仍存在問題。在重設文字大小時，會比正常的尺寸更大或更小。
結合使用百分比和 EM在所有瀏覽器中均有效方案是為 body 元素（父元素）以百分比設定預設的 font-size 值：執行個體body {font-size:100%;}h1 {font-size:3.75em;}h2 {font-size:2.5em;}p {font-size:0.875em;}我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文字大小，並允許所有瀏覽器縮放文本的大小。
來自：W3C

對於背景：

background簡寫：background:#fff url(bg.gif) no-repeat fixed left top;等效於：background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;順序：background-color | background-image|background-repeat|background-attachment| background-position

推薦閱讀：

http://www.admin10000.com/document/431.html【重點推薦】
http://www.cnblogs.com/MaxIE/archive/2007/10/17/927606.html