close
本文引用自weimicozoe1216 - 必學的部落格CSS語法(一)-背景、邊框與文字格式
前一陣子痞客大改版
搞得部落格雞毛鴨血,許多的位置與功能都失常
只好把原本的無名模板改成痞客模板,才讓部落格回覆正常的模樣
卻也因此更熟悉部落格的CSS編寫技巧
部落格最傳統的樣式大抵就是一個刊頭(header)，一個主文區(container)，一個功能列(link)，及一個底部(footer)所組成。這是部落格的基本架構，當你想修改你的部落格時，就可以立即聯想他會再CSS語法中的那一個區塊(見下圖)。
而CSS每定義一個樣式，我們可以把該樣式想像成一個區塊(box)，透過對區塊的各種定義變化出千變萬化的部落格樣式。上述的每一個主要區塊中可能都包含許多不同的樣式區塊，也就是大區塊包含小區塊。
有這兩個基本觀念後，接下來就木笛會以兩篇文章的內容來介紹必學的6種部落格語法
部落格CSS語法第一招：background的魔術戲法
背景圖片大概是部落格編輯中第一個接觸的部份，而也是美化部落格最常用的語法，尤其是刊頭圖片往往象徵一個部落格的屬性與風格。其常用的語法有：
■background-image:url();
在跨弧裡填入背景圖片的連結網址，連結外部可以不用再加""
■background-color:#網頁色碼;
背景也可用單一顏色，填上三元色色碼，若是後三碼和前三碼相同填前三碼即可，如#cccccc填#ccc。
■background-attachment:屬性值;
背景的呈現型態預設是x軸重複和y軸重複，你也可以選擇以下屬性值
fixed：背景固定不滾動
x-repeat：只於x-軸重複
y-repeat：只於y-軸重複
no-repeat：不重複
■background-position:屬性值;
背景的定位初始位置，誰說一定要從上方開始顯示，透過這個屬性你可以定位背景於區塊內的任何位置，其屬性值有
center： 置中
left：置左
right：置右
bottom：置下
上面的屬性可以兩兩結合，如background-position:center left;中間用空白鍵分開，如此背景圖就會在左上方。
我們亦可以用更簡潔的方式表達，每個屬性間用空白鍵分開，其形態如下。
background:url(http://~/) #ccc fixed center;
每一個css區塊都可以用background來定義樣式，除了刊頭的header、還有文章的標題title、連結列的項目符號、甚至是留言板的底色都可以定義背景圖或顏色來裝飾。
木笛很喜歡用fixed這個技巧來，本部落格左方的紅色漸層線就是用fixed使他固定。而這個屬性還有一種特殊的視覺效果，就是當瀏覽內容時滑鼠滾動但背景並不會隨滾動，縱使是在貼圖重複的背景下我也會使用這個屬性，有一種網頁內容漂浮在背景上的感覺。
範例部落格:紅樓密碼
PS.背景圖片和背景色是可以同時使用的，也就是你定義背景圖片不重複，那剩餘的部份就會顯示背景色。
Q.為什麼我換上了背景圖片連結，圖片卻沒有完全顯示出來呢？
A 這是因為圖片比header設定的尺寸大，所以你比需要更改header{}中的width，與heifht屬性符合圖片的大小。
部落格CSS語法第二招：border的裝飾藝術
在部落格語法中border可以說是扛起分隔與美化區塊的重任，可以控制的元素有邊框的粗細(width)、邊框的樣式(style)、邊框的顏色(color)，而且可以分別對邊框的上、右、下、左進行設定，所以可以呈現出非常多的變化。其常用屬性語法如下。
■border-width:屬性值;
填入數字並以px為單位，若只單純填一個數字，則內定會應用到四邊邊框上
■border-color:#網頁色碼;
■border-style:屬性值;
邊框風格就有很多了，用說的可能很難體會，用看的就能很快瞭解了，且看木笛整理的各種邊框樣式圖。
groove有點內嵌效果、inset是內浮雕效果、outset是外浮雕效果
■border-top、border-right、border-down、border-left
border屬性最常應用在部落中各區塊間的分隔變化，通常只針對一邊做變化，而利用這個屬性你可以為邊框四邊都套上不同風格。
部落格CSS語法第三招：text與font的格式變化
部落格內容基本上就是大量的文字，所以適當的為文字安排一些變化可以讓內容看起更豐富。與字體相關且常用的屬性如下。
■font-style:;
字體風格有normal|bold|oblique分別是正常|加粗|斜體
■font-size:;
字體大小有很多種設定方法，但因為長久使用word的關係，大家對pt也就是點的單位比較有概念，或者是px螢幕上的點為單位。現在鼓勵使用em這個單位，1em表示使用者瀏覽器預設的字形大小，所以2em就是兩倍預設字體大小，你也可以接小數點像是0.75em。
■font-weight:;
這是設定字體粗細的屬性，屬性值為100~800之間以100為單位變換，這可屬性只會變粗細並不會改變大小，一般隨著字體的變化400~700是屬於normal，所以400以下會使得字體比較細。
文字格式也是可以靈活運用的地方，記住只要是一個css所定義的區塊都可以套用不同的文字格式，像是部落格文章的title和內文用不同的大小和顏色與對齊方式。其常用的屬性如下：
■color:#網頁色碼;
■text-align:屬性值;
right：向右對齊
left：向左對齊
center：置中對齊
justify：齊行對齊
■line-height:屬性值;
每一行的高度，單位可以是pt,px或是em，一般會設定較寬的行高讓瀏覽者閱讀起來比較舒服
■text-decoration:屬性值;
文字的裝飾最常配合連結樣是一起使用，其屬性值有
none：無裝飾
underline：下底線
overline：上底線
line-through：穿越線
■text-shadow:#網頁色碼 x-偏移 y-偏移;
替文字加上下落陰影，這實在是很酷的語法，如此就能輕易做出要藉助影像處理軟體才能做到效果。但是….這個效果IE6不支援，連Firefox也不支援，好像只有IE7和Safari兩個瀏覽器支援，所以在使用時要小心。
Q.大部分的語法我都不懂，進入部落格語法編輯區時我該怎麼找呢？
A.可以使用Ctrl+C網頁搜尋的功能,搜尋header、container、box、footer或其他語法代碼，幾乎都可找到你想要修改的CSS語法位置。這招是直搗黃龍的CSS修改技巧，尤其每各部落格的語法編寫習慣以及位置順序都不太相同，像無名和痞客就很不一樣，這樣可以直接修改你想要修改的部份囉！
範例演練
最後我們來練習一下，只用background、border、text、font的屬性來做一個文章區塊。各位可以試著做做看，也可以參考範例連結的寫法。
範例連結
網頁資源
紫貝殼網頁色碼選擇器
這個網頁色碼選擇器很方便，還貼心設計可選擇不同背景色與字體顏色做比較的功能
全站熱搜
留言列表
網頁素材 (12)