就像唸書最重要就是要先看標題,了解大綱,再來細讀底下的內容一樣,這次來解說一下整個部落格語法大致的結構吧!(此系列文章主要是供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 發表在 痞客邦 留言(10) 人氣()