DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS代碼優化方案(2)
DIV+CSS代碼優化方案(2)
編輯:CSS詳解     

實例講解以上幾點DIV+CSS優化方法

1、縮寫CSS代碼

常用需要縮寫CSS屬性代碼如下:

background(背景屬性-CSS手冊詳細了解background手冊)

未優化前

  1. background-color:#FFF;對應屬性為背景顏色為白色
  2. background-image:url(DIVCSS5.gif);對應屬性是設置DIVCSS5.gif圖片為背景
  3. background-position:bottom;背景圖片是居底部
  4. background-repeat:repeat-x;背景按X坐標(橫坐標)重復延伸

以上CSS代碼可以簡寫為

  1. background:#FFFurl(DIVCSS5.gif)repeat-xbottom;

解釋:背景顏色為白色,並以X坐標重復DIVCSS5.gif圖片,並且圖標居下。未優化CSSbackground屬性相同

margin(外補白屬性-CSS手冊詳細了解margin手冊)

未優化前

  1. margin-left:5px;意思為靠左5px
  2. margin-right:6px;靠右6px
  3. margin-bottom:7px;底部延伸7px
  4. margin-top:8px;頂部延伸8px

優化簡寫為

  1. margin:8px6px7px5px;

意思和屬性效果同上,可詳細了解CSSmargin介紹

padding(內補白屬性-CSS手冊詳細了解padding手冊)

未優化前

  1. padding-left:5px;意思為左補白5px
  2. padding-right:6px;右補白6px
  3. padding-bottom:7px;底(下)補白7px
  4. padding-top:8px;頂(上)補白8px

優化簡寫為

  1. padding:8px6px7px5px;

意思和屬性效果同上,可詳細了解CSSpadding介紹

border(邊框屬性-CSS手冊詳細了解border手冊)

未優化前

  1. border-color:#000000;邊框顏色為黑色
  2. border-style:solid;邊框樣式為實線
  3. border-width:1px;邊框寬度為1px

可以簡寫為

  1. border:1pxsolid#000000;

意思同上未優化前
如果是只設置左邊邊框為1px,顏色為黑色的實線CSS代碼如下

  1. border-left:1pxsolid#000000;

font(字體屬性-CSS手冊詳細了解fonts手冊)

字體的屬性如下:

  1. font-style:italic;字體樣式
  2. font-variant:small-caps;字體異體
  3. font-weight:bold;字體加粗
  4. font-size:12px;字大小為12px
  5. line-height:22px;字行高為22px
  6. font-family:"黑體"字體為黑體字

可以縮寫為一句:font:italicsmall-capsbold12px/22px"黑體";

注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個值了解CSSfont技巧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved