【CSS教學】－

“痞客CSS架構表”這裡加上“HTML架構圖示表”給大家一併對照著看，應該會更容易明白。

● 認識模版

目前痞客有提供pixnet二欄式、pixnet三欄式、無名模版、樂多模版、痞客模版，差別在哪？在於標籤的不同！

● 認識標籤

pixnet二欄式：
#Top(橫幅)、#Sidebar(連結列整體)、#Content(文章區整體)、#Comments(回應區整體)...

pixnet三欄式：
#Top(橫幅)、#Sidebar-l(左方連結列整體)、#Content(文章區整體)、#Comments(回應區整體)...

樂多模版：
#banner(橫幅)、#links(連結列整體)、#content(文章區整體)、#comments(回應區整體)...

無名模版：
#banner(橫幅)、#links(連結列整體)、#content(文章區整體)、#comments(回應區整體)...

痞客模版：
#header(橫幅)、#links(連結列整體)、#content(文章區整體)、#comment-box(回應區整體)...

大致上，每種的模版大標籤都類似，僅有些許的不同，但在裡面的小細項就差異很大！例如：

pixnet二欄式：
#BlogHeader a(部落格標題)、.Sidetitle h4(連結列標題)、.mainEntryTitile h3(文章標題)、span.date(文章日期)...

pixnet三欄式：
#BlogHeader a(部落格標題)、.Sidetitle h4(連結列標題)、.mainEntryTitile h3(文章標題)、.date(文章日期)...

樂多模版：
.blogtitle a(部落格標題)、.sidetitle(連結列標題)、h3 .title(文章標題)、.date(文章日期)...

無名模版：
#pageheader h1 a(部落格標題)、.sidetitle(連結列標題)、.articletext h3 .title(文章標題)、.datediv(文章日期)...

痞客模版：
#banner(部落格標題)、.box-title(連結列標題)、.title(文章標題)、.publish(文章日期)...

● 底圖搭配

當然要先試著自己用美工軟體設計個圖，才能下去設計...不然以CSS預設的，你只能有顏色加線條，這樣不是很沒創意？圖怎麼做？請自己試著別人設計好的圖，人家怎麼設計，大概就是那樣...這個圖要怎麼教起，實在很難！我會建議直接先去研究別人已經設計好的...

● 如何開始

了解每一個標籤代表什麼東西後，你可以先試著從基本樣式下去改改看，裡面都會有寫好的完整標籤！從最基本的改改色、改改線條、改改字體去練習。然後再試著設計一張banner去放在橫幅，看是否你設計的圖能照你想的呈現，如果可以，再去研究其他的小細項，甚至更難的部份...自己先試過，不行再問人，否則試都沒試過，誰知道要怎麼教你？

● CSS的書

基本上，我不建議買書，因為其實網路上可以找到的資料很多，買書反而成了很浪費的一件事...但，我有買，所以這裡介紹一下...

打造你的個性化痞客邦：這本完全就是為了痞客邦而生的書，內容還OK，有很詳盡所有模版的標籤、教學，和一些物件的教學。

CSS玩美樣式範例語典：各式各樣寫法的呈現，裡面都有...基本的，到進階的，還蠻容易懂的！

字型

文字顏色	color: #000;
文字大小	font-size: 8pt;
文字字體	font-family: “arial”, dotum;
文字斜體	font-style: italic;
小字體	font-variant: small-caps;
字間距離	letter-spacing: 1pt;
行高	line-height: 15px; (亦可為百分比)
文字粗體	font-weight: bold;
加底線	text-decoration: underline;
加刪除線	text-decoration: line-through;
加頂線	text-decoration: overline;
刪除連線底線	text-decoration: none;
首字大寫	text-transform: capitalize;
英文大寫	text-transform: uppercase;
英文小寫	text-transform: lowercase;
文字靠左	text-align: left;
文字靠中	text-align: center;
文字靠右	text-align: right;
文字分散對齊	text-align: justify;

背景

背景顏色	background: #e9e9e9;
背景圖片不重複	background: url(圖片位址) no-repeat;
背景重複	background: url(圖片位址) repeat;
背景Y軸重複	background: url(圖片位址) repeat-y;
背景X軸重複	background: url(圖片位址) repeat-x;
背景浮水印固定	background: url(圖片位址) fixed;
背景置中	background-position: center;
背景靠左	background-position: left;
背景靠右	background-position: right;
背景靠上	background-position: top;
背景靠下	background-position: bottom;
簡易寫法
background: url(位址) no-repeat top center fixed #fff;

●備註：位址請記得不是複製上方的網址，而是在圖片上方按右鍵內容裡的那個網址！

框線

全框線	border: 1px solid #000;
上框線	border-top: 1px solid #000;
下框線	border-bottom: 1px solid #000;
右框線	border-right: 1px solid #000;
左框線	border-left: 1px solid #000;
框線種類	solid 直線
	dotted 點線
	dashed 虛線
	double 雙線
	groove 立體內凸
	ridge 立體浮凸
	inset 凹框
	outset 凸框