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

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

CSS做的只是MAKE UP版面,讓既有版面模版發生一些外觀上的變化。目前PIXNET提供四組部落格模版,每個模版皆有其差異,類別(Class)與ID選擇器的命名也有所不同。由於很多人是直接到後台套用某個模板的既有樣式,之後再作部份修改,但因為分享樣式的人撰寫CSS的習慣頗有差異,所以常發生套用者找不到特定ID去修改樣式個別值的窘境。基此,我的建議是要學就從源頭開始,這當然是檢視網頁的原始碼。
以我的部落格為例,我沒習慣鎖右鍵(我不懂鎖了右鍵,能真的防什麼?),所以大家可以很簡單的按下滑鼠右鍵觀看原始碼。這篇文章把大家都當作沒學過HTML語言的人,所以我先從網頁原始碼的內涵約略解說一下。首先,網頁是由許多標籤(Tag)組成,每個標籤都是由一組相同的英文字組成,例如<BODY>...</BODY>,在標籤中的任何文字或圖片等內容都會受到標籤所定義屬性的影響,除了原本HTML的標籤的影響外,樣式模板所設置的Class或ID也可讓每個標籤產生不同的變化,CSS是用來延伸HTML而非取代HTML,可說是用來補HTML的不足。以我的部落格為例,諸位可以看到下列這行:
<link rel="stylesheet" title="grey" .....text/css" />
這表示我的部落格是使用grey模板的,所以程式碼中的HTML標籤還添加了grey模板定義的Class或ID。為了方便大家查閱,我將它們整理如下,有重複的部份就不再特別標示出來。
<p class="Upgrade"> 段落標籤,規範瀏覽器升級訊息的段落文字
<div id="Container">區塊容器標籤,規範整個部落格呈現的版面區塊
<div id="Top">區塊容器標籤,規範部落格上方版面區塊
<div id="BlogHeader">區塊容器標籤,規範部落格標題區塊
<div id="BlogDescr">區塊容器標籤,規範部落格描述區塊
<div id="Topmenu">區塊容器標籤,規範我的地盤/相簿/部落格/留言板/名片的連結文字區塊
<div id="Main">區塊容器標籤,規範下方版面區塊
<div id="Sidebar-l">區塊容器標籤,規範左邊欄版面區塊
<div id="Content">區塊容器標籤,規範部落格中欄版面區塊
<div class="mainEntry">區塊容器標籤,規範單篇文章版面區塊
<div class="mainEntryTitle">區塊容器標籤,規範文章標題區塊
<h3>文字標籤,規範文章標題文字
<div class="mainEntryBody">區塊容器標籤,規範文章發表人與日期區塊
<p class="mainEntryBase">段落標籤,規範文章段落
<div class="extended">區塊容器標籤,規範延伸閱讀/同類閱讀/歷史上今天的區塊
<div class="footer">區塊容器標籤,規範註腳列/類別/迴響/引用/編輯/刪除/人氣的區塊
<input type="text" id="trackback_url" class="trackback_url"> Input標籤,規範輸入引用網址的文字欄位
<div id="Comments">區塊容器標籤,規範迴響版面區塊
<h4 class="commentTitle">文字標籤,規範迴響列表(開放留言)文字的屬性
<div class="commentBody">區塊容器標籤,規範單篇迴響版面區塊
<p class="commentheader">段落標籤,規範單篇迴響標題
<p class="commentcontent">段落標籤,規範單篇迴響內容
<span class="commentposterinfo">另一種區塊標籤,規範迴響者姓名
<h4 class="commentTitle reply2">文字標籤,規範下方迴響列表(開放留言)文字的屬性
<div id="Sidebar-r">區塊容器標籤,規範右邊欄版面區塊屬性
<div class="Sideblock">區塊容器標籤,規範右邊版面的欄位區塊屬性
<div class="Sidetitle">區塊容器標籤,規範個別欄位的標題區塊屬性
<div class="Sidebody">區塊容器標籤,規範欄位內容區塊的屬性
<table class="calMonth">表格標籤,規範日曆表格的屬性
<tr class="calMonthNav">表格欄標籤,規範月份選擇欄的屬性
<th class="calMonthBackward">表格儲存格標籤,操作選擇前一月份
<th class="calMonthCurrent">表格儲存格標籤,操作選擇目前月份
<th class="calMonthForward">表格儲存格標籤,操作選擇後一月份
<tr class="calMonthHeader">表格欄標籤,規範每週呈現的區塊
<div class="Sideblock" id="PageviewPlugin">區塊容器標籤,規範參觀人氣區塊的屬性
<div class="Sideblock" id="CategoryPlugin">區塊容器標籤,規範文章分類區塊的屬性
<div class="Sideblock" id="LatestArts">區塊容器標籤,規範近期文章區塊的屬性
<div class="Sideblock" id="ArchivePlugin">區塊容器標籤,規範文章彙整區塊的屬性
<div class="Sideblock" id="LatestComments">區塊容器標籤,規範最新迴響區塊的屬性
<div class="Sideblock" id="SubPlugin">區塊容器標籤,規範最新訂閱區塊的屬性
<div class="Sideblock" id="LinksPlugin">區塊容器標籤,規範我的連結區塊的屬性
<div class="Sideblock" id="RSSPlugin">區塊容器標籤,規範新聞交換(RSS)區塊的屬性
<a class="nodecoration">文字標籤,規範RSS 2.0 feed與Atom 0.3 feed文字的屬性
<div id="pagefooter">區塊容器標籤,規範下方欄版面區塊的屬性
<div id="Bottommenu">區塊容器標籤,規範Copyright區塊的屬性
<div id="Bottom">區塊容器標籤,規範含有 首頁/申請帳號/會員服務專區/登出 等文字的區塊其屬性

如果你實在不知道哪個Class或ID究竟是關係哪個標籤的值,那麼可以用個小技巧去觀察,就是在你網頁原始碼處搜尋,例如我們搜尋Topmenu這選擇器(Selector),就會找到<div id="Topmenu">,這表示這是一個Div(容器區塊)標籤,這容器區塊使用Topmenu這個ID選擇器去選擇樣式,這標籤是關於相簿、網誌、留言板等文字連結的區塊,如此就大略可以知道這標籤所規範的範圍了。

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


留言列表 (1)

發表留言
  • amy
  • 試問~站內文章標題搜尋

    chris
    這篇真是我的寶~~謝謝哩.

    另外.我看到你有掛"圖片搜尋"的功能.
    可否請問你.若想作"站內文章標題的搜尋".有現成語法可以套嗎?
  • 是的,可以直接使用,google有提供現成工具的。不過要問的是你說的站內,是指pixnet全站,還是你自己的部落格而已呢?

    克里斯 於 2007/07/27 14:37 回覆