實例講解以上幾點DIV+CSS優化方法
1、縮寫CSS代碼
常用需要縮寫CSS屬性代碼如下:
background(背景屬性-CSS手冊詳細了解background手冊)
未優化前
- background-color:#FFF;對應屬性為背景顏色為白色
- background-image:url(DIVCSS5.gif);對應屬性是設置DIVCSS5.gif圖片為背景
- background-position:bottom;背景圖片是居底部
- background-repeat:repeat-x;背景按X坐標(橫坐標)重復延伸
以上CSS代碼可以簡寫為
- background:#FFFurl(DIVCSS5.gif)repeat-xbottom;
解釋:背景顏色為白色,並以X坐標重復DIVCSS5.gif圖片,並且圖標居下。未優化CSSbackground屬性相同
margin(外補白屬性-CSS手冊詳細了解margin手冊)
未優化前
- margin-left:5px;意思為靠左5px
- margin-right:6px;靠右6px
- margin-bottom:7px;底部延伸7px
- margin-top:8px;頂部延伸8px
優化簡寫為
- margin:8px6px7px5px;
意思和屬性效果同上,可詳細了解CSSmargin介紹
padding(內補白屬性-CSS手冊詳細了解padding手冊)
未優化前
- padding-left:5px;意思為左補白5px
- padding-right:6px;右補白6px
- padding-bottom:7px;底(下)補白7px
- padding-top:8px;頂(上)補白8px
優化簡寫為
- padding:8px6px7px5px;
意思和屬性效果同上,可詳細了解CSSpadding介紹
border(邊框屬性-CSS手冊詳細了解border手冊)
未優化前
- border-color:#000000;邊框顏色為黑色
- border-style:solid;邊框樣式為實線
- border-width:1px;邊框寬度為1px
可以簡寫為
- border:1pxsolid#000000;
意思同上未優化前
如果是只設置左邊邊框為1px,顏色為黑色的實線CSS代碼如下
- border-left:1pxsolid#000000;
font(字體屬性-CSS手冊詳細了解fonts手冊)
字體的屬性如下:
- font-style:italic;字體樣式
- font-variant:small-caps;字體異體
- font-weight:bold;字體加粗
- font-size:12px;字大小為12px
- line-height:22px;字行高為22px
- font-family:"黑體"字體為黑體字
可以縮寫為一句:font:italicsmall-capsbold12px/22px"黑體";
注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個值了解CSSfont技巧。