言輕心世界

最近在研究網頁的CSS樣式排版指令，部落格裡的文字大小、背景顏色、背景圖位置跟版面構成等，都是經由CSS的不同而呈現不同的版型。所以只要知道怎麼修改或自行設計CSS，你就可以擁有自己想要的風格的部落格版面了。

由於沒有人教，只好把原先當枕頭(誤)的兩本CSS書籍拿來研讀，後來又多買一本參考手冊，就這麼地摸索起來。

這才發現各家部落格所使用的CSS指令寫法未必相同，像無名跟痞客邦就略有不一樣，這點以後有機會再說，現在要談的是簡化CSS的實例，簡化後較能改善網頁出現的速度.....

底下紅字是今天早上，我部落格CSS的其中一段原本樣子：

body {
background-color:#ffffff;
background-image: url(圖形存放的位址);
background-repeat: repeat-y;
background-attachment: scroll;
background-position:1060px 0px;
font-size:13px;
color:#333;
line-height:180%;
font-family:arial;
}

醒來後，嘗試簡化成藍字部分：

body {
background:#ffffff url(圖形存放的位址) repeat-y scroll 1060px 0px;

圖形存放的位址~裡面是填進背景圖存放所在的網址...例如 http://pic.pimg.tw/007情報員/背景圖.jpg

那就變成：

body {
background:#ffffff url(http://pic.pimg.tw/007情報員/背景圖.jpg) repeat-y scroll 1060px 0px;

然而為了下次修改方便，可以在符號 /* 與 */之間加上註解， /* 與 */之間寫的不會被網頁讀取出來

範例：/*--------------------------註解 --------------------------*/

就變成：

/*--------------------------由background-color:#ffffff;background-image: url(圖形存放的位址);background-repeat: repeat-y;background-attachment: scroll;background-position:1060px 0px;簡化而來--------------------------*/

body {
background:#ffffff url(http://pic.pimg.tw/007情報員/背景圖.jpg) repeat-y scroll 1060px 0px;

當然，這是初學者如我備忘之用，等到寫習慣且熟悉CSS指令後，就無需做這麼長的註解了！

頂多在CSS裡各區域做簡單區隔如

/*--------------------------body--------------------------*/

/*--------------------------authority--------------------------*/

/*--------------------------header--------------------------*/

中文註解也很方便喔^^

/*--------------------------小青蛙祝大家周末愉快--------------------------*/