目前分類：CSS研究 (11)

瀏覽方式： 標題列表 簡短摘要
iPhone 造成 3G smart Phone 手機市場吵的震天軋響的時候，痞客邦還在搞眸眸大夢，不過，現在似乎終於醒了。

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

pixnet 的iphone 列表模式
pixnet 的iphone 列表模式
(繼續閱讀...)

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

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

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

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

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

2.站方提供了幾種樣式可以直接套用，其中幾個"素顏"版型，站方很努力的把所有標籤都整理出來，也都加了中文說明，方便專家們可以開發樣式跟大家分享，只可惜裡面有一個很明顯的bug。

(繼續閱讀...)

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

▲top
前面幾篇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差異的部份。
(繼續閱讀...)

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

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

這表示在Container這個選擇器下，可以指定文字與圖片連結的表現形式，以及當滑鼠移到這連結時，所出現的hover效果。在一般網頁原始碼中，連結的標籤的程式碼會是這樣的形式：
<A HREF="指定的連結位址">設定作為連結的文字內容</A>

這原始碼呈現出的網頁效果，會只是簡單的底線表示此文字帶有連結，當滑鼠移到連結處時，就會根據瀏覽器的設定更改顏色。如果我們想讓某一個容器標籤下的連結式樣有些不同，我們就必須在這個容器標籤下，額外宣告一種特殊的上下文選擇器(Contextual Selector)。以Container容器為例，在這容器標籤下所連結的一段文字，網頁原始碼會大概是下列的情況：<Div ID=Container>...<A HREF=""></A>...</Div>

這表示如果我想讓Conatiner容器下的連結標籤所呈現的樣式效果，跟原本的網頁效果不同，那我就得額外如下宣告：
#Conatiner a {
color:#3399FF;/*顏色改為#3399FF色碼*/
text-decoration:none;/*文字不加底線*/
}
(繼續閱讀...)

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

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

/*(Step 3)設定字型的屬性*/
font-family:"Trebuchet MS",細明體,新細明體;
/*設定字型為"Trebuchet MS"、細明體、新細明體這幾種字型，英文字型須加上引號表示，字型之間要以半形逗點作區隔。當然，你可以設定一堆奇特的字型，但是如果其他人沒這字型的，你設定了也沒用。*/
(繼續閱讀...)

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

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

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

轉到CSS樣式語法，也同樣是這個道理，子標籤如果要有自己的樣式屬性，就得站出來革命，表達「我要有自己的個性」，得在CSS中提出自己個別樣式的宣告，不然子標籤就必須繼承父標籤中的樣式。無論如何，先不管未來自己的小孩想不想繼承老爸留下的遺產，但當老爸的一定要爭氣，至少不能留下爛攤子給兒孫收拾。<Div id= "Container ">這個容器標籤也相同，我們得先定義好它的所有屬性，這樣日後在處理其他標籤時，就會輕鬆很多，如果不打算個別宣告，就可以讓其他子標籤直接繼承它的屬性就好。
(繼續閱讀...)

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

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

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

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

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

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

CSS做的只是MAKE UP版面，讓既有版面模版發生一些外觀上的變化。目前PIXNET提供四組部落格模版，每個模版皆有其差異，類別(Class)與ID選擇器的命名也有所不同。由於很多人是直接到後台套用某個模板的既有樣式，之後再作部份修改，但因為分享樣式的人撰寫CSS的習慣頗有差異，所以常發生套用者找不到特定ID去修改樣式個別值的窘境。基此，我的建議是要學就從源頭開始，這當然是檢視網頁的原始碼。
(繼續閱讀...)

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

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

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

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

所以，還是動了BlogDescr這區塊的腦筋，之前我曾經改過醜醜的地盤區塊，我知道這裡可以放置圖片的HTML語法，只要在正常文字描述後放入就可以，不過丟進Google的JAVASCRIPT內容，會變得如何?倒是還沒試過。

和以前一樣，我把Google的廣告語法複製後，直接到後台的網誌管理，進到網誌描述裡面貼上這些語法內容。約如下方圖示：

(繼續閱讀...)

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

▲top
在寫過程之前，先談談為何要換掉這個部份。
首先，這區塊的個別名稱不夠友善，原本是希望文字是「克里斯的部落格」、「克里斯的相簿」之類的，但是PIXNET程式設計的部份，是用帳號名稱來替代，而且是不能更改，所以想換掉他。
其次，這區塊只能設定全部呈現或不呈現，沒有辦法選擇自己想設定呈現的部份，實在不人性。
最後，我喜歡用圖表達，所以一定要換掉它。 這次的教學是以grey 模板為主，其他的模板就自己研究吧!!
(繼續閱讀...)

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

▲top