前面幾篇CSS的文章都是與Container這個主要容器有關,接下來談的是第二層容器以及其內的各容器屬性。不過,在談第二層容器之前,得先說說選擇器(Selector)的種類。除了上一篇提到的上下文選擇器外,在HTML語言中,還有所謂的類別選擇器(Class Selector)以及ID選擇器(ID Selector)。

<div class="Sideblock" id="CategoryPlugin">為例,這個DIV標籤同時使用類別與ID這兩個選擇器。瀏覽器讀取到這段語法時,便會去CSS內容裡搜尋Sideblock以及CategoryPlugin這兩個選擇器所規範的樣式內容。而ID和Class不同之處,在於ID只套用一次,而Class則可以套用多次。我們在編輯CSS時,須使用點號(.)來撰寫Class選擇器,而使用hash符號(#)來撰寫ID選擇器的內容。

在Top這個ID選擇器所指向的容器標籤內(為了方便就稱為TOP容器標籤),還有<div id="BlogHeader">以及<div id="BlogDescr">這兩個容器,所以我先設定TOP容器標籤的屬性。由於多數屬性已經在Container裡面設定了,所以這裡我只需要去設定和Container差異的部份。
#Top{
height:400px;

/*容器高度設為400px,雖然我的圖片高度是300px,但留下100px的空間作為Google Adsense廣告的版面*/
background:url(照片連結位址) no-repeat;
/*設定背景圖片的連結位址,並且設定為不重複出現*/
}

接下來設定BlogHeader及BlogDescr這兩個容器標籤囉。BlogHeader是我們在後台網誌管理所輸入的網誌名稱,由於網站只允許我們輸入一定的字數,所以這個區塊基本上只能置放純文字,要放圖片有些困難。因此,我們只需設定Blogheader的背景、大小、位置、文字屬性等資訊。

#Blogheader{
height:30px;
width:250px;

/*因為只能放幾個文字,所以容器高度設為30px就好,避免BlogDescr被擠壓下去*/
position:relative;top:200px;left:400px;
/*設定這容器置放的位置在離左上方200px、左方400px的地方,正是我希望放置標題的地方。*/
}

由於網誌標題會自動帶連結連往部落格首頁,所以我們也可以設定一下連結屬性以及滑鼠移往時的效果。還記得上回所說得上下文選擇器吧,按照那樣的寫法就對了。
#Blogheader a{
font-size: 22px;

/*標題字型設為22px的大小*/
font-weight:lighter;
/*字型寬度設為lighter*/
color:#FFFFFF;
/*文字設為白色*/
}

#Blogheader a:hover{
color:#FFCC00;

/*文字改為#FFCC00*/
}

這樣就完成了Blogheader的設定囉!!接下來要談的就是能創造各種可能BlogDescr容器區塊,因為PIXNET讓我們可以在這裡放置HTML以及Javascript等語法,這等於是造就版面的無限可能。

克里斯 發表在 痞客邦 PIXNET 留言(0) 人氣()