克 里 斯｜ 框 ．限

iPhone 造成 3G smart Phone 手機市場吵的震天軋響的時候，痞客邦還在搞眸眸大夢，不過，現在似乎終於醒了。

如果你用iPhone 瀏覽你的部落格，你會發現部落格變成所謂的手機模式，header 跟 sidebar 的DOM 都被隱藏，只剩下標題主文瀏覽的簡潔模式。

今天逛到一個網站 http://bighugelabs.com，還挺有趣的，所以跟大家分享一下。這網站只有一個功能，就是可以讓你產生設計網站的色碼以及簡單CSS，而色碼參考的來源居然只是一張照片!!


操作方法很簡單，只要你選定照片並且按下"Create"的按鍵，就可以完成了。你可以上傳，或者選定Flickr裡的相片，甚至複製照片的連結，這網站就可以即時算出這張相片裡的顏色色碼，還挺簡單的。

從grey 模板用手動方式把原本的樣式感覺搬移到痞客模板，花了一些時間設定，也發現幾個站方的bug。

1.最新訂閱下方會莫名其妙額外出現<-- -->這樣的字樣。很明顯，這應該是php程式部份的問題，所以讓不該出現的文字跑了出來。

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

以<div class="Sideblock" id="CategoryPlugin">

/*(Step 5)設定連結(link)的屬性*/
在談連結屬性之前，我們得先談一下連結的概念，在網頁中我們可以最常選擇文字或圖片來作為連結客體，當我們按下連結文字或圖片時，網頁就會轉向(redirect)到我們指定的連結位址去。而HTML語言中，連結的語法不外是下面兩種：
<A HREF="指定的連結位址">設定作為連結的文字內容</A>
<A HREF="指定的連結位址"><IMG="設定作為連結的圖片位址"></A>

容器標籤內可置放的網頁元素，當然有很多種。但依照目前PIXNET的部落格型態，能夠透過CSS修飾外觀的，不外是文字(text)的字型與段落、圖片(image)、表格(table)、表單(form)及連結(link)的顯示。所以接下來我們來談的，就是設定這些內部相關元素的屬性。由於CSS中對於更改同一屬性的方法有時會有多種表示法，我想只要可以達到目的就好，沒必要把所有表示法全部列出來，我可不是在寫規格表。為避免文章過長，這篇內容只介紹字型與段落文字的屬性。

/*(Step 3)設定字型的屬性*/
font-family:"Trebuchet MS",細明體,新細明體;

在寫文章之前，得先解釋一下瀏覽器程式與標籤的運作。當IE或FireFox等瀏覽器讀取網頁原始碼而讀到標籤時，它就會去找尋跟這標籤有關的屬性值，如果瀏覽器所讀到的標籤是帶有選擇器(可能是ID或Class)的，那麼它就會到CSS樣式表中尋找那個選擇器的內容。因此，ID選擇器就是IE等瀏覽器的線索。以<Div id= "Container ">為例，Container這個關鍵字就是一個ID選擇器，瀏覽器程式會去CSS中尋找Container這個關鍵字所定義的屬性值，讀取之後就顯現在網頁。

從前篇文章的圖示可以知道，在Grey模板中，<Div id= "Container" >這個容器標籤是個起始，由於這個父輩標籤包含了所有其他的容器標籤，因此其他子標籤也就得繼承他的所有屬性(可能是家產，也可能是負債)。談到繼承，我想就用我國目前財產繼承制度作個解釋範例，大家就當我閒扯吧。根據台灣的民法，如果子女不打算繼承父母親的遺產(這情形多發生在父母留下龐大的債務)，就得在繼承開始後六個月內向法院聲請『拋棄繼承』，如果不依照法律向法院提出這樣的宣告的話，作子女的就得扛起父母的負債。

從程式碼中我們已整理出含有CSS樣式的所有HTML標籤，而這些標籤看起來很多，但本質上不外是下面這幾種而已。
<DIV>(容器區塊)、<Span>(容器區塊)、<Table>(表格)、<P>(段落)、<Input>(輸入欄位)、<a>(文字)、<h4>(標題文字)。

Grey模板中最多的HTML標籤應該是<DIV>(容器區塊，Container Tag)，這標籤透過Class選擇器或ID選擇器去選擇個別樣式的屬性，容器區塊所涵蓋的範圍很大，這標籤裡就如同容器一樣可以容納其他HTML標籤元素。一個容器裡面還可以裝另一個容器，但是第二個容器裡面的屬性如果沒有重新定義的話，就會繼承(Inherit)上一層容器的屬性。不知道大家有沒有看過俄羅斯娃娃，最外面的一個大娃娃裡面包了一個中娃娃，中娃娃裡面包了小娃娃，整個Grey模板的部落版面基本上就像這樣，因此我們必須知道容器的上下隸屬關係，才能有效控制我們的部落格版面。
從網頁原始碼中，我們可以得知Grey模板的容器區塊約略是這樣的從屬關係：

說實在的，這系列的研究文章並沒有太高深的技術學問，寫這些文章的動機只是想"把磚頭丟出來看能不能砸到專家秀出玉石出來"，希望做為有心想改CSS樣式者的一個入門。

我也不是什麼程式專家，學法律的我，專長向來是套用，套用一切既有的邏輯。CSS的本質並非程式語言，充其量只能說是標籤語法的一部分(嚴格說來是樣式語法)，所以能做的有限，無法像程式語言那般可經過邏輯編排迸出新的功能，故非著作權保護之標的。由於坊間所有的教學文章或書籍，多是資訊背景的人寫的，其實有點寫的太過"天書"，比較適合專攻網頁美術或程式的人，對於只想改自己部落格外觀的人來說，有點太過複雜。所以在這裡，我也拋掉原本法律專欄文字的拘謹，用比較平淺的方式看能不能給朋友們一點入門的幫助。

這教學還是以Grey(三欄式)的模板為主，其他模板的語法請自行參照。

本來把Google的廣告放在Sidebar的區塊裡面，但是受限於版面的大小，無法放置728*90的橫幅式廣告。所以就一直想思考，要找個時間把Google廣告移到最上方，以整體版面來說，放置在Top區塊裡面應該是最合適的。

不過，這面臨一個問題，Google的廣告連結語法文字，要放在哪裡？我知道雖然可以在Blogheader裡面使用JAVASCRIPT和HTML語法，但是因為有字數上的限制，肯定是放不了Google的連結。