最近在研究網頁的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 發表在 痞客邦 PIXNET 留言(3) 人氣()

留言列表 (3)

發表留言
  • hkthkt
  • 頂多也只敢改圖片
    週末愉快
  • 安妮姐姐
  • 呵~~謝分享--但是這樣子做容易出錯
    其實後台有上傳方式換掉大圖等簡易操作指示哩
  • nuebetty
  • 現在也很想改式樣,看來是該努力研究css的時候了 :)
  • 我正在換版面.....還沒設計完,一起加油吧!

    A7V7 於 2010/12/30 16:33 回覆

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼