縱橫天下-圖文教學詩詞桌布 : 【改版】天空部落CSS改版法3-舊版

November 15, 2006

常用CSS屬性串聯樣式表

border-left-width 設定左邊框線厚度
border-right-width 設定右邊框線厚度
border-width 設定邊框厚度
border-style 設定邊框樣式
border-collapse 邊框線重疊
float 設定文繞圖
text-indent 縮排
text-transform 大小寫轉換
font-family 字型名稱
font-style 字型樣式
font-variant 大小寫變換
letter-spacing 文字間距
line-height 設定行高
list-style-type 項目符號樣式
margin 設定邊界
margin-top 設定上邊界
margin-bottom 設定下邊界
margin-left 設定左邊界
margin-right 設定右邊界
padding 設定邊距
table-layout 表格配置方式

CSS文字屬性串聯樣式表

color : #525050 /*文字色彩*/
font-family : 新細明體; /*文字字型*/
font-family : 標楷體;
font-size : 9pt; /*文字大小*/
font-style : itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設定行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標字*/
vertical-align:super; /*上標字*/
text-decoration:line-through; /*加刪除線*/
text-decoration:overline; /*加頂線*/
text-decoration:underline; /*加底線*/
text-decoration:none; /*刪除連結底線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字靠右對齊*/
text-align:left; /*文字靠左對齊*/
text-align:center; /*文字置中對齊*/

資源共享24-天空部落CSS改版法-第三版


	001
	捲軸 Scrollbar	捲軸
	scrollbar-face-color	移動捲軸的面板顏色
	scrollbar-highlight-color	按鈕與移動捲軸-左上內邊框
	scrollbar-shadow-color	按鈕與移動捲軸-右下內邊框
	scrollbar-3dlight-color	按鈕與移動捲軸-左上外邊框
	scrollbar-darkshadow-color	按鈕與移動捲軸-右下外邊框
	scrollbar-arrow-color	箭頭的顏色
	scrollbar-track-color	捲軸底部顏色
	scrollbar-base-color	整體主色，若其他值有設定，則會被覆蓋
	語法
	HTML
	{
	SCROLLBAR-FACE-COLOR: #FFFFee;
	SCROLLBAR-HIGHLIGHT-COLOR: #b3b3b3;
	SCROLLBAR-SHADOW-COLOR: #FFFFCC;
	SCROLLBAR-3DLIGHT-COLOR: #FFFFCC;
	SCROLLBAR-ARROW-COLOR: #FFFFCC;
	SCROLLBAR-TRACK-COLOR: #FFFFCC;
	SCROLLBAR-DARKSHADOW-COLOR: #FFFFCC;
	}
	圖解


	002
	A 部落格整體連結文字顏色	連結文字
	TEXT-DECORATION	連結文字底線
	text-decoration: underline	連結文字有底線
	text-decoration: none	連結文字無底線
	語法
	A:link	/一般連結文字的顏色/
	{
	COLOR: #6633ff; TEXT-DECORATION: none;
	}
	A:visited	/連結按過以後的文字顏色/
	{
	COLOR: #24619e; TEXT-DECORATION: none;
	}
	A:hover	/滑鼠移到連結時文字的顏色/
	COLOR: #ff0000;
	padding:0px;
	text-decoration:none;
	}
	A:active	/滑鼠點選連結文字時的顏色/
	COLOR: #6633ff;
	text-decoration:none;
	}
	圖解

	BACKGROUND	背景
	BACKGROUND: #b3b3b3;	背景顏色
	FONT-FAMILY	字型
	FONT-FAMILY: 新細明體;	新細明體
	FONT-FAMILY: 標楷體	標楷體
	A:hover	/滑鼠移到連結時文字的顏色+背景/
	{
	BACKGROUND: #b3b3b3;
	COLOR: #ff0000; TEXT-DECORATION: none;
	}
	A:active	/滑鼠點選連結文字時的顏色+背景+字型/
	{
	BACKGROUND: #002040; COLOR: #6633ff;
	FONT-FAMILY: 新細明體; TEXT-DECORATION: none;
	}
	圖解

超連結字體呈現三種顏色-實用語法026
text-decoration:line-through; /*加刪除線*/
text-decoration:overline; /*加頂線*/
text-decoration:underline; /*加底線*/
text-decoration:none; /*刪除連結底線*/

background-attachment /*背景是否固定 */
background-position /*背景圖片的位置 */
background-repeat /*重複貼圖方式 */
background-repeat: no-repeat; /*不重複貼圖方式 */
background-color /*背景顏色 */
background-image /*背景圖片*/

color : #525050 /*文字色彩*/
font-size /*字型大小 */
font-size : 9pt; /*文字大小*/
font-style /*字型樣式 */
font-style : itelic; /*文字斜體*/
font-variant /*大小寫變換*/
font-family : 新細明體; /*文字字型*/
font-variant:small-caps; /*小字體*/
font-weight /*字型粗細 */
font-weight:bold; /*文字粗體*/

003

/*整個網頁頁面設定 */
BODY
{
BORDER-RIGHT: medium none; BACKGROUND-POSITION: right top; BORDER-TOP: medium none; FONT-SIZE: 13px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(http://pics1.blog.yam.com/17/legacy/t/twl/30b88cc3.jpg); MARGIN: 0px; BORDER-LEFT: medium none; COLOR: #000000; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: repeat; FONT-FAMILY: Arial, 新細明體, taipei, Helvetica, sans-serif;
}

BORDER-RIGHT: medium none; /*設定右邊框線*/
BACKGROUND-POSITION: right top; /*背景圖片的位置 */
BORDER-TOP: medium none; /*設定上邊框線*/
FONT-SIZE: 13px; /*字型大小 */
BACKGROUND-ATTACHMENT: scroll; /*背景圖片是否固定 */
BACKGROUND-IMAGE: url(http://pics1.blog.yam.com/17/legacy/t/twl/30b88cc3.jpg);
MARGIN: 0px; /*設定邊界*/
BORDER-LEFT: medium none; /*設定左邊框線*/
COLOR: #000000; /*字型顏色 */
BORDER-BOTTOM: medium none; /*設定下邊框線*/
BACKGROUND-REPEAT: repeat; /*背景圖片貼圖方式-重複 */
FONT-FAMILY: Arial, 新細明體, taipei, Helvetica, sans-serif; /*文字字型*/

看完上面二個後，大家應該對ＣＳＳ有所了解了～
ＣＳＳ就是方便改版，使網頁更流暢，

ＣＳＳ就是
目標 { 指令-動作;指令-動作;指令-動作;指令-動作; }
每一個 ( 指令-動作 ) 之間以;做區隔
不是更改就是加上～

範例：
目標 ( 整個網頁頁面設定 )
{
指令 ( 背景圖片貼圖方式 ) - 動作 ( 重複 ) ;
}

BODY
{
BACKGROUND-REPEAT: repeat;
}

004

A IMG
{
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px;
}

005

IMG.profile
{
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 5px; BORDER-RIGHT-WIDTH: 0px;
}

006

/*相片單張瀏覽分隔線設定*/
HR
{
COLOR: #e3eaff; HEIGHT: 1px;
}

007/*部落格整體框架設定*/
DIV#mainFrame
{
BORDER-RIGHT: #478c8c 0px solid; BACKGROUND-POSITION: 0% 0%; BORDER-TOP: #478c8c 0px solid; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: none; MARGIN: 0px auto; BORDER-LEFT: #478c8c 0px solid; WIDTH: 997px; BORDER-BOTTOM: #478c8c 0px solid; BACKGROUND-REPEAT: repeat; POSITION: relative; TEXT-ALIGN: left;
}

008/*上方banner設定 */ ( 大圖 )
DIV#banner
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(http://pics1.blog.yam.com/17/legacy/t/twl/97d3d903.jpg); BORDER-LEFT: medium none; WIDTH: 997px; COLOR: #574948; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: no-repeat; HEIGHT: 600px;
}

009/*天空連結設定*/
DIV#companyBar
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; Z-INDEX: 10; BORDER-LEFT: medium none; WIDTH: 135px; COLOR: #ffffcc; BORDER-BOTTOM: medium none; POSITION: absolute;
}

#companyBar SPAN.logo
{
BACKGROUND: url(../../images/logo_b.gif) no-repeat; LEFT: -24px; WIDTH: 19px; COLOR: #fff; POSITION: absolute; TOP: 3px; HEIGHT: 12px;
}

010/*天空連結字尚未連結過的超連結設定*/
DIV#companyBar A:link
{
COLOR: #ffffcc; TEXT-DECORATION: none;
}

011/*天空連結字拜訪過的連結設定*/
DIV#companyBar A:visited
{
COLOR: #ffffcc; TEXT-DECORATION: none;
}

012/*天空連結字游標在連結上方設定*/
DIV#companyBar A:hover
{
COLOR: #ffffcc; TEXT-DECORATION: none;
}

013/*天空連結字正按下的連結設定*/
DIV#companyBar A:active
{
COLOR: #ffffcc; TEXT-DECORATION: none;
}

014/*部落格標題設定*/
#banner DIV.bannerTitle
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-WEIGHT: bold; FONT-SIZE: 35px; LEFT: 170px; BORDER-LEFT: medium none; WIDTH: 421px; BORDER-BOTTOM: medium none; FONT-FAMILY: 標楷體; POSITION: absolute; TOP: 65px; TEXT-ALIGN: right;
}

015/*部落格描述設定*/
#banner DIV.description
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 13px; RIGHT: 145px; BORDER-LEFT: medium none; WIDTH: 388px; COLOR: #09090f; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 560px; TEXT-ALIGN: right;
}

016/*廣告連結設定*/
#adText
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; LEFT: -350px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 5px;
}

017/*廣告連結設定*/
#adText A
{
FONT-SIZE: 10px; COLOR: #000033;
}

018/*頻道選擇*/
#navBar
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 15px; RIGHT: 1px; BORDER-LEFT: medium none; COLOR: #ffffcc; LINE-HEIGHT: 20px; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 580px;
}

019/*登入連結設定*/
#linkLogin
{
BORDER-RIGHT: medium none; DISPLAY: block; LEFT: -589px; FLOAT: right; MARGIN-LEFT: 590px; COLOR: #ffffcc; POSITION: absolute; TOP: -20px;
}

020/*頻道選擇連結字尚未連結過的超連結*/
#navBar A:link
{
TEXT-DECORATION: none;
}

021/*頻道選擇拜訪過的連結*/
#navBar A:visited
{
TEXT-DECORATION: none;
}

022/*頻道選擇*/
#navBar A:hover
{
TEXT-DECORATION: none;
}

023/*頻道選擇*/
#navBar A:active
{
TEXT-DECORATION: none;
}

024/*頻道選擇*/
#navBar SPAN.navLink
{
MARGIN-RIGHT: 5px;
}

025/*中間大區塊設定*/
#contentBlock
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: none; BORDER-LEFT: medium none; WIDTH: 997px; PADDING-TOP: 3px; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: no-repeat; TEXT-ALIGN: left;
}

026/*中間大區塊設定2*相片單張瀏覽設定中間區塊不包括下方copyright*/
#contentBlock2
{
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; WIDTH: 758px; PADDING-TOP: 0px; POSITION: relative; TEXT-ALIGN: left;
}

027/*旁邊大區塊設定*/
#sideBlock
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; Z-INDEX: 2; FLOAT: right; BACKGROUND-IMAGE: none; BORDER-LEFT: medium none; WIDTH: 199px; LINE-HEIGHT: 1.4em; PADDING-TOP: 0px; BORDER-BOTTOM: medium none;
}

028/*旁邊大區塊設定連結字尚未連結過的超連結*/
#sideBlock A:link
{
TEXT-DECORATION: none;
}

029/*旁邊大區塊拜訪過的連結設定*/
#sideBlock A:visited
{
TEXT-DECORATION: none;
}

030/*旁邊大區塊設定*/
#sideBlock A:hover
{
;
}

031/*旁邊大區塊設定*/
#sideBlock A:active
{
;
}

032/*旁邊大區塊設定*旁邊小區塊設定*/
#sideBlock DIV.sideColumn
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND-IMAGE: none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; LETTER-SPACING: 1px;
}

033/*旁邊大區塊設定*旁邊小區塊標題設定*/
#sideBlock DIV.sideTitle
{
BORDER-TOP-WIDTH: 1px; BACKGROUND-POSITION: 0% 0%; PADDING-LEFT: 35px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 20px; BORDER-LEFT-COLOR: #8c9fb3; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(http://pics23.blog.yam.com/5/userfile/w/www888/album/144fa84db37929.gif); PADDING-BOTTOM: 5px; BORDER-TOP-COLOR: #8c9fb3; PADDING-TOP: 10px; BORDER-BOTTOM: #8c9fb3 1px solid; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: 標楷體; LETTER-SPACING: 3px; BORDER-RIGHT-WIDTH: thin; BORDER-RIGHT-COLOR: #8c9fb3;
}

034/*旁邊大區塊設定*/
#sideBlock SPAN.sideTitle
{
PADDING-LEFT: 35px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(http://pics.blog.yam.com/themes/alley52/images/title2.jpg); PADDING-BOTTOM: 4px; COLOR: #4ea9e5; PADDING-TOP: 10px; LETTER-SPACING: 3px;
}

035/*中間大區塊設定*旁邊小區塊框線設定*/
#contentBlock DIV.sideContent
{
BORDER-RIGHT: medium none; PADDING-RIGHT: 7px; BORDER-TOP: medium none; PADDING-LEFT: 7px; PADDING-BOTTOM: 7px; BORDER-LEFT: medium none; LINE-HEIGHT: 18px; PADDING-TOP: 7px; BORDER-BOTTOM: medium none;
}

036/*部落格整體框架設定2*相簿單張瀏覽內頁大區塊設定*/
DIV#mainFrame2
{
BORDER-RIGHT: #478c8c 1px solid; BORDER-TOP: #478c8c 1px solid; BACKGROUND: url(images/bg_contentblock.gif) #fff; MARGIN: 25px auto; BORDER-LEFT: #478c8c 1px solid; WIDTH: 778px; BORDER-BOTTOM: #478c8c 1px solid; POSITION: relative; TEXT-ALIGN: left;
}

037/*companyBar設定 */
#mainFrame2 #companyBar
{
LEFT: 635px; COLOR: #3366cc; TOP: -20px;
}

038/*companyBar設定 */
#mainFrame2 #companyBar A
{
LEFT: 635px; COLOR: #3366cc; TOP: -20px;
}

#mainFrame2 SPAN.cbar
{
FLOAT: right;
}

039/*回部落格首頁連結*/
#mainFrame2 SPAN.backMenu
{
RIGHT: 655px; WIDTH: 110px; POSITION: absolute; TOP: 0px;
}

040/*快速鍵...*/
SPAN.pageCtrl
{
DISPLAY: block; FONT-SIZE: 12px; MARGIN-RIGHT: 20px; TEXT-ALIGN: right;
}

041/*相簿旁邊大區塊設定(相簿分類、相簿閱覽統計、贊助商廣告、好友連結)*/
#adFrame
{
WIDTH: 150px; COLOR: #DC006B; POSITION: absolute; TOP: 610px; TEXT-ALIGN: left;
}

042/*相簿旁邊大區塊設定(相簿分類、相簿閱覽統計、贊助商廣告)*相簿旁邊小區塊設定*/
#adFrame DIV.rightColumn
{
MARGIN: 7px 1px 0px; LETTER-SPACING: 1px;
}

043/*推薦這個部落格設定*連續播放*/
DIV.pageCtrl
{
DISPLAY: block; FONT-SIZE: 14px; MARGIN-RIGHT: 20px; TEXT-ALIGN: right;
}

044/*相簿標題設定*/(hung888的相簿)
SPAN.usersAlbumTitle
{
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #3838b3; LINE-HEIGHT: 30px; LETTER-SPACING: 2px;
}

相簿旁邊大區塊設定(瀏覽統計、贊助商廣告、好友連結...)

045/*相簿首頁區塊設定*/
#bodyFrame
{
MARGIN-TOP: 10px; BACKGROUND: url(images/bean.jpg) no-repeat left bottom; LEFT: 155px; PADDING-BOTTOM: 250px; WIDTH: 410px; POSITION: relative; TEXT-ALIGN: left;
}

046/*相簿首頁區塊設定*每本相簿大區塊設定*/
#bodyFrame TABLE.albumList
{
MARGIN-TOP: 0px;
}

047/*相簿首頁區塊設定*/
#bodyFrame TD.albumList
{
FONT-SIZE: 13px; WIDTH: 200px; HEIGHT: 180px; TEXT-ALIGN: center;
}

048/*相簿封面小區塊四邊設定*/
TD.albumList IMG
{
BORDER-RIGHT: #478c8c 1px solid; BORDER-TOP: #478c8c 1px solid; BORDER-LEFT: #478c8c 1px solid; BORDER-BOTTOM: #478c8c 1px solid;
}

049/*每本相簿資訊(相片數、人氣)*/
#bodyFrame TD.description
{
PADDING-BOTTOM: 20px; LINE-HEIGHT: 1.4em; BORDER-BOTTOM: #478c8c 1px solid;
}

050/*每本相簿標題設定*大相片名稱*/
#bodyFrame DIV.albumTitle
{
WIDTH: 100%; COLOR: #aa88ff; HEIGHT: 14px; TEXT-ALIGN: center;
}

051/*每本相簿發表時間設定*/
#bodyFrame DIV.date
{
COLOR: #99ccff;
}

052/*相簿旁邊大區塊設定(瀏覽統計、贊助商廣告、好友連結...)*相簿旁邊標題設定*/
#adFrame DIV.rightTitle
{
PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; COLOR: #611BA3; PADDING-TOP: 10px; FONT-FAMILY: 新細明體; LETTER-SPACING: 3px;
}

053/*相簿旁邊大區塊設定(瀏覽統計、贊助商廣告、好友連結...)*相簿旁邊內容區塊設定*/
#adFrame DIV.rightContent
{
PADDING-RIGHT: 7px; PADDING-LEFT: 10px; PADDING-BOTTOM: 7px; LINE-HEIGHT: 18px; PADDING-TOP: 7px;
}

054/*每本相簿封面區塊設定*/
#bodyFrame #bodyFrame TD.albumList
{
;
}

055/*相片大區塊設定*/
#rightBlock
{
BACKGROUND: url(images/bean.jpg) no-repeat left bottom; PADDING-BOTTOM: 200px; MARGIN: 2px 2px 2px 15px; OVERFLOW: hidden; WIDTH: 550px; HEIGHT: 100%; TEXT-ALIGN: left;
}

056/*誰誰誰的相簿標題設定*/(夢隨風飄-笑傲天空)
DIV.usersAlbumTitle
{
MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 16px; LINE-HEIGHT: 30px; LETTER-SPACING: 2px;COLOR: #611BA3;
}

057/*誰誰誰的相簿標題連結字設定*/(hung888的相簿)
DIV.usersAlbumTitle A:link
{
COLOR: #003399;
}

CSS-誰誰誰的相簿標題設定

058/*相簿所在分類設定*/
DIV.bigNote
{
COLOR: #aaa;
}

059/*相片內頁相框設定*/
TD.albumShow
{
MARGIN-TOP: 570px; WIDTH: 125px; COLOR: #2e2e2e; HEIGHT: 120px; TEXT-ALIGN: center;
}

060/*相片內頁相框設定*/
TD.albumShow IMG
{
BORDER-RIGHT: #478c8c 1px solid; BORDER-TOP: #478c8c 1px solid; BORDER-LEFT: #478c8c 1px solid; BORDER-BOTTOM: #478c8c 1px solid;
}

TD.albumDes
{
WIDTH: 125px; COLOR: #808080; BORDER-BOTTOM: #478c8c 1px solid; TEXT-ALIGN: center;
}

061/*相簿當日人氣設定*/
.statistic
{
TEXT-ALIGN: right;
}

062/*大相片名稱*/
DIV.albumTitle
{
FONT-SIZE: 13px; WIDTH: 100%; COLOR: #77aede; HEIGHT: 14px; TEXT-ALIGN: center;
}

063/*大相片設定*/
DIV.albumPhoto
{
TEXT-ALIGN: center;
}

064/*大相片設定邊框/
DIV.albumPhoto IMG
{
BORDER-RIGHT: #478c8c 1px solid; BORDER-TOP: #478c8c 1px solid; BORDER-LEFT: #478c8c 1px solid; BORDER-BOTTOM: #478c8c 1px solid;
}

065/*大相片下面預覽小相片整個區塊設定*/
TABLE.albumCache
{
MARGIN-TOP: 20px; MARGIN-BOTTOM: 20px;
}

066/*大相片下面預覽小相片個別區塊設定*/
TD.albumCache
{
FONT-SIZE: 13px; WIDTH: 125px; COLOR: blue; HEIGHT: 125px;
}

067/*大相片下面預覽小相片個別區塊相片邊框設定*/
TD.albumCache IMG
{
BORDER-RIGHT: #478c8c 1px solid; BORDER-TOP: #478c8c 1px solid; BORDER-LEFT: #478c8c 1px solid; BORDER-BOTTOM: #478c8c 1px solid;
}

068/*留言區塊(不包含標題)/
DIV.imageBody
{
FONT-SIZE: 13px; LINE-HEIGHT: 22px;
}

069/*版主回覆*/
DIV.bmreply
{
BACKGROUND: url(http://pics8.blog.yam.com/4/userfile/h/hung888/album/144907da9a2dd3.jpg); COLOR: #ffffff;
}

DIV.bmreply
{
BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; FONT-SIZE: 12pt; BACKGROUND: url(http://pics8.blog.yam.com/4/userfile/h/hung888/album/144960d67c1846.jpg); BORDER-LEFT: 0px solid; COLOR: #ffffff; BORDER-BOTTOM: 0px solid; FONT-FAMILY: 新細明體;
}

070/*留言內文*/
DIV.commentBody
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11pt; PADDING-BOTTOM: 8px; COLOR: #003399; PADDING-TOP: 8px;
}

版主回覆02

071
DIV.secretMsg
{
PADDING-LEFT: 16px; FONT-SIZE: 15px; COLOR: red;
}

DIV.commentNote /*網誌回應區分隔線設定*/
{
COLOR: #999; BORDER-BOTTOM: #478c8c 1px solid; TEXT-ALIGN: right;
}

072/*相片留言處的標題*/
DIV.albumMenu
{
FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #77aede; LINE-HEIGHT: 30px;
}

073/*文章(日記、播客)大區塊*/
DIV#articleBlock
{
BORDER-RIGHT: medium none; PADDING-RIGHT: 2px; BACKGROUND-POSITION: 0% 0%; BORDER-TOP: medium none; PADDING-LEFT: 2px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: medium none; WIDTH: 778px; LINE-HEIGHT: 1.7em; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: no-repeat;
}

#articleBlock FONT
{
LINE-HEIGHT: normal;
}

074/*我要留言這四個字*/
#articleBlock DIV.childMenu
{
FONT-WEIGHT: bold; FONT-SIZE: 24px; BACKGROUND: url(http://pics8.blog.yam.com/5/userfile/h/hung888/album/144db797e3ab85.gif) no-repeat; COLOR: #999; LINE-HEIGHT: 50px; FONT-FAMILY: 標楷體;
}

DIV.articleTop
{
;
}

075/*文章及留言板區塊分隔線設定(留言內文)*/
DIV.articleColumn
{
FONT-SIZE: 13px; BORDER-BOTTOM: #455d75 1px solid;
}

更改留言版字的顏色

TABLE.articleColumn
{
BORDER-BOTTOM: #478c8c 1px solid;
}

076/*文章及留言板區塊框線設定(留言內文)*留言內文表格/
DIV.articleColumn TABLE
{
;
}

TD.MsgContent
{
;
}

077/*文章標題設定*/
DIV.articleTitle
{
CLEAR: both; BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BACKGROUND-POSITION: 0% 0%; BORDER-TOP: medium none; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 18px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(http://pics5.blog.yam.com/4/userfile/h/hung888/album/14482b581c814c.gif); PADDING-BOTTOM: 25px; BORDER-LEFT: medium none; PADDING-TOP: 48px; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: no-repeat;
}

078/*文章標題設定連結字尚未連結過的超連結*/
DIV.articleTitle A:link
{
TEXT-DECORATION: none;
}

079/*文章標題設定拜訪過的連結*/
A:visited
{
TEXT-DECORATION: none;
}

080/*文章標題設定*/
DIV.articleTitle A:hover
{
FONT-SIZE: 36px; COLOR: #f50505;
}

081/*文章標題設定*/
DIV.articleTitle A:active
{
FONT-SIZE: 50px; COLOR: #ffffff;
}

082/*文章標題設定*/
DIV.articleTitle A:active
{
;
}

DIV.menuTitle
{
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #a66; LINE-HEIGHT: 30px;
}

083/*文章時間設定*/
DIV.articleCategory
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; PADDING-BOTTOM: 2px; MARGIN-LEFT: 5px; BORDER-LEFT: medium none; COLOR: #000033; BORDER-BOTTOM: #478c8c 0px solid;
}

084/*文章內文設定*/
DIV.articleBody
{
PADDING-LEFT: 10px; FONT-SIZE: 13px; COLOR: #051536; LINE-HEIGHT: 1.9em; FONT-FAMILY: arial, 新細明體, sans-serif; HEIGHT: 100%;
}

.articleBody FONT
{
;
}

085/*文章摘要設定*/
DIV.articleSummary
{
BORDER-RIGHT: #eee 0px solid; PADDING-RIGHT: 0px; BACKGROUND-POSITION: right bottom; BORDER-TOP: #eee 0px solid; PADDING-LEFT: 0px; FONT-SIZE: 13px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(http://pics5.blog.yam.com/6/userfile/h/hung888/album/1455632418d2fc.jpg); PADDING-BOTTOM: 50px; BORDER-LEFT: #eee 0px solid; LINE-HEIGHT: 1.8em; PADDING-TOP: 15px; BORDER-BOTTOM: #eee 0px solid; BACKGROUND-REPEAT: no-repeat; HEIGHT: 100%;
}

.articleSummary FONT
{
;
}

DIV.articleInfo
{
FONT-SIZE: 13px;
}

086/*文章發表資訊設定*/
DIV.articleLink
{
CLEAR: both; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #5396db; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; TEXT-ALIGN: right;
}

087/*文章區塊底層*/
DIV.articleTail
{
;
}

#articleBlock DIV.trackbackURL
{
BORDER-RIGHT: #478c8c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #478c8c 1px solid; MARGIN-TOP: 10px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #478c8c 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #478c8c 1px solid;
}

#articleBlock DIV.trackbackTitle
{
FONT-WEIGHT: bold; FONT-SIZE: 13px;
}

#articleBlock DIV.trackbackTitle A
{
COLOR: #800000;
}

#articleBlock DIV.trackbackBody
{
FONT-SIZE: 13px;
}

#articleBlock SPAN.trackbackBodyTitle
{
FONT-WEIGHT: bold; COLOR: #404040;
}

088/*copyright(底層大區塊) 設定*/
DIV#copyright
{
CLEAR: both; BORDER-RIGHT: medium none; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 0% 0%; BORDER-TOP: #1a3c5e 1px solid; PADDING-LEFT: 8px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 50px; BORDER-LEFT: medium none; PADDING-TOP: 5px; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: repeat; LETTER-SPACING: 0.15em; TEXT-ALIGN: center;
}

089/*copyright(底層大區塊) 設定*/
DIV#copyright IMG
{
MARGIN-LEFT: 16px; MARGIN-RIGHT: 2px;
}

SPAN.highlight
{
FONT-WEIGHT: bold;
}

DIV.rightPage
{
MARGIN-BOTTOM: 10px; TEXT-ALIGN: center;
}

090/*文章日期*/
#articleBlock DIV.articleTopTitle
{
FONT-SIZE: 18px; COLOR: #003399; FONT-FAMILY: georgia, verdana, arial;
}

FORM
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}

SELECT
{
FONT-SIZE: 12px; COLOR: #888; FONT-FAMILY: sans-serif, arial;
}

091/*確定取消按鈕*/
INPUT.btn
{
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; FONT-FAMILY: sans-serif, arial;
}

092/*表格*/
INPUT.text
{
BORDER-RIGHT: #478c8c 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #478c8c 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BACKGROUND: #eee; PADDING-BOTTOM: 2px; BORDER-LEFT: #478c8c 1px solid; COLOR: #666; PADDING-TOP: 2px; BORDER-BOTTOM: #478c8c 1px solid; FONT-FAMILY: arial, 新細明體, sans-serif;
}

093/*表格輸入*/
TEXTAREA
{
BORDER-RIGHT: #478c8c 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #478c8c 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BACKGROUND: #eee; PADDING-BOTTOM: 2px; BORDER-LEFT: #478c8c 1px solid; COLOR: #666; PADDING-TOP: 2px; BORDER-BOTTOM: #478c8c 1px solid; FONT-FAMILY: arial, 新細明體, sans-serif;
}

H2
{
MARGIN-BOTTOM: 0px;
}

SPAN.calendar
{
MARGIN-LEFT: 5px; MARGIN-RIGHT: 5px; TEXT-ALIGN: center;
}

SPAN.calendar A
{
;
}

TABLE.album
{
MARGIN-TOP: 10px; FONT-SIZE: 12px; MARGIN-BOTTOM: 20px; TEXT-ALIGN: center;
}

TD.album
{
WIDTH: 200px; HEIGHT: 120px;
}

TD.album IMG
{
BORDER-RIGHT: #478c8c 1px solid; BORDER-TOP: #478c8c 1px solid; BORDER-LEFT: #478c8c 1px solid; BORDER-BOTTOM: #478c8c 1px solid;
}

TABLE.album TD.description
{
WIDTH: 200px;
}

094/*旁邊大區塊設定*/
#sideBlock UL
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}

#navmenu LI
{
PADDING-RIGHT: 2px; PADDING-LEFT: 1px; FLOAT: left; PADDING-TOP: 2px; POSITION: relative;
}

#navmenu LI A
{
PADDING-RIGHT: 2px; PADDING-LEFT: 1px; FLOAT: left; PADDING-TOP: 2px; POSITION: relative;
}

095/*訂閱浮動視窗選項背景設定 */
#navmenu LI UL
{
DISPLAY: none; LEFT: 0px; COLOR: #444; PADDING-TOP: 5px; POSITION: absolute; TOP: 1em;
}

096/*訂閱浮動視窗選項背景設定 *LI*/
#navmenu LI UL LI
{
CLEAR: left; BACKGROUND: #ffffff; WIDTH: 130px; PADDING-TOP: 5px;
}

097/*訂閱浮動視窗選項背景設定 *LI A:hover*/
#navmenu LI UL LI A:hover
{
BACKGROUND: #3177e7; COLOR: #ffffff;
}

098/*訂閱浮動視窗標題設定* LI.title*/
#navmenu LI UL LI.title
{
BACKGROUND: #ccc; TEXT-ALIGN: center;
}

#navmenu LI:hover UL
{
DISPLAY: block;
}

#navmenu LI.over UL
{
DISPLAY: block;
}

099/*個人資料頁設定 */
#articleBlock DIV#profile
{
MARGIN-BOTTOM: 100px;
}

100/*個人資料頁設定????????*/
#articleBlock #profile TABLE
{
WIDTH: 100%;
}

101/*個人資料頁的小標題設定 */
#articleBlock #profile TH
{
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 10pt; PADDING-BOTTOM: 5px; WIDTH: 90px; COLOR: #ac55ff; PADDING-TOP: 5px; BACKGROUND-COLOR: #eee; TEXT-ALIGN: center;
}

#articleBlock #profile TD
{
;
}

102/*個人資料頁的大項目標題設定 */
#articleBlock #profile DIV.title
{
BORDER-RIGHT: #bbb 1px solid; PADDING-RIGHT: 26px; BORDER-TOP: #bbb 1px solid; MARGIN-TOP: 10px; PADDING-LEFT: 26px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: #bbb 1px solid; COLOR: #666; PADDING-TOP: 5px; BORDER-BOTTOM: #bbb 1px solid; HEIGHT: 16px; BACKGROUND-COLOR: #ddd;
}

103/*個人資料頁的自我介紹 */
#articleBlock #profile DIV.introduce
{
LINE-HEIGHT: 22px;
}

#articleBlock TABLE.reply
{
MARGIN-LEFT: 15px;
}

#articleBlock TH
{
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 5px; WIDTH: 80px; PADDING-TOP: 5px; BACKGROUND-COLOR: #eee; TEXT-ALIGN: center;
}

#popular2
{
FONT-SIZE: 12px;
}

#popular2 TABLE
{
WIDTH: 100%;
}

#popular2 H2
{
PADDING-RIGHT: 3px; PADDING-LEFT: 30px; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND: url(http://pics.blog.yam.com/images/admin/period_bg.gif) no-repeat; PADDING-BOTTOM: 3px; PADDING-TOP: 3px;
}

#popular2 #todayPop TH
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #478c8c 1px solid;
}

#popular2 #totalPop TH
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #478c8c 1px solid;
}

#popular2 #todayPop TD
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #478c8c 1px solid;
}

#popular2 #totalPop TD
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #478c8c 1px solid;
}

#popular
{
FONT-SIZE: 12px; FONT-FAMILY: sans-serif, arial;
}

#popular TD
{
FONT-SIZE: 12px; FONT-FAMILY: sans-serif, arial;
}

#popular TH
{
FONT-SIZE: 12px; FONT-FAMILY: sans-serif, arial;
}

#popular INPUT
{
FONT-SIZE: 12px; FONT-FAMILY: sans-serif, arial;
}

#popular A:link
{
TEXT-DECORATION: none;
}

#popular A:visited
{
TEXT-DECORATION: none;
}

#popular A:hover
{
TEXT-DECORATION: none;
}

#popular A:active
{
TEXT-DECORATION: none;
}

#popular H2
{
MARGIN-TOP: 10px; FONT-SIZE: 16px; MARGIN-LEFT: 10px; BORDER-BOTTOM: black 2px solid;
}

#popular SPAN.rank
{
MARGIN-LEFT: 260px;
}

#popular #popNav UL
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://pics.blog.yam.com/images/admin/gnav_bg.gif) repeat-x 50% bottom; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 10px 10px 0px 0px; WIDTH: 100%; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}

#popular #popNav LI
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://pics.blog.yam.com/images/admin/gnavl.gif) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: auto;
}

#popular #popNav A
{
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(http://pics.blog.yam.com/images/admin/gnavr.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}

#popular #popNav .current
{
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(http://pics.blog.yam.com/images/admin/gnavl_current.gif) no-repeat; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px;
}

#popular #popNav .current A
{
BACKGROUND: url(http://pics.blog.yam.com/images/admin/gnavr_current.gif) no-repeat right top; PADDING-BOTTOM: 1px; COLOR: #596ac4;
}

#popular #popBody
{
CLEAR: left; BORDER-RIGHT: #478c8c 1px solid; PADDING-RIGHT: 14px; BORDER-TOP: #478c8c 0px solid; PADDING-LEFT: 14px; PADDING-BOTTOM: 14px; BORDER-LEFT: #478c8c 1px solid; PADDING-TOP: 14px; BORDER-BOTTOM: #478c8c 1px solid;
}

#popular #periodLink
{
PADDING-RIGHT: 6px; PADDING-LEFT: 30px; BACKGROUND: url(http://pics.blog.yam.com/images/admin/period_bg.gif) no-repeat; FLOAT: left; PADDING-BOTTOM: 3px; WORD-SPACING: 3px; PADDING-TOP: 3px;
}

#popular #periodLink A
{
COLOR: #3c3c3c;
}

#popular #periodLink A.current
{
COLOR: #556bc1;
}

#popular #vsBar
{
BORDER-RIGHT: #478c8c 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #b2b2b2 0px solid; PADDING-LEFT: 8px; BACKGROUND: #efefef; PADDING-BOTTOM: 8px; BORDER-LEFT: #478c8c 1px solid; PADDING-TOP: 8px; BORDER-BOTTOM: #478c8c 1px solid; TEXT-ALIGN: center;
}

A
{
COLOR: #24619e;
}

104/*部落格標題設定*/
#banner DIV.bannerTitle A
{
COLOR: #ffffcc;
}

105/*部落格標題設定*/
#banner DIV.bannerTitle A:hover
{
FONT-SIZE: 46px; COLOR: #f50505;
}

106/*部落格標題設定*/
#banner DIV.bannerTitle A:active
{
FONT-SIZE: 88px; COLOR: #ffffff;
}

107/*頻道選擇*/
#navBar A
{
;
}

108/*文章標題設定*/
DIV.articleTitle A
{
;
}

109/*旁邊大區塊設定*/
#sideBlock A
{
;
}

110/*copyright(底層大區塊) 設定*/
DIV#copyright A
{
;
}

111/*copyright(底層大區塊) 設定*/
DIV#copyright A:link
{
;
}

112/*copyright(底層大區塊) 設定*/
DIV#copyright A:visited
{
;
}

113/*copyright(底層大區塊) 設定*/
DIV#copyright A:active
{
;
}

114/*copyright(底層大區塊) 設定*/
DIV#copyright A:hover
{
;
}

115/*天空連結設定*/
DIV#companyBar A
{
COLOR: #ffffcc;
}

116/*頻道選擇*登入連結設定*/
#navBar #linkLogin
{
BORDER-RIGHT: medium none; BORDER-TOP: medium none; LEFT: -795px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; TOP: -580px;
}

117/*登入連結設定*/
#linkLogin A
{
COLOR: #ffffcc;
}

118/*頻道選擇*登入連結設定*/
#navBar #linkLogin A:link
{
COLOR: #ffffcc;
}

119/*頻道選擇*登入連結設定*/
#navBar #linkLogin A:visited
{
COLOR: #ffffcc;
}

120/*頻道選擇*登入連結設定*/
#navBar #linkLogin A:active
{
BACKGROUND: #002040; COLOR: #ffffcc; TEXT-DECORATION: none;
}

121/*頻道選擇*登入連結設定*/
#navBar #linkLogin A:hover
{
BACKGROUND: #54a5a6; COLOR: #ffffcc; TEXT-DECORATION: none;
}

122/*廣告連結設定*/
#adText A:link
{
COLOR: #000033;
}

123/*廣告連結設定*/
#adText A:visited
{
COLOR: #000033;
}

124/*廣告連結設定*/
#adText A:active
{
COLOR: #000033;
}

125/*廣告連結設定*/
#adText A:hover
{
COLOR: #000033;
}

126/*網誌單篇文章區塊*/
DIV.blogmain
{
;
}

127/*日記單篇文章區塊*/
DIV.diarymain
{
;
}

128/*播客單篇文章區塊*/
DIV.podcastmain
{
;
}

129/*大相片相片描述*/
albumPhotoDesc
{
;
}

130/*表格輸入*/
INPUT.text
{
COLOR: #ff0000;
}
TEXTAREA
{
COLOR: #ff0000;
}

留言文字更改4表格輸入.gif

留言文字更改4-2表格輸入.gif

以上文章只提供參考，相片會不定時補上～

天空部落的CSS明細-實用語法024
天空部落改版法-資源共享05 ( 第二版 )

其他請參考
天空部落全版改版法( 第1版 ) mj16888 版本 ( 第1版 )
天空部落CSS改版法( 第3版 ) hung16888 版本 ( 第3版 )
天空官方 http://pics.blog.yam.com/images/css_structure/index.html