說實在的，這系列的研究文章並沒有太高深的技術學問，寫這些文章的動機只是想"把磚頭丟出來看能不能砸到專家秀出玉石出來"，希望做為有心想改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選擇器去選擇樣式，這標籤是關於相簿、網誌、留言板等文字連結的區塊，如此就大略可以知道這標籤所規範的範圍了。
我也不是什麼程式專家，學法律的我，專長向來是套用，套用一切既有的邏輯。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選擇器去選擇樣式，這標籤是關於相簿、網誌、留言板等文字連結的區塊，如此就大略可以知道這標籤所規範的範圍了。
全站熱搜
留言列表
資訊 (0)
