顯示包含「CSS/HTML」標籤的文章。顯示所有文章
顯示包含「CSS/HTML」標籤的文章。顯示所有文章

CSS基礎認識


CSS由來
CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。
所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。
很奇怪的一串名詞是否？其實，當您CSS用習慣後，您就會發覺它會這樣被稱呼還蠻貼切的。

CSS的作用
CSS能夠使你的網頁更整齊，它可控制網頁中的字型.字體.大小.連結.表格.圖片....等。

需要的工具
編輯CSS不需要任何工具，只要你有記事本就可以編輯了，當然有更好的網頁編輯軟體也是一各相當不錯的幫手。
　

插 入 c s s

插入CSS語法
<style type="text/css"></style> 是告訴瀏覽器，從此段開始都為CSS語法，而要插入CSS語法，
都在網頁中的<head>..和..</head>之間
例如以下方式
<html>
<head>
<style type="text/css">
標籤{定義該內容}
</style>
</head>
<body>
.....網頁內容
</body>
</html>

外部呼叫指令
要在網頁插入CSS也可以用到外部呼叫的指令
<link href="檔名.css"rel="stylesheet"type="text/css">

匯入指令
以另外一種方式，也就是直接將CSS檔案匯入在網頁中。
<style>@import url(檔名.css);</style>
　

網 頁 標 籤

了解網頁標籤
所謂的標籤，其實是很簡單的，別想的太難，
網頁標籤中都含有 <html> <head> <body> <font> <b> <a>
而 html head body 這三種就是一般的網頁型態格式
當然也是常見的標籤
而 font 就是控制字體
b 為粗體 a 就是常用的超連結
以上大概簡略以上常見到網頁的標籤
CSS其實很簡單
只要你懂得網頁的標籤
你就可以靈活應用操作CSS
所謂標籤跟定義該標籤的內容...簡單的說就如下
<style>
網頁標籤{定義內容}
</style>

改變字體大小
今天若我想在我的網頁中所有的文字都為9pt
那麼當然都用到最常用到的幾種標籤
以 <body> 為例
若我要宣告 <body>和</body> 的字體都為9pt
那麼...我可以如以下寫法
<style>body{font-size:9pt}</style>

改變字體顏色
改變body標籤的字體顏色，寫法如下
<style>body{color:red}</style>

改變字型
改變body標籤的所有字型，寫法如下
<style>body{font-family:新細明體}</style>
　

應 用 連 結

一般超連結
此為一般超連結的顏色，色碼可依自己喜好調整。
<style>a:link{color:#色碼}</style>

碰觸超連結
碰觸超連結，也就是當你的滑鼠游標移動到超連結上以後，他會產生何種顏色，以下色碼可依自己喜好調整。
<style>a:hover{color:#色碼}</style>

執行超連結
執行超連結，就是你的滑鼠按下超連結以後，他會產生何種顏色，以下色碼可依自己喜好調整。
<style>a:visited{color:#色碼}</style>

執行後的超連結
執行後的超連結，一個已經按過的連結，他所產生的顏色，色碼可依自己喜好調整。
<style>a:visited{color:#色碼}</style>
　

宣 告 方 法

宣告方法
所謂的宣告方法，其實就是設定該標籤的定義內容，而宣告當然以網頁標籤來作宣告囉，
例如....我想要我的網頁中的文字大小為9pt 而顏色色碼要為 #000000
但是此時...我還沒有說明我要定義哪種標籤，
如果我選擇的標籤為 table
table ← 這是什麼呢？
table它是表格的開頭
如果我要宣告他所有文字大小都為 9pt 色碼為 #000000 的話
我可以如下方式寫
<style>table{font-size:9pt;color:#000000}</style>
第一次看到這個也許不知道是什麼意思
其實他的意思很簡單
也就是網頁中 <table>..之間..</table>中的文字
都為 9pt大小 而顏色代碼為 #000000 的意思
如果上述還不懂，就拿以下的簡單表格表單來作示範，

<table border=1>
<tr>
<td>歡迎光臨</td>
</tr>
</table>

上面這段簡單的表格表單就是再歡迎光臨的外圍會有一個邊框表格，
而若我用了上述的CSS定義宣告table的文字大小
簡單的說..就是歡迎光臨這四個字會變成大小9pt 顏色代碼為 #000000的意思
看到這裡如果懂了，那麼你對CSS的了解又更深一步囉。
　

多 項 定 義

多項定義
多項定義呢，也就是如果我有許多設定要再同一個標籤中，
例如我以 body 這標籤來作定義，
我要<body>和</body>包起來的文字大小.顏色.字型統一改變的話，
而我要的大小為9pt 色碼為 #333333 字型為 新細明體
那麼寫法如下方式：
<style>
body{font-size:9pt;color:#333333;font-family:新細明體}
</style>
在這裡要注意的是..!!
在CSS區分各種標籤定義時，都要以 ; 來作區分
而被定義的內容都要以{ 跟 }來作才行
簡單的說，就是這樣子：
<style>
網頁標籤{文字大小要為9pt;色碼要為#333333;字型要新細明體}
</style>
　

分 項 宣 告

分項宣告
分項宣告就是網頁中同一種標籤，但卻分成兩次來宣告，例如以下：
<style>
body{font-size:9pt}
body{color:#000000}
</style>
如果各位對前面的幾篇教學都有認真看的話
這裡應該都難不倒各位了
也就是被<body>和</body>包住的文字大小為9pt
而顏色色碼為#000000
那麼在這裡的分項宣告，其實就以上面的寫法，
他對了body標籤做了兩次的宣告
但其實所得到的結果還是跟以下的寫法一樣的：
<style>
body{font-size:9pt;color:#000000}
</style>
所謂的分項宣告
就是同一種網頁標籤分成兩次.或好幾次以上的宣告方式。

先後順序
若我有同樣的標籤，而宣告內容有重複的，或是不一樣的定義內容，例如以下：
<style>
body{color:#000000}
body{color:#999999}
</style>
以上寫法都是定義body標籤的文字顏色，但色碼卻不同，
那麼哪一宣告會被成立呢，答案為後者，
也就是 body{color:#999999} 會被成立
在CSS寫法中若有相同而設定值不同的都以後者來執行的。
　

單 向 定 義

單向定義
單項定義，也就是將CSS的定義內容直接寫在標籤裡頭，以下列為示範：
網頁標籤 <b>
這是一個文字粗體標籤，也就是被<b>和</b>包起來的文字
都會變成粗體文字，那麼如果我要定義他的大小為9pt
一般CSS的用法則為：
<style>
b{font-size:9pt}
</style>
這樣網頁中所有被<b>和</b>包起來的文字就都為粗體而且為9pt的大小了，
那麼..單項定義的寫法呢....？
單項定義的寫法很簡單，就如以下：
<b style="font-size:9pt">我是粗體文字大小為9pt</b>
所謂單項定義，就是你針對網頁中的標籤設定他的值，
而也只有被設定的標籤才會產生作用。

注意
如果網頁上有兩個定義，如下：
<style>
b{font-size:9pt}
</style>
<b style="font-size:12pt}</style>
那麼就上述定義，單項定義的則文字大小為12pt
而在網頁中其他的<b>沒被單項定義設定的
就都為9pt的文字大小，也就是被單獨定義的會被執行，
而其他的則不影響。
　

標 籤 定 義

標籤定義
多樣標籤定義意思就是，再網頁中有許多的標籤要定義為一種內容，
簡單來說就是把許多標籤設定為一種樣式的意思，
現在各位若懂了什麼是標籤，那這裡就難不倒你的，
在網頁中，要宣告五種標籤，要讓他都為同一種設定，
以下面五種標籤來說：
<body> <table> <tr> <td> <font>
要以上五種標籤將他設定為 9pt的大小文字 色碼 #666666 字型為新細明體
若以上方所需要的要球，可以如以下這樣寫：
<style>
body,table,tr,td,font{font-size:9pt;color:#666666;font-family:新細明體}
</style>

注意
要同時一次定義多種網頁標籤的時候，
各種標籤要以 , 來做區分哦！！
不然CSS是沒辦法執行的，以及各種內容定義也要以 ; 來區分才行
CSS寫法中是沒有 = " ' 這幾種設定html語法的代碼
在CSS中 = 要以 : 來寫才行
而 " ' 這種代碼出現在CSS中是不正確的寫法。
　

捲 軸 色 系

捲軸色系
必須 IE5.5 以上版本才能正確顯示，
<style>
body{
scrollbar-face-color:#色碼;
scrollbar-highlight-color:#色碼;
scrollbar-shadow-color:#色碼;
scrollbar-3dlight-color:#色碼;
scrollbar-arrow-color:#色碼;
scrollbar-track-color:#色碼;
scrollbar-darkshadow-color:#色碼}
</style>

屬性說明
scrollbar-face-color ： 捲軸表面的顏色。
scrollbar-highlight-color ： 捲軸邊界的顏色。
scrollbar-shadow-color ： 捲軸陰影的顏色。
scrollbar-3dlight-color ： 捲軸3D立體的顏色。
scrollbar-arrow-color ： 捲軸上下箭頭的顏色。
scrollbar-track-color ： 捲軸底部軌道的顏色。
scrollbar-darkshadow-color ： 捲軸第二層陰影的顏色。
　

網 頁 文 字

文字顏色
<style>body{color:#色碼}</style>

文字大小
<style>body{font-size:9pt}</style>

文字字型
<style>body{font-family:新細明體}</style>

文字粗體
<style>body{font-weight:bold}</style>

文字斜體
<style>body{body{font-style:italic}</style>

文字置中
<style>body{text-align:center}</style>

多項寫法技巧
以上面幾段語法來寫，如果要用很多種的話，要如何寫比較好呢，
有的人如果要改變文字顏色跟大小及文字置中
可能就如以下這樣貼吧：
<style>body{color:#000000}</style>
<style>body{font-size:9pt}</style>
<style>body{text-align:center}</style>
其實以上面這樣的效果，可以如以下寫法：
<style>
body{color:#000000;font-size:9pt;text-align:center}
</style>
看到哪裡不同了嗎？
原本長長的好幾段只要縮成這樣就能辦到了，
我們只要記住我們宣告的標籤
因為上述的CSS都是宣告body標籤，那麼我們就可以這樣寫，
而每項的定義內容，只要以 ; 就可以了，
而<style>跟</style>再網頁中只要出現一次，
就可以達到CSS的要求了，不需要如上面那段重複複製貼上了好幾次，
如果你懂得如何去改以後，CSS你就可以隨心所欲的寫囉，
只要記住屬性就行了。
　

指 標 圖 示

指標圖示
必須 IE6.0 以上版本才能正確顯示，
<style>
body{
cursor:url(圖示位置.ani)
}
</style>

禁止指標
必須 IE6.0 以上版本才能正確顯示，
<style>
body{
cursor:all-scroll
}
</style>
範例：把滑鼠移過來

全部選取指標
必須 IE6.0 以上版本才能正確顯示，
<style>
body{
cursor:all-scroll
}
</style>
範例：把滑鼠移過來
　

碰 觸 產 效

出現底線 <style>a:hover{text-decoration:underline}</style>
出現刪除線 <style>a:hover{text-decoration:line-through}</style>
出現頂線 <style>a:hover{text-decoration:overline}</style>
頂線及底線 <style>a:hover{text-decoration:underline overline}</style>
頂線.底線.刪除 <style>a:hover{text-decoration:line-through underline overline}</style>
動態偏移 <style>a:hover{position:relative;top:2px;left:2px}</style>
字體大小 <style>a:hover{font-size:7pt}</style>
產生邊框 <style>a:hover{border:1px #色碼 solid}</style>
產生虛線邊框 <style>a:hover{border:1px #色碼 dotted}</style>
產生上下虛框 <style>a:hover{border-top:1px #色碼 dotted;border-bottom:1px #色碼 dotted}</style>
產生左右虛框 <style>a:hover{border-left:1px #色碼 dotted;border-right:1px #色碼 dotted}</style>
產生底色 <style>a:hover{background:#色碼}</style>
產生背景 <style>a:hover{background-image:url(圖片位址)}</style>
變為粗體 <style>a:hover{font-weight:bold}</style>
變為斜體 <style>a:hover{font-style:italic}</style>
改變指標 <style>a:hover{cursor:指標樣式}</style>
指標圖示 <style>a:hover{cursor:url(圖示位置.ani)}</style>
　

按 鈕 產 效

文字顏色 <style>input{color:#色碼}</style>
文字大小 <style>input{font-size:9pt}</style>
改變邊框 <style>input{border:1px #色碼 solid}</style>
改變底色 <style>input{background:#色碼}</style>
產生背景 <style>input{background-image:url(圖片位址)}</style>
虛線邊框 <style>input{border:1px #色碼 dotted}</style>
改變字型 <style>input{font-family:新細明體}</style>
改為斜體 <style>input{font-style:italic}</style>
改為粗體 <style>input{font-weight:bold}</style>
改變指標 <style>input{cursor:指標樣式}</style>
指標圖示 <style>input{cursor:url(圖示位置.ani)}</style>
　

滑 鼠 指 標

手狀 <style>body{cursor:hand}</style>
十字 <style>body{cursor:crosshair}</style>
I狀 <style>body{cursor:text}</style>
沙漏 <style>body{cursor:wait}</style>
?狀 <style>body{cursor:help}</style>
四處指 <style>body{cursor:move}</style>
往上指 <style>body{cursor:n-resize}</style>
往下指 <style>body{cursor:s-resize}</style>
往左指 <style>body{cursor:w-resize}</style>
往右指 <style>body{cursor:e-resize}</style>
左上指 <style>body{cursor:nw-resize}</style>
左下指 <style>body{cursor:sw-resize}</style>
右上指 <style>body{cursor:ne-resize}</style>
往下指 <style>body{cursor:se-resize}</style>
原始指標 <style>body{cursor:default}</style>

Categories

認識CSS標籤


百花齊放新版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(連結閃爍)
Categories

HTML 基礎語法


<A HREF TARGET> 指定超連結的分割視窗
 <A HREF=#錨的名稱> 指定錨名稱的超連結
 <A HREF> 指定超連結
 <A NAME=錨的名稱> 被連結點的名稱
 <ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址
 <B> 粗體字
 <BASE TARGET> 指定超連結的分割視窗
 <BASEFONT SIZE> 更改預設字形大小
 <BGSOUND SRC> 加入背景音樂
 <BIG> 顯示大字體
 <BLINK> 閃爍的文字
 <BODY TEXT LINK VLINK> 設定文字顏色
 <BODY> 顯示本文
 <BR> 換行
 <CAPTION ALIGN> 設定表格標題位置
 <CAPTION>...</CAPTION> 為表格加上標題
 <CENTER> 向中對齊
 <CITE>...<CITE> 用於引經據典的文字
 <CODE>...</CODE> 用於列出一段程式碼
 <COMMENT>...</COMMENT> 加上註解
 <DD> 設定定義列表的項目解說
 <DFN>...</DFN> 顯示"定義"文字
 <DIR>...</DIR> 列表文字標籤
 <DL>...</DL> 設定定義列表的標籤
 <DT> 設定定義列表的項目
 <EM> 強調之用
 <FONT FACE> 任意指定所用的字形
 <FONT SIZE> 設定字體大小
 <FORM ACTION> 設定戶動式表單的處理方式
 <FORM METHOD> 設定戶動式表單之資料傳送方式
 <FRAME MARGINHEIGHT> 設定視窗的上下邊界
 <FRAME MARGINWIDTH> 設定視窗的左右邊界
 <FRAME NAME> 為分割視窗命名
 <FRAME NORESIZE> 鎖住分割視窗的大小
 <FRAME SCROLLING> 設定分割視窗的捲軸
 <FRAME SRC> 將HTML檔加入視窗
 <FRAMESET COLS> 將視窗分割成左右的子視窗
 <FRAMESET ROWS> 將視窗分割成上下的子視窗
 <FRAMESET>...</FRAMESET> 劃分分割視窗
 <H1>~<H6> 設定文字大小
 <HEAD> 標示文件資訊
 <HR> 加上分格線
 <HTML> 文件的開始與結束
 <I> 斜體字
 <IMG ALIGN> 調整圖形影像的位置
 <IMG ALT> 為你的圖形影像加註
 <IMG DYNSRC LOOP> 加入影片
 <IMG HEIGHT WIDTH> 插入圖片並預設圖形大小
 <IMG HSPACE> 插入圖片並預設圖形的左右邊界
 <IMG LOWSRC> 預載圖片功能
 <IMG SRC BORDER> 設定圖片邊界
 <IMG SRC> 插入圖片
 <IMG VSPACE> 插入圖片並預設圖形的上下邊界
 <INPUT TYPE NAME VALUE> 在表單中加入輸入欄位
 <ISINDEX> 定義查詢用表單
 <KBD>...</KBD> 表示使用者輸入文字
 <LI TYPE>...</LI> 列表的項目 ( 可指定符號 )
 <MARQUEE> 跑馬燈效果
 <MENU>...</MENU> 條列文字標籤
 <META NAME="REFRESH" CONTENT URL> 自動更新文件內容
 <MULTIPLE> 可同時選擇多項的列表欄
 <NOFRAME> 定義不出現分割視窗的文字
 <OL>...</OL> 有序號的列表
 <OPTION> 定義表單中列表欄的項目
 <P ALIGN> 設定對齊方向
 <P> 分段
 <PERSON>...</PERSON> 顯示人名
 <PRE> 使用原有排列
 <SAMP>...</SAMP> 用於引用字
 <SELECT>...</SELECT> 在表單中定義列表欄
 <SMALL> 顯示小字體
 <STRIKE> 文字加橫線
 <STRONG> 用於加強語氣
 <SUB> 下標字
 <SUP> 上標字
 <TABLE BORDER=n> 調整表格的寬線高度
 <TABLE CELLPADDING> 調整資料欄位之邊界
 <TABLE CELLSPACING> 調整表格線的寬度
 <TABLE HEIGHT> 調整表格的高度
 <TABLE WIDTH> 調整表格的寬度
 <TABLE>...</TABLE> 產生表格的標籤
 <TD ALIGN> 調整表格欄位之左右對齊
 <TD BGCOLOR> 設定表格欄位之背景顏色
 <TD COLSPAN ROWSPAN> 表格欄位的合併
 <TD NOWRAP> 設定表格欄位不換行
 <TD VALIGN> 調整表格欄位之上下對齊
 <TD WIDTH> 調整表格欄位寬度
 <TD>...</TD> 定義表格的資料欄位
 <TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄
 <TEXTAREA WRAP> 決定文字輸入欄是自動否換行
 <TH>...</TH> 定義表格的標頭欄位
 <TITLE> 文件標題
 <TR>...</TR> 定義表格美一行
 <TT> 打字機字體
 <U> 文字加底線
 <UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )
 <VAR>...</VAR> 用於顯示變數 
Categories
 

YOUG5G Copyright © 2010 Designed by Ipietoon Blogger Template Sponsored by Emocutez