最近在研究網頁的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--------------------------*/

中文註解也很方便喔^^

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

    全站熱搜

    A7V7 發表在 痞客邦 留言(3) 人氣()