百花齊放新版CSS 《新版CSS架構圖解》 《各區塊名稱圖解》
/* CSS Document */
/*主體*/
html{ 屬性↓ 捲軸顏色↓ 《捲軸顏色生成器》
scrollbar-face-color:#EDF8FA; ←拉頁框主顏色
scrollbar-highlight-color:#A7DCEA; ←拉頁內框亮面
scrollbar-shadow-color:#A7DCEA; ←拉頁內框暗面
scrollbar-3Dlight-color:#EDF8FA; ←拉頁框立體亮面色
scrollbar-arrow-color:#A7DCEA; ←拉頁框箭頭色
scroll-track-color:#EDF8FA; ←拉頁框背景色
scroll-darkshadow-color:#EDF8FA; ←拉頁框立體暗面色
/*scrollbar-Base-Color:*/ ←拉頁框基底顏色
}
body{
margin:0px 0px 0px 0px; ←四周邊界距離 （上、右、下、左）
text-align: center; ←文字顯示置：左，中，右 基底背景圖↓（/*←不執行→*/）
/* background-image:url(http://s.blog.xuite.net/_image/skin/background/50/blogBg_1.jpg); */
background-attachment:fixed; ←背景圖不捲動 scroll←背景圖捲動
background-repeat:repeat; ←橫 直 重複排列(填滿) no-repeat←不重複排列
background-color:#FFFFFF; ←背景顏色
}
/*連結*/
A {
color: #00306B; ←文字顏色
text-decoration: none; ←（連結無底線）
}
A:link {
color:#004C99; ←連結的文字顏色
text-decoration: none; ←（連結無底線）
}
A:visited {
color: #00306B; ←瀏覽過的連結文字顏色
text-decoration: none; ←（連結無底線）
}
A:active {
color: #00479F; ←使用中的連結文字顏色
text-decoration: none; ←（連結無底線）
}
A:hover {
color: #00479F; ←滑鼠畫過的連結文字顏色
text-decoration: none; ←（連結無底線）
}
/*定位框*/
#container {
position:relative; ←相對原本的位置
text-align: left; /*width:100%;*/ ←文字顯示置：左，中，右 總體頁面 寬度↓
behavior:expression( this.style.width = (document.documentElement.offsetWidth<970)?"970px":"100%");
min-width:970px; ←總體頁面 寬度
padding:0px 0px 0px 0px; ←四周間距 （上、右、下、左）
margin:0px auto; ←邊界距離 自動調整 基底背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/background/50/blogBg_1.jpg);
background-repeat:no-repeat; ←背景圖不重複排列
}
/*檔頭*/ 《檔頭圖解》
#banner{
margin: 0px 5px 0px 5px; ←檔頭四周邊界距離 （上、右、下、左）
padding: 0px; ←間距
height: 200px; ←檔頭高度
}
/*左欄*/ 《左欄圖解》
#linksLeft{
position:absolute; ←絕對位置
left:0px; ←靠左
width: 205px; ←欄位寬度
margin: 5px; ←離邊距離
}
/*右欄*/ 《右欄圖解》
#linksRight{
position:absolute; ←絕對位置
right:0px; ←靠右
width: 205px; ←欄位寬度
margin: 5px; ←離邊距離
}
/*中間欄*/ 《中間欄圖解》
#mid{
position:relative; ←相對原本的位置
margin: 0px 215px 0px 215px; ←四周邊界距離 （上、右、下、左）
padding: 5px 5px 5px 5px; ←四周間距 （上、右、下、左）
}
/*檔尾*/ 《檔尾圖解》
#footer{
clear: both; ←標籤兩邊都不能有任何文字
text-align:center; ←文字置中
font-size: 13px; ←字體大小
color:#00306B; ←文字顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
line-height: 16px; ←樣式值 絕對行距
}
/*欄位名稱*/ 《欄位名稱 內容 圖解》
.sidetitle{
padding:2px; ←間距
border:#BDF2FF 1px solid; ←框線 顏色 大小
background:; ←背景顏色（無）
font-weight:normal; ←標準的 欄位背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/windows/50/blog011_2.gif);
color:#004C99; ←文字顏色
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定的文字字型
letter-spacing:0.1em; ←字元間距
font-size:15px; ←字體大小
margin-top:5px; ←離上邊距離
}
/*欄位內容*/
.side{
background:#ffffff; ←背景顏色
border:#BDF2FF 1px solid; ←框線 顏色 大小
font-size:12px; ←字體大小
font-weight:normal; ←標準的
line-height:140%; ←字型樣式 百分比
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定文字字型
padding:4px; ←文字間距
}
.side li{
margin-left: 20px; ←項目符號左邊距離
list-style-position: outside; ←項目符號樣式
}
/*空白*/
.spacer{
clear:both; ←兩邊都不能有任何文字
}
/******************************************/
/*檔頭class*/
/*日誌名稱*/
.blogname{
font-size: 22px; ←字體大小
font-weight: bold; ←粗體的字形
color: #CC003A; ←文字顏色
padding-left:10px; ←左間距
padding-top:100px; ←離上間距
}
/*今日心情*/
.blogemotion{
/*visibility:hidden;*/ ←預設值 （ 改成→ display:none; 為不顯示）
} （/* ←前後有這個符號 這裡面的東東為不執行→ */）
/*加入最愛*/
.blogfavo{
/*visibility:hidden;*/ ←同上 （ visibility:hidden 為隱藏物件）
} （/* ← 前後符號刪除為執行 → */）
/*日誌描述*/
.description{
font-size: 15px; ←字體大小
color: #99CC00; ←文字顏色
padding-left:10px; ←左間距
}
/*選單列*/
.menulist{
padding-top:5px; ←離上間距
width:100%; ←寬度
}
/*選單*/
.menu{
padding-top:5px; ←離上間距
float:right; ←靠右
padding-right:80px; ←右間距
}
/*Logo*/
.logo{
visibility:visible; ←顯示物件
}
/******************************************/
/*中間欄位class*/
/*文章外框*/
#content{
padding: 5px; ←間距
margin: 5px; ←邊界距離
background-color:#ffffff; ←背景顏色
border: #BDF2FF 5px solid; ←框線 顏色 大小
}
/*文章標題列*/
.title{
width:100%; ←寬度
height:25px;
background:#E1F4FF; ←背景顏色
padding-top:5px; ←離上間距
}
/*文章標題名稱*/
span.titlename{
font-size:15px; ←字體大小
color:#00479F; ←文字顏色
font-weight:normal; ←標準的
padding-left:5px; ←左間距
}
/*文章日期*/
span.titledate{
float:right; ←靠右
height:25px; ←高度
padding-right:10px; ←右間距
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #00479F; ←文字顏色
}
/*文章評價列*/
.blogrank{
width:100%; ←寬度
line-height:200%; ←字型樣式百分比
margin-top:10px; ←離上邊距離
}
/*文章瀏覽數*/
span.counter{
float:right; ←靠右
margin-top:15px; ←離上邊距離
font-size: 12px; ←字體大小
color: #999999; ←文字顏色
}
/*文章瀏覽數項目符號*/
span.counter li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif); ←符號圖示
}
/*文章分類*/
span.category{
float:right; ←靠右
margin-top:15px; ←離上邊距離
}
/*文章分類項目符號*/
span.category li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);←符號圖示
}
/*文章主體*/
.blogbody{
word-wrap: break-word; ←視窗邊界換行，僅 IE 支援
width:100%; ←寬度
}
/*作者列*/
.posted{
width:100%; ←寬度
text-align:right; ←物件文字置右
}
/*上下文章*/
.selectbar{
width:100%; ←寬度
text-align:center; ←物件置中
}
/*引用列*/
.trackbacktitle{
position:relative; ←相對原本的位置
width:100%; ←寬度
margin-top:20px; ←離上邊距離
margin-bottom:5px; ←對齊元件下方 (不限文字或圖片)
border-top:1px dotted #cccccc;
border-bottom:1px dotted #cccccc;
font-size: 12px; ←字體大小
color: #CC6600; ←文字顏色
height:24px; ←高度
background:#FEFAED; ←背景顏色
}
/*引用網址*/
.trackbackurl{
width:100%; ←寬度
background:#F2F2F2; ←背景顏色
padding-top:20px; ←離上間距
padding-bottom:20px; ←下方間距
text-indent:10px; ←樣式值
}
/*引用日期*/
.trackbackdate{
width:100%; ←寬度
text-align:right; ←物件文字置右
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #7A75B9; ←文字顏色
}
/*引用內容*/
.trackbackcontent{
width:100%; ←寬度
line-height:150%; ←字型樣式百分比
margin-top:5px; ←離上邊距離
border-bottom:1px dotted #cccccc; ←框線（點）顏色
}
/*留言列*/
.comment{
width:100%; ←寬度
border-top:1px dotted #cccccc; ←上框線（點）顏色
border-bottom:1px dotted #cccccc; ←框線（點）顏色
font-size: 12px; ←字體大小
color: #00A1CE; ←文字顏色
height:24px; ←高度
margin-top:20px; ←離上邊距離
padding-top:5px; ←離上間距
padding-bottom:5px; ←下方間距
background:#FEFAED; ←背景顏色
}
/*留言名稱*/
span.commenttitle{
}
/*留言名稱項目符號*/
span.commenttitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif); ←符號圖示
}
/*留言按鈕*/
span.commentbutton{
float:right; ←靠右
}
/*留言作者列*/
.author{
width:100%; ←寬度
}
/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
float:right; ←靠右
text-align:right; ←物件文字置右
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #7A75B9; ←文字顏色
}
/*留言內容*/
.commenttext{
word-wrap: break-word; ←視窗邊界換行，僅 IE 支援
width:100%; ←寬度
margin-top:10px; ←離上邊距離
margin-bottom:10px; ←對齊元件下方
}
/*留言編輯按鈕*/
.commentedit{
width:100%; ←寬度
border-bottom:1px dotted #cccccc; ←框線 顏色
}
/*留言者信箱*/
span.email{
}
/******************************************/
/*左欄class*/
/*關於我*/
.avatar{ /* 2006-05-09 修改 */
background:#FFFFFF; ←背景顏色
border:#BDF2FF 1px solid; ←框線 顏色 大小
font-size:12px; ←字體大小
font-weight:normal; ←標準的
line-height:140%; ←字型樣式百分比
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定的文字字型
padding:5px; ←間距
}
/*照片*/
.avatarPhoto{
text-align:center; ←物件（照片）置中
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
/*visibility:hidden;*/ ←預設值（/*不執行*/）
}
/*關於我按鈕*/
.avatarbutton{
text-align: right; ←物件（按鈕）置右
}
/*文章分類*/
.categoryTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif); ←符號圖示
}
.categoryTitle{
}
.categorySide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.categorySide{
}
/*日曆*/
.calendarTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCalendar.gif); ←符號圖示
}
.calendarTitle{
}
.calendarSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.calendarSide{
}
/*日曆table*/
.calMonth{
width:95%; ←寬度
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
font-size: 12px; ←字體大小
font-weight: bold; ←粗體的字形
color: #000000; ←文字顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
}
/*日曆下個月*/
.calMonthForward{
color: #FF0000; ←顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 12px; ←字體大小
}
/*日曆星期列*/
.calMonthHeader{
}
/*日曆日欄*/
.calMonthDay{
font-size: 10px; ←字體大小
color: #999999; ←文字顏色
text-align:center; ←物件置中
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
}
/*日曆今日日期*/
.calMonthToday{
font-size: 11px; ←字體大小
text-align:center; ←物件置中
}
/*日曆假日日期*/
.calholiday{
font-size: 11px; ←字體大小
color: #FF3300; ←文字顏色
text-align:center; ←物件置中
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
}
.calendarbutton{
text-align: right; ←物件置右
}
/*搜尋文章*/
.searchTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletSearch.gif); ←符號圖示
}
.searchTitle{
}
.searchSide{
text-align:center; ←物件置中
}
.searchbutton{
text-align:center; ←物件置中
padding:2px; ←間距
}
/*我的哈拉室*/
.chatTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletChat.gif); ←符號圖示
}
.chatTitle{
}
.chatSide{
}
/*已建立的日誌*/
.bloglistTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletBlogList.gif); ←符號圖示
}
.bloglistTitle{
}
.bloglistSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.bloglistSide{
}
/*訂閱電子報*/
.epaperTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletEpaper.gif); ←符號圖示
}
.epaperTitle{
}
.epaperSide{
text-align:center; ←物件置中
}
.epaperbutton{
text-align:center; ←物件置中
padding:2px; ←間距
}
/*自由欄位*/
.customTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCustom.gif); ←符號圖示
}
.customTitle{
}
.customSide{
}
/*日誌使用資源*/
.resourceTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletBlogResource.gif);←符號圖示
}
.resourceTitle{
}
.resourceSide{
text-align:center; ←物件置中
}
/*留言塗鴉版*/
.paintTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletPaint.gif); ←符號圖示
}
.paintTitle{
}
.paintSide{
text-align:center; ←物件置中
}
/******************************************/
/*右欄class*/
/*背景音樂*/
.musicTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletMusicBox.gif); ←符號圖示
}
.musicTitle{
}
.musicSide{
}
.musicbutton{
text-align:left; ←物件置左
padding:2px; ←間距
}
/*最新文章*/
.articleTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif);←符號圖示
}
.articleTitle{
}
.articleSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.articleSide{
}
/*最新留言*/
.messageTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletMessageList.gif);←符號圖示
}
.messageTitle{
}
.messageSide{
text-indent: -3ex; ←樣式值
margin-left: 3ex; ←項目符號左邊距離
}
.date {
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #7A75B9; ←文字顏色
}
/*參觀人次統計*/
.countTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif); ←符號圖示
}
.countTitle{
}
.countSide{
}
/*我的訂閱*/
.rssrollTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletRssRoll.gif); ←符號圖示
}
.rssrollTitle{
}
.rssrollSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.rssrollSide{
}
.backbtn li{
list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif); ←符號圖示
}
.backbtn{
text-align:right; ←物件文字置右
}
.morebtn li{
list-style-image:url(http://s.blog.xuite.net/_image/blog037.gif); ←符號圖示
}
.morebtn{
text-align:right; ←物件文字置右
}
/*日誌評價*/
.rankTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletRank.gif); ←符號圖示
}
.rankTitle{
}
.rankSide{
}
/*已建立的相簿*/
.albumTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletAlbum.gif); ←符號圖示
}
.albumTitle{
}
.albumSide{
}
/*最愛連結*/
.linkTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletLink.gif); ←符號圖示
}
.linkTitle{
}
.linkSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.linkSide{
}
/*個人項目---- 2006-5-11 Modify*/
.personallink{
display: block; ←資料內容分段顯示
width:190px; ←寬度
margin:0px 0px 0px 0px; ←四周邊界距離 （上、右、下、左）
}
/*關於我*/
.plink li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.plink{
}
/*我的相簿*/
.pphoto li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pphoto{
}
/*加入好友*/
.pfriend li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pfriend{
}
/*我的留言板*/
.pboard li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pboard{
}
/*文章分類---- 2006-5-12 Modify*/
.pTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletPersonal.gif); ←符號圖示
}
.pTitle{
}
/*欄位名稱---- 2006-5-12 Modify*/
.personaltitle{
padding:2px; ←間距
border:#BDF2FF 1px solid; ←框線 顏色 大小
background:;
font-weight:normal; ←標準的 欄位背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/windows/50/blog011_2.gif);
color:#004C99;
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定的文字字型
letter-spacing:0.1em; ←字元間距
font-size:15px; ←字體大小
margin-top:5px; ←離上邊距離
}
/* Applied by Chyuko@Xuite.net */
/*我的影音*/
.pvlog ul{
list-style-type:none; ←不編號
margin:0 0px; ←邊界距離
padding:0px 2px 0px 20px; ←四周間距 （上、右、下、左）
word-wrap: break-word; ←視窗邊界換行，僅 IE 支援
display: block; ←資料內容分段顯示
float:left; ←文繞圖(圖在左) 【FLOAT: right←文繞圖(圖在右)】
}
.pvlog li{
padding:0 0 0 0px; ←四周間距 （上、右、下、左）
margin:0px 0px 0px 0px; ←四周邊界距離 （上、右、下、左）
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pboard{
padding:0 0 0 0px; ←四周間距 （上、右、下、左）
WIDTH: 90px; ←寬度
}
/*下方換頁-----2007-04-02*/
.page {
margin-top: 10px; ←離上邊距離
margin-bottom: 10px; ←對齊元件下方
font-size: 12px; ←字體大小
color: #00479F; ←文字顏色
line-height: 24px; ←樣式值 絕對行距
vertical-align:middle; ←元件的中點對齊
}
.page a:link, .page a:visited, .page a:active {
font-size: 12px; ←字體大小
color: #004C99; ←文字顏色
line-height: 24px; ←樣式值 絕對行距
text-decoration: none; ←連結不顯示底線
}
.page a:hover {
font-size: 12px; ←字體大小
color: #00479F; ←文字顏色
line-height: 24px; ←樣式值 絕對行距
text-decoration: underline; ←滑鼠畫過連結 顯示底線
}
說明：
top上 right右 bottom下 lefty左 center中 width寬 height高
padding ←間距 （物件文字 與框之間的距離）
margin ←邊距 （欄框(表格) 向外的距離）
margin-top: ?px; /*上邊界值
margin-right: ?px; /*右邊界值
margin-bottom: ?px; /*下邊界值
margin-left: ?px; /*左邊界值
display 屬性值
display:none ←隱藏不顯示任何資料內容
display:lnline ←將資料顯示再同一行不分段
display:block ←將資料內容分段顯示
visibility:hidden ←為隱藏物件（/*前後有/**/為不執行*/）
CSS串聯樣式表一覽
list-style-type:none; /*不編號
list-style-type:decimal; /*阿拉伯數字
list-style-type:lower-roman; /*小寫羅馬數字
list-style-type:upper-roman; /*大寫羅馬數字
list-style-type:lower-alpha; /*小寫英文字母
list-style-type:upper-alpha; /*大寫英文字母
list-style-type:disc; /*實心圓形符號
list-style-type:circle; /*空心圓形符號
list-style-type:square; /*實心方形符號
list-style-image:url(dot.gif); /*圖片式符號
list-style-position:outside; /*凸排
list-style-position:inside; /*縮排
框線
border-bottom: ?px solid 色碼; /*下面的框線
border-top: ?px solid 色碼; /*上面的框線
border-left: ?px solid 色碼; /*左邊的框線
border-right: ?px solid 色碼; /*右邊的框線
一般常用線條
solid(實心線)、dotted(點)、dashed(短線)、double(雙實線)
立體效果線條
groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)
連結
text-decoration:
none(連結無底線)、underline(連結加底線)、overline(連結加頂線)、
linethrough(連結加刪除線)、blink(連結閃爍)
引用 http://blog.xuite.net/piyu777/tw/12038082
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
0 意見:
張貼留言