水藍色星河

同是PIXNET使用者有分享了一篇CSS定義對照表
等考完試之後再來動工吧

以下是網友分享 如有侵權 請來信告知

[CSS 06] 部落格語法統整
minc | 18 November,2006 10:49

就像唸書最重要就是要先看標題，了解大綱，再來細讀底下的內容一樣，這次來解說一下整個部落格語法大致的結構吧！

我先把整個結構分成五大區塊：
1. 主體
2. 整個部落外觀
3. 選單區塊（Sidebar）
4. 文章區塊（Content）
5. 其他（comment, calender, sub-directory, etc）





首先，先來看看主體的大致語法，我把它分成兩個區塊。

1. 部落的主背景（多被container遮蓋可不用理會）

HTML{
scrollbar;　(視窗右邊捲軸)
background;　(背景顏色／圖案)
}

p.Upgrade {
display: none;
}

2. 部落格裡所有連結的字體設定

a:link　(超連結文字格式)
a:visited　(瀏覽過)
a:active　(按下連結的格式)
a:hover　(滑鼠移至連結的格式)

以上內部可以依需要自己加入 text-decoration, color... 等等語法。
（語法於此篇文章最後有解釋。）



第二個部份是整個部落格外觀，我把它分為三個部份。

以下開始，有 # 記號的可看成大綱，只有點點(.)記號的可看成 # 記號下的小項目，整個部落格總共有七個 # 記號：



#Container (1)
#Top (2)
#BlogHeader (3)
#BlogDescr (4)
#pagefooter (5)
#Sidebar (6)
#Content (7)

通常只有 #Sidebar 和 #Content 下有分小項目，下面會介紹，我把其餘的都歸於部落格外觀這個部分。

1. 整體大框框

#Container {
width;
margin:auto auto;
border; (邊界設定)
background;
}

2. 部落格介紹

/*部落頂部的圖*/
#Top {
background-image: url('xxx.jpg');
background-repeat: no-repeat; (背景圖片是否重複呈現)
background-position: 55% 50%; (背景圖片位置)
}

/*部落頂部的名稱字體*/
#BlogHeader {
font-size; (字體大小)
font-weight; (字體粗細)
}

/*站台相關說明部份*/
#BlogDescr {
font-family; (字型)
color; (字體顏色)
}

3. 部落格版權及登入區塊

#pagefooter {
background-color;
border;
text-align;
color;
}

以上我只放結構大綱，內部的詳細語法及解說請見《部落格外觀語法》一文。




第三部份是選單部份，也就是 #Sidebar 所涵蓋的整個區塊及其底下的子區塊部份，我把它分為四個部份介紹。以下皆僅為結構大綱，細部語法請參閱《部落格選單解析》一文。

1. 區塊整體，這裡告訴我們選單放左放右。

#Sidebar {
float:right;
}

2. 選單區塊頭尾

.SidebarHeader
.SidebarFooter

這個部份可以省略，或是用下面的語法在選單頭尾放入想要的圖片。

background:url('xxx.jpg') no-repeat;
background-position;

3. 選單子區塊

/*文章分類、近期文章、文章彙整和連結的框架*/
.Sideblock {
background:url('xxx') no-repeat;
background-position;
}

/*文章分類、近期文章、文章彙整和連結的標題*/
.Sidetitle {
background-image;
background-position;
color; (字體顏色)
}

/*文章分類、近期文章、文章彙整和連結的內部文字區塊*/
.Sidebody

Sidetitle 的部份有的人會用 Sidetitle h3 或 Sidetitle h4 等等，我想 h 是指標題文字的樣子，字體格式可能比正常格式大一點，就像 MS Word 裡的字體選項可選擇大標題、小標題之類等等的。

4. 子目錄的連結（optional）

.Sidebody p { text-align; }
.Sidebody p a:link
.Sidebody p a:visited
.Sidebody p a:active
.Sidebody p a:hover { color; text-decoration; }

這個部份可以省略，除非你希望子目錄連結所呈現的顏色和母目錄不一樣，內部語法（如：color, text-decoration）可以依需要自行調整。



第四個部分是文章，也就是 #Content 的部份，分為三部份。以下皆僅為結構大綱，內部詳細語法解說請參閱《文章語法 上》一文。

1. 文章整體區塊

#Content {
float:left;
}

.mainEntry {
text-align: left;
}

這個部分和 #Sidebar 是相對的，文章整體區塊要放左放右的語法置於此處。

2. 文章本體（標題和內文部份）

/*文章標題區塊*/
.mainEntryTitle {
text-align;
font-size:14px;
color;
}

/*文章標題區塊*/
.mainEntryTitle h3

/*文章日期*/
.date

/* 文章摘要部份 */
.mainEntryBody

/* 文章不含摘要部份 */
.mainEntryBase

3. 文章尾部

.mainEntryfoot {
background: url("xxx.gif") no-repeat 99% 90%;
}

.mainEntryBottom {
width: 550px;
height: 6px;
background: url("xxx") no-repeat bottom;
}

.mainEntryBottom a {
display: none;
}

以上各個區塊內部依需要可自行加入其他語法（如：font, background）調整外觀。

【註】最後的 mainEntryBottom a 的部份，不清楚是什麼用途，有的樣示有，有的沒有，內部語法 display: none 應該是要隱藏什麼功能，可是拿掉後好像也看不出有什麼差別。




最後一個部份較為雜亂，大致可分為三部份：文章回應、月曆、我的連結。區塊內部詳細語法的功能還沒研究好，這裡先列出結構，其餘改日補充。

1. 文章回應

.CommentBox

.CommentBoxTitle

.CommentInnerBox

.commentheader {
background-repeat;
background-image:url('xxx.gif');
background-position;
}

/*留言者資料*/
.commentposterinfo

.commentposterinfo a img {
border:0px;
}

2. 月曆

.calMonth
.calMonthBackward
.calMonthCurrent
.calMonthForward
.calMonth tbody
#sun
#sat

3. 選單之「我的連結」部分

ul {
padding;
list-style-type:none;
}

li {
list-style-image: url('xxx.gif'); (我的連結旁的小圖)
}

這個部份在《選單「我的連結」語法》一文有詳細解說。




最後要補充的就是一些區塊內部的基本語法，可依需要自行放入各個區塊。想在選單標題加背景圖案的就在 Sidebar title 裡加 background-image 的語法，想要文章標題的字體變大就在 mainEntryTitle 裡的 font-size 改大小，想要變粗體就自己再加個 text-weight: blod 的語法…等等之類的。

以下各個語法的解說及用法請參閱《基礎CSS語法》一文。

字體(font)部分

font-family;
font-size;
font-weight;
text-decoration;
text-align;
color;

背景(background)部份

background;　(背景顏色／圖案)
background-color;
background-image;　(背景圖案)
background-position;
background-repeat;
list-style-image;　(我的連結旁的小圖)

邊界(border)部分

border-color;
border-width;
border-style;



我只是CSS新手，歡迎強者糾正補充。