close

就像唸書最重要就是要先看標題，了解大綱，再來細讀底下的內容一樣，這次來解說一下整個部落格語法大致的結構吧！（此系列文章主要是供CSS 新手參考用，因為本身也是新手，所以在摸索的過程中把了解的整個整理出來，希望能讓大家更容易上手。）

PS. 這篇是以grey2 模板為主，但是跟grey 相比應該大同小異。(引用、轉貼請附上原文連結，感謝。)

我先把整個結構分成五大區塊：
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;
}

/* Pixnet 在pagefooter 的版權宣告*/
#Bottommenu

/* pagefooter 內的連結*/
#Bottom


我想通常在大部分的樣本語法中，#Bottommenu和#Bottom 是被省略的，如果不想要pagefooter 顯示的話才加入下面語法。

#Bottommenu, #Bottom {display; none;}

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



第三部份是選單部份，也就是#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 h4，目前我用過的兩個版型，grey 是用Sidetitle h4，grey2 是用Sidetitle。我想h 是指標題文字的樣式，字體格式可能比正常格式大一點，就像MS Word 裡的字體選項可選擇大標題、小標題之類等等的。在後面的mainEntryTitle 的部份也可以看到標題的使用，相對於Sidetitle 的h4，mainEntryTitle 是用h3。

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 的部份，分為三部份。以下皆僅為結構大綱，內部詳細語法解說請參閱[CSS 02] 和 [CSS 10] 兩篇文章。

1. 文章整體區塊

#Content {
float:left;
}

.mainEntry {
text-align: left;
}


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

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

/*文章標題區塊，包括發表時間*/
.mainEntryTitle {
text-align;
font-size:14px;
color;
}

.mainEntryTitle h3　/*文章標題區塊*/
.mainEntryTitle h3 a　/*文章標題連結顏色設定*/
.mainEntryTitle h3 a:hover　/*文章標題連結滑鼠經過顏色設定*/

.date　/*文章日期*/

.maintagline　/*加入書籤*/

.mainEntryBody
.mainEntryBase


關於「加入書籤」部分請參閱[CSS 13]。

【註】mainEntryTitle 和mainEntryTitle h3 的差別在[CSS 10] 文中有解釋。

3. 文章尾部

.extended {}　/*同分類閱讀*/
.historyArt {}　/*歷史上的今天*/

.forward {}　/*轉寄文章*/

/*文章尾部「引用、分類、人氣」的區塊*/
.mainEntryfoot {
background: url("xxx.gif") no-repeat 99% 90%;
}

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

.mainEntryBottom a {
display: none;
}


mainEntryfoot 是指文章尾部的引用、分類和文章人氣等等的部份，它和mainEntryBottom 區塊範圍的差別在[CSS 10] 文中有圖解。這兩個部份似乎是grey2 版本專有的，grey 的語法是另一種。

在mainEntryBottom 的部份加入圖片的話可以用來當兩篇文章之間的分隔線，而mainEntryBottom a 指的文章底部的▲TOP 字樣(對此符號沒印象的可參閱[CSS 10] 文中的圖)，內部語法{display: none;} 是用來隱藏這個連結。

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



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

1. 文章回應，詳細解說請參閱《文章迴響列表語法》和《留言回覆》二文。

.CommentBox

.CommentBoxTitle

.CommentInnerBox

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

.commentposterinfo　/*留言者資料*/

.commentposterinfo a img {
border:0px;
}

.replyBox　/*留言回覆區塊*/
.replyContent　/*留言回覆內文*/
.replyInfo　/*版主資料*/


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新手，歡迎強者糾正補充。







arrow
arrow
    全站熱搜
    創作者介紹
    創作者 minc 的頭像
    minc

    min'cellanea

    minc 發表在 痞客邦 留言(10) 人氣()

    E-mail轉寄