現在不難看出來的網站運行規律 網站越小越好運行越快,那麼,我們就舉幾個簡單的例子:把平時接觸到的例子分享給大家。
先看如下一段代碼:
#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