去掉CSS贅餘代碼，CSS可以更簡潔

標籤：c   style   class   blog   code   java   

本篇文章適合css新手學習，對於已經掌握了css的朋友們也可以通過本片文章來複習知識。　　

作者通過實踐，認為在有些情況下css的代碼是可以更加簡潔的，多數情況下是因為新手對於一些具有多屬性的元素代碼不能精簡來寫造成的。

精簡的代碼對於網頁是有莫大的好處的，對於瀏覽者訪問速度會有一定的提升，另外對於搜尋引擎也更加可以抓取網頁關鍵內容。廢話不說了，下面就看看筆者總結的可以精簡的代碼:

　　1.Margin & Padding

　　例1：

    .div {    　　margin-top:10px;    　　margin-right: 5px;    　　margin-bottom:30px;    　　margin-left:0px;    　　}

　　精簡後代碼如下：

.div { margin:10px 5px 30px 0;}

 

 

　　例2：

    .div {    　　margin-top:10ox;    　　margin-right:20px;    　　margin-bottom:0;    　　margin-left:20px;    　　}

 

　　精簡後代碼：

    　.div {    　　margin:10px 20px 0;    　　}

 

　　例3：
　　

        .div {        　　margin-top:0;        　　margin-right:auto;        　　margin-bottom:0;        　　margin-left:auto;   　　 　　}

　　精簡後代碼：
　

    　.div {    　　margin:0 auto;    　　}

 

　　例4：

    　.div {    　　margin-top:50px;    　　margin-right:50px;    　　margin-bottom:50px;    　　margin-left:50px;    　　}

 

　　精簡後代碼：

    　.div { margin:50px; }

 

　　2.border的縮寫

　　例1：

    .div {    　　border-width:5px;    　　(thin,thick,medium,set vaule)(default=medium)    　　border-style:dotted;    　　(solid,dashed,dotted,double,etc)(default=none)    　　border-color:blue;    　　(named,hex,rgb or 0-255)(default=value of elements/elements parent color property)    　　}

 

　　精簡後代碼：

    .div {    　　border:5px dotten blue;    　　}

　　
　　例2：

    .div {    　　border-right-width:2px;    　　border-right-style:solid;    　　border-right-color:#666666;    　　}

 

　　精簡後代碼：

    　.div {    　　border-right:2px solid #666;    　　}

 

 

　　　例3：

　.div {　　border-top-width:3xp;　　border-right-width:2px;　　border-bottom-width:3px;　　border-left-width:2px;　　}

 

　　精簡後的代碼：
　

    .div {    　　border-width:3px 2px;    　　}

 

　　3.Background縮寫

 

    .div {    　　background-color:#CCCCCC;    　　(named,hex,rgb,0-255)(default=transparent)    　　background-image:url(images/bg.gif);    　　(url or none)(defaule=none)    　　background-repeat:no-repeat;    　　(repeat,repeat-x,repeat-y or no-repeat)(default=repeat)    　　background-attachment:scroll;    　　(fixed or scoll)(default=scroll)    　　background-position:top left;    　　(top,right,left,bottom or center)(default=0% 0%)    　　}

　　精簡後代碼：
　

    　.div {    　　background:#CCC url(images/bg.gif) no-repeat 0 0;    　　}

 

　　4.font

 

    .div {    　　font-family:Verdana,Arial,Helvetica;    　　font-size:12px;    　　font-weight:bold;    　　font-style:italic;    　　font-variant:normal;    　　line-height:1.5;    　　}

 

　　精簡後代碼：
　

    　.div {    　　font:italic bold 12px/1.5 Verdana,Arial,Helcetica;    　　}

 

　　5.list縮寫

 

    .div {    　　list-style-image:url(images/bullet.gif);    　　list-style-position:inside;    　　list-style-tupe:squere;    　　}

　　精簡後的代碼：

    　.div {    　　list-style:square inside url(images/bullet.gif);    　　}

　

　　6.顏色的縮寫
　　

  　　  Aqua:#00ffff to #0ff    　　Black:#000000 to #000    　　Blue:#0000ff to # 00f    　　Dark Grey:#666666 to #666    　　Fuchsia:#ff00ff to #f0f    　　Light Grey:#cccccc to #ccc    　　Lime:#00ff00 to #0f0    　　Orange:#ff6600 to #f60    　　White:#ffffff to #fff    　　Yellow:#ffff00 to #ff0

　　以上元素多屬性，因此在某些時候可以遵從一定的規律對它們進行縮寫。
　　更多精彩內容正在整理中，歡迎繼續瀏覽。