前面幾篇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等語法，這等於是造就版面的無限可能。
文章標籤
全站熱搜
