blogger模版CSS語法細部介紹(上)

上次在Blogger template模板教學課程---CSS外觀解說一文，已經大致說過CSS的結構，大概有body、header、post(Main)、sidebar、comment等區的css碼要定義，以下分別來說明細部的規則。

【body部分】
這是最主要整個模板的配置，但是這只是基礎的，你在分別的區位，例如post或是sidebar，還是可以定義其他的顏色或是字體大小，越後面定義的就會更新前面所定義的樣子。

通常body裡定義的重要因子有下列，
body {
background:#ffffff; 背景顏色，整個模板的背景顏色，你也可以用圖片代替，語法變成
background: #ffffff url("圖片網址") no-repeat;

no-repeat：表示圖片不重複，也可用以下代替。
repeat-x：表示橫向重複
repeat-y：表示縱向重複

margin:0; 距離邊界為0
color:$textcolor;
通常在這裡我們不會定義版面大小，這在以前的文章已經提過，就不再重複。

這有個$符號的元素，表示前面已經有定義這個文字的顏色或大小，就是
/* Variable definitions這段的定義，如果這裡有定義，我們在後台的字型和顏色這個選項就可以發揮作用，只要在字型和顏色變更，在前台就能出現效果，這是較正規的blogger設計方式，但有些模版並沒有這個定義，譬如我現在使用的模板就沒有這部份，所以每個定義值要改顏色就要找到相對應的語法敘述來改，會比較不方便，而且應該也是不符合CSS精簡的原則。

font: (或是font-size)，字型大小，可以用px或pt來顯示，如果你覺得IE和Firefox呈現的文字差異太大，可以參考我的解決方法，如何讓Firefox的字和IE一樣大?但我想這應該不是正規的方式，我曾經在書上讀到應該採用em來設定文字大小，再透過百分比來控制你想呈現的大小。

font-family: arial,verdana,helvetica,tahoma,Sans-serif; 採用的字型樣式，通常以arial│Helvetica│Sans-serif為常用的樣式。
font-weight：字型粗細，bold粗體│normal正常

text-align: center; 部落格置中，這對解析度較大(如1280*1024)的比較看得出作用，不會偏左或偏右。

a:link {
color:$linkcolor;
text-decoration:none; 【文字效果，有分underline加底線│overliner加頂線 │line-trough加刪除線│blink文字閃爍│none無效果】 }
這代表有超連結的文字樣態，另外還有 a:visited ，a:hover ，a:active
a 代表超連結元素，有四種屬性，
link：連結的原始顏色〈通常 a:link{ 會簡寫成 a { 〉
visited：拜訪過的顏色
hover：滑鼠在上面滑過的顏色
active：正被選取，或是按下時顯示的顏色，這個比較少用。
比如說你將文章標題(.post h3)設為白色，但是出現的卻是藍色，就是因為標題是個超連結，所以相關的語法(如.post h3 a) 也要改，才能達到你想要的顏色，這是就要找到a這個關鍵字來改。

a img {
border-width:0;
}
圖片連結，寬度設0，就是沒有邊框，有時你發現為什麼圖片有框，是因為預設是有框的，只要加入border-width:0;就可以把框線去除。

【header】
通常在這區包括header-wrapper及description這兩個元素，
#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
}
定義標頭區的寬度，有時也可加入高度，例如，height:120px;通常會有控制高度的語法，是因為你的標題是以圖片為背景，用高度、寬度比較能定位。

#header .description {
display: block; 【顯示為一個區塊，簡單的說就是顯示這個元素出現時會在新的一行出現，如果是inline則是在同一行出現】
color: #545454;
text-align: left;
margin: -2px 0px 0px 0px;
padding: 1px 0px 10px 0px;
}
這是網誌敘述的部份，介紹你的網誌的slogan。

#header h1 {
display: block;
color: #f2984c;
font: normal bold 164% Georgia, Times, serif;
text-transform: uppercase;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 15px 10px 0px 10px;
}
#header h1就是你的部落格標題定義，字型樣式、大小、粗細、位置左右都可以在這裡定義，其中text-transform: uppercase; 是對英文標題有用，就是把英文字母轉成大寫也可設定為capitalize第一個字母大寫或是lowercase全部轉為小寫，有的會加上定義#header h1 a , #header h1 a:hover,{，就是標題超連結狀態下顯示的顏色，這時上面#header h1 { 設定的顏色就變成沒有意義了，除非你的標題不使用超連結。
而常看到margin、padding的用法，可以參考Blogger 新手基本技巧問答（二）的內容。

【MAIN部分】主文區

#main-wrapper {
float: left; 【設定主文在左或右，如果你想變更左右排版，可以和#sider-wrapper 的定義對調】
position: relative;
width: 600px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
word-wrap: break-word;讓英文字自動斷行敘述。
這裡有個overflow: hidden;建議要放，如果超過寬度自動顯示隱藏，這樣版面看起來較工整，但有些人是會放圖片，常會超過寬度，但還是堅持要完整呈現，可以設定visible，只是這樣有時會造成你的邊欄整個往下掉。

h2.date-header {
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: #b3b3b3;
font: normal normal 95% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
這是文章日期的設定，靠左或靠右是比較重要的設定。

.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: left;
font-size:9pt;
}
主文的設定，這裡最重要，文字的大小、間隔、行高，會讓你的網站讓人看起來是否舒服、容易瀏覽都可以在這裡設定，以上語法是我一般的設定，
行高1.6em;(line-height)，
字型9pt大小，
有的比較仔細的還會設定letter-spacing:4px;代表字元與字元的距離。

如果你覺得文章間空隙太小太緊密，可以用margin-bottom:30px;或是margin:0px 0px 30px 0px;來設定與下方的距離高度，不一定要下方或是上方也可，高度自行調整，也可以用在標題區或是文章頁尾區都可設定。

.post h3 {
margin: 0px 0px 15px 0px;
padding: 0px 0px 5px 0px;
color: #545454;
font: normal normal 140% Georgia, Times, serif;
text-decoration: none;
text-align: left;
line-height: 1.4em;
border-bottom: 1px solid #545454;
}

文章標題(post h3)的定義，通常文章標題字型會設大一些或是粗體、斜體，也可以在這設背景圖案或是分隔線，如border-bottom: 1px solid #545454;(在標題下方加上橫線)，可以參考換Banner圖片及文章標題加上圖示這篇，這裡也要注意如同上述 .post h3 a, .post h3 a:hover等超連結的語法細節。

.post-footer {
display: block;
margin: 15px 0px 20px 0px;
padding: 10px 10px 10px 10px;
color: #f2984c;
line-height: 1.5em;
border: 1px dotted #ffffff;
}
這是文章下方(頁尾)的資訊區，通常會有文章的作者、發表時間點、回應連結、文章分類或此文章的連結等等，顯示狀態可以在這裡設定，通常會用border把這塊圈起來或是設背景顏色，突顯與主文的分別。

這篇先寫到這裡，因為已經太長了，而上述的這些定義是大部分模板所設計的名稱，也是有不一樣的名稱顯示，不用拘泥，大概都可以自己判斷是寫哪一段的語法，如果覺得很困難，沒關係，選擇一個簡單的模板就好，關於CSS樣式真的是很多要學的，我自己也是常看書看不懂，因為都是原文翻譯的，真的想要自己改模板，可以多多測試就可以知道這段語法出現在哪裡，要如何使用。

延伸閱讀：
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---CSS外觀解說
Blogger模版CSS語法細部介紹(下)