目前分類:CSS研究 (11)

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

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

pixnet 的iphone 列表模式
pixnet 的iphone 列表模式

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

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

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

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

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

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

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

前面幾篇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差異的部份。

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

/*(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;/*文字不加底線*/
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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