恰當精簡css程式碼讓網站運轉功率更高

現在不難看出來的網站執行規律 網站越小越好執行越快，那麼，我們就舉幾個簡單的例子：把平時接觸到的例子分享給大家。

先看如下一段程式碼：

#header {    

margin-top:10px;    

margin-right:15px;    

margin-bottom:10px;    

margin-left:15px;    

backgroung-color:#333333;    

background-images:url(/Images/header.jpg);
   

}  

這樣的一段CSS程式碼，在條理上很清晰，結構也很明瞭，可讀性很強，可是這樣的一段程式碼卻沒有做精簡，也就是說它是最原始的CSS程式碼，下面看精簡後的程式碼：

#header {    

margin:10px 15px;    

backgroung:#333
url(/Images/header.jpg);    

}  
——————

在CSS中有複合屬性這一說法，也就是說可以將很多屬性引數整合在一起的，比如說上面的“margin-top;
margin-right; margin-bottom; margin-left;”可以整合成一個“margin”屬性，然後為其配上引數。   

通過這一點，我們就可以在原始CSS程式碼的基本上將程式碼進一步的精簡。而且這樣寫的結構也合理，可讀性也同樣強。可是對於要精簡到徹底來說，這還不夠。為了讓這段CSS程式碼的結構明瞭，我們用上了空格換行等佔用空間的東西，如果將這些佔用空間的去掉呢？

#header{margin:10px 15px;background:#333
url(/Images/header.jpg);}  

 

只這一句就替代了上面的一段程式碼，這樣程式碼就已經精簡到了最大化，當然，並不推薦所有人都這樣寫，這樣寫的CSS程式碼在可讀性上要遠遠差於段落式的寫法，除非你對自己寫的程式碼有完全掌握的信心。

在同一個站點的CSS檔案中，不可避免的會出現不同的ID或Class卻有一部分相同的屬性，如果將這些ID或Class逐個分開來寫的話，在CSS檔案裡無疑會生成重複程式碼，而我們要儘量的精簡CSS檔案的大小，那麼“消滅”這部分重複的程式碼就變得勢在必行。

看下面一段CSS程式碼：

 

#header{margin:10px
15px;background:#333 url(/Images/header.jpg);}    

#content{margin:10px
15px;padding:10px;background:#999;}    

#copyright{margin:10px 15px;border:1px
solid #f00;}  

 

在上面的三個ID中都有一個相同的屬性“margin:10px 15px;”，如果就這樣分開來寫的話，這三個ID之間將保持各自獨立的關係，但卻生成了重複的程式碼，而我們可以將其寫成如下格式：

 

#header,#content,#copyright{margin:10px
15px;}    

#header{background:#333
url(/Images/header.jpg);}    

#content{padding:10px;background:#999;}
   

#copyright{border:1px solid #f00;}
 

 

將上面的ID換成Class也是一樣的。這樣寫我們就成功的將重複程式碼“消滅”掉了。但是如果這裡具有相同的屬性的ID或Class過多的話，難免會造成程式碼可讀性降到很低很低，所以除此之外當具有相同屬性的都是Class時還有另外的一種寫法：

 

.main{margin:10px 15px;}    

.header{background:#333
url(/Images/header.jpg);}    

.content{padding:10px;background:#999;}
   

.copyright{border:1px solid #f00;}
 

 

當然這種寫法時，呼叫時的寫法也與平常不一樣。

 

<div class=”header
main”></div>   

<div class=”content
main”></div>   

<div class=”copyright
main”></div>  

 

這樣的寫法同樣可以達到效果，並且也不會再怕具有相同屬性的Class多而造成程式碼可讀性差的問題，但值得注意的一點就是，這種寫法對於ID是無效的，不管其中是存在一個ID或者全部都是ID，都將造成這段程式碼的無效。

以上就是酷雲主機關於如何精簡css程式碼的介紹，更多詳情請訪問www.cnkuyun.com