正Man's World

超級詳細的注解與介紹


出處 Go!!!Go!!!



到出處看會比較清楚唷!!

再此強力推薦 想進一步了解網頁製作的新手們 可以到風大的站 網頁之翼 去晃晃

---

鑑於CSS語法可修改的部份多且繁雜，且也不可能所有的指令都記下來
所以利用這篇來記錄CSS語法各部份所代表的意義，這樣以後要查詢比較方便ＸＤ
本文章內容大部份取自無名BBS 0Blog板精華區並加以整理


調色的好幫手：MyChat調色盤　色碼表


CSS各部份代表的涵義整理：


網誌部份：

html　　這地方加入語法就可以使右邊的捲軸變色了　捲軸顏色生成器

body　　整個網誌的部份
　　A 　　　 　超連結設定
　　A:link　　　尚未連結的超連結
　　A:visited　 連結過的超連結
　　A:active　　按下後的超連結
　　A:hover　　 游標在連結上方時的超連結
　　select　　　下拉選單的設定(每月文章匯集、好友名單)
　　　　td select　下拉選單的分類(設定於發文時)
　　input　　　　按鈕(搜尋、發表新文章、網誌設定、樣式設定)
　　textarea　　文字區塊(發表新文章、回覆或修改CSS的小視窗)

#banner　　　網誌最上面的部份
　　.description　　　網誌描述的部份
　　h1 .description　顯示首頁及單篇文章的部分

#content　　網誌文章整體
　　.blog　　　一整篇文章的整體
　　　　.date　　　　　　　文章的日期
　　　　.blogbody　　　　　文章內容部份
　　　　.title　　　　　　 　文章的標題
　　　　.extended　　　　　繼續閱讀、文章分類、此分類下一篇
　　　　.innertext 　　　　　文章內文
　　　　.posted　　　　　 　文章作者資訊
　　　　.comments-head　　"給個回應"那一塊
　　　　.comments-body　　填寫個人資料和輸入回應的那一塊
　　　　.comments-post　　文章回應及引用的作者資訊

#links　　行事曆、框架、連結那一大塊
　　.calendar　　行事曆
　　　　.calendarhead　　行事曆的年月
　　　　span.calendar　　行事曆的日期
　　.side　　　　　這是在左邊或右邊框架的內容部份
　　.sidetitle　　這是在左邊或右邊框架的標題部份

　　#boxProfile　　"XXX的地盤"區塊
　　　　.boxProfile0　　　"XXX的地盤"的標題(在.sidetitle中)
　　　　.boxProfile1　　　"XXX的地盤"的內容
　　　　.boxProfileImg　　"XXX的地盤"中圖片那一塊
　　　　.boxProfileLink 　"XXX的地盤"裡的連結

　　#boxNewArticle　　"最新的文章"區塊
　　　　.boxNewArticle0　 "最新的文章"的標題(在.side中)
　　　　.boxNewArticle1　 "最新的文章"的內容

　　#boxCategory　　　"文章分類"區塊
　　　　.boxCategory0　　　"文章分類"的標題{在.sidetitle中)
　　　　.boxCategory1　　　"文章分類"的內容

　　#boxDate　　　　　"文章彙集"區塊
　　　　.boxDate0　　　　　"文章彙集"的標題{在.sidetitle中)
　　　　.boxDate1　　　　　"文章彙集"中的內容
　　　　.boxDate1 select　設定"文章彙集"裡的每月文章下拉選單

　　#boxSearch　　　　"搜尋這個網誌的文章"區塊
　　　　.boxSearch0　　　　"搜尋這個網誌的文章"的標題(在.sidetitle中)
　　　　.boxSearch1　　　　文章搜尋欄位

　　#scupioSearch　　酷比文章"搜尋"區塊
　　　　. scupioSearch0　　酷比文章"搜尋"的標題(在.sidetitle中)
　　　　.scupioSearch1　　　酷比文章"搜尋"欄位

　　#boxNewComment　"最新的回應"區塊
　　　　.boxNewComment0　　"最新的回應"的標題(在.sidetitle中)
　　　　.boxNewComment1　　"最新的回應"的內容

　　# boxFolder　　　自定的每個資料夾
　　　　.boxFolder0　　　　自訂的每個資料夾的標題(在.sidetitle中)
　　　　.boxFolder1　　　　自訂的每個資料夾的內容
　　.syndicate　　　 RSS那一塊
　　.powered　　　　 無名Logo及登入的地方


其實留言板、相簿、個人資料的CSS和網誌是大同小異的
接下來就列出不同的地方就好了　：Ｐ


相簿部分：
small.c　　　　設定[留言板管理]、[樣式管理]、[我要留言...]中的[ ]符號及搜尋輸入方塊與按鈕
.description　相簿描述
.side　　　　　相簿首頁每本相本的區塊
.sidetitle　　　XXX的個人資料、XXX的網誌、XXX的留言板
td　　　　　　幾張相片、相簿容量、相簿空間使用狀況、單本相簿名稱、[相簿管理][樣式管理]的[ ]符號


留言板部分：

.description　留言板描述與留言數
small.c　　　　設定[留言板管理]、[樣式管理]、[我要留言...]中的[ ]符號及搜尋輸入方塊與按鈕
　　.small-c select　　只設定好友名單
　　select.small-c　 　只設定搜尋工具的下拉選單
　　input.small-c　　　只設定搜尋工具的文字輸入方塊和按鈕

.sidetitle　　　留言左邊的標題
.side　　　　　　留言右邊的內容
.replyside　　　板主的回覆


個人資料部分：

small.c　　　　設定[留言板管理]、[樣式管理]、[我要留言...]中的[ ]符號及搜尋輸入方塊與按鈕
.sidetitle　　個人資料左邊的標題
.side　　　　　個人資料右邊內容



{ }中可加入的語法整理：


背景部份：
background-color:#FFF;　設定背景的顏色
background-image:url("Image URL");　設定背景圖片
background-attachment:no-fixed;　背景圖片是否鎖定位置
background-position: 0% 0%;　設定背景圖片X與Y的位置(0%~100%，50%可輸入center)
background-repeat:no-repeat;　背景圖片是否要重複

框線：
border:1px solid #FFF;　四周都有框線，粗細、樣式、色彩需同時存在
border-top:1px solid #FFF;　上邊框線
border-bottom:1px solid #FFF;　下邊框線
border-left:1px solid #FFF;　左邊框線
border-right:1px solid #FFF;　右邊框線
線條樣式整理：
none　　無
dotted　點
dashed　虛線
solid　實線
double　雙線
groove　立體凹線
ridge　立體凸線
inset　立體嵌入線
outset　立體隆起線

與四周的距離：
padding　與四周的距離
padding-top　與上面的距離
padding-bottom　與下面的距離
padding-left　與左邊的距離
padding-right　與右邊的距離

加入display: none就可隱藏，所以小心不要亂放！

留言板加入select.small-c,input.small-c{display:none;}可隱藏搜尋

游標在超連結上方時連結位移：
a:hover{position:relative;top:1px;right:1px;}

連結底線消除：
text-decoration:none;
text-decoration:underline;　為連結有底限

設定文字位置：
text-align:center;　有left、center、right三種位置
設定字形：
font-weight:normal;　字形正常
font-weight:bold;　字形粗體

設定字型：
font-family:georgia, verdana, arial, sans-serif;

設定透明度：
filter:alpha(Opacity=100, FinishOpacity=60, Style=1)

文字間的距離
letter-spacing: .2em;