前言：＜本文發表於2007/09/02 最後修改於2007/09/04 07:25 如語娃娃＞
以下內容可以對照「CSS自訂面板」的語法內容，
‧只要是有「#」後接著6個英數混合成的色碼──十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色──都可以不同的色碼替代原本的色碼，只是「#」不要忘記加了。例如：#FFFFFF(白色)可換成#b23535(咖啡紅)，簡單取得色碼的方法
1.參考巴哈小屋提供的色盤
2.到日本網站的「原色大辭典(
連結)」
‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。
───────────────────────────────────────────
───────────────────────────────────────────
/*--------------------------整體頁面設定--------------------------*//*----整體文字----*/TD{
color:#818181;
/*這個顏色是沒有特別文字效果會呈現的文字顏色，在如語的小屋中可參考橫幅上的勳章2字的灰色*/
font-size:13px;
/*整體文字的字型大小*/
/*觀看自己小屋時，除了按鈕文字(登入、登出、+收藏等等按鈕)外的文字字型大小(包含連結文字)*/
line-height:150%;
/*整體小儲存格的高度，例如勇者素質欄的各格子高度*/
font-family:"Arial";
/*整體文字的字型種類*/
/*基礎：ARIAL可以改成「新細明體」或是其他字體，不過瀏覽者的電腦必須也要有安裝該字體，到小屋時才會看得到小屋設定的字型效果，不然就建議巴友使用一般字型即可*/
/*進階：可以指定多個字型名稱，並以逗號「,」隔開，瀏覽器會依照字型名稱出現的順序去尋找使用者系統上的字型來使用，若所有指定的字型都無法找到，瀏覽器會使用內定的字型*/
word-break: break-all;
word-wrap:break-word;
}
/*---◎連結效果---*/A:link{
color:#1e332c;
text-decoration:none;
}
/*整體還未造訪連結狀態，造訪後、滑鼠移入與此相似*/
/*設定文字裝飾形態，「none(不裝飾)」可改為「underline(文字下方加上底線)」或「line-through(以直線穿過文字)」*/
A:visited{
color:#2d4c42;
text-decoration:none;
}
/*造訪過後連結狀態*/
A:hover{
color:#5b9985;
text-decoration: underline;
}
/*滑鼠移入連結狀態*/
/*以下「.extend」不另補充說明，但是COLOR:後方可以加上色碼修改基本小屋的某些呈現色彩，可以嘗試增加*/.extend{
color:;
}
.extend a:link,.extend a:visited{
color:;
}
/*特殊連結(藍色)及屋主文章留言*/
.extend2{
color:;
}
.extend2 a:link,.extend2 a:visited{
color:;
}
/*GP數與驗證碼顏色*/
/*文章右上的GP顏色*/
.extend3{
color:#8E8E8E;
}
.extend3 a:link,.extend3 a:visited{
color:#8E8E8E;
}
/*灰色－備註與說明文字*/
/*每篇文章(含回應文)的發表時間、標籤文字色、留言欄下方的提醒屋主有權刪除留言之文字色、首頁好友發表文章列表的時間文字顯示色*/
/*----其他共用部分----*/.line{
border-bottom:1px dashed #fcc9d4;
}
/*虛線*/
/*小屋首頁的虛線顏色，如各好友的新增文章分格線(虛線)，顏色即是這邊修改*/
/*其中的「1px」數字可修改，會影響線條的粗細，0代表無線條*/
/*基礎：「dashed(虛線)」亦可變更為solid(實心線)、dotted(點)、double(雙實線)*/
/*進階：立體效果線條──groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)。須經過整合搭配才看得出來，有興趣的人再嘗試吧。*/
.line2{
border-top:1px solid #fcc9d4;
}
/*實線*/
/*巴友回應文章、屋主發表文章、收入精華選擇分類時，輸入欄的邊框*/
/*其中的「1px」數字可修改，會影響線條的粗細，0代表無線條*/
/*基礎：「solid(實心線)」亦可變更為dotted(點)、dashed(虛線)、double(雙實線)*/
/*進階：立體效果線條──groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)。須經過整合搭配才看得出來，有興趣的人再嘗試吧。*/
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;
}
/*文章或畫作的縮圖邊框，自己小屋有最新文章時，該文章簡述前面的圖示邊框(分別是：左右上下)*/
/*其中的「1px」數字可修改，會影響線條的粗細，0代表無線條*/
/*基礎：「solid(實心線)」亦可變更為dotted(點)、dashed(虛線)、double(雙實線)*/
/*進階：立體效果線條──groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)。須經過整合搭配才看得出來，有興趣的人再嘗試吧。*/
/*◎以下輸入欄位的呈現樣式*/.home_input1{
color:#999999;
border:1px solid #EFEFEF;
background-color:#FFF;
}
/*input實線(只用於引用文章網址處)*/
.home_input2{
color:#028760;
/*input實線*/
/*基礎：color是為輸入欄位的文字顏色，boder是為欄位的整體框線設定，background-color是為輸入欄位的背景色*/
border:1px solid #fcb4b4;
/*欄位框線色*/
background-color:#FFF;
/*無圖片時的背景色*/
background-image : url(http://myhome.apbb.com.tw/indream228/006-4.jpg);
/*背景圖的網址*/
background-repeat:no-repeat;
/*背景圖不重複*/
background-attachment: fixed;
/*背景圖不移動─浮水印*/
background-position:95% 90%;
/*背景圖的擺放位置(X軸，Y軸)*/
}
/*進階：「background」可設定欄位背景圖(回應留言、發文驗證碼)、設定圖片呈現的位置，就是目前如語回應文章時的留言欄底圖，加入背景圖的語法可參考前一篇教學。若不加背景圖，「background」的語法可刪除。*/
----------------------------------------------------
對本篇如有疑問，歡迎提出討論ˊˇˋ~
陸續會將巴哈提供的基本ＣＳＳ個別介紹。
創作內容
【小屋】CSS自訂版面：一、整體文字＆其他共用部分篇
─══════╮ (3)