**CSS初階教學**^
**CSS********~~!
 |
要宣告CSS樣式表首先你必須具備有HTML網頁語法的基礎！也就是你必須了解網頁原始碼中標籤的意義，在此我們假設你已經熟悉了這些HTML網頁標籤！
|
 樣式宣告的標準語法如下： Element {Property : value}  Element :HTML網頁標籤名稱，如：<P>、</P>.......等。 Property :HTML網頁標籤屬性名稱，如：color、font-size.......等。 value :HTML網頁標籤屬性值。 注意：HTML網頁標籤屬性名稱與HTML網頁標籤屬性值之間必須以冒號隔開；而HTML網頁標籤屬性名稱與HTML網頁標籤屬性值則必需以一組大括號{ }包括起來！ |
如果我們在樣式表中宣告了下列敘述：
Ｐ {ｃｏｌｏｒ : ＃ＦＦ００００}
這樣的樣式宣告會造成什麼結果呢？結果就是將被包括在＜Ｐ＞與＜/Ｐ＞之間的文字
外觀顏色都變成紅色。
如果我們在樣式表中宣告了下列敘述：
Ｐ {ｃｏｌｏｒ : ＃ＦＦ００００；ｆｏｎｔ－ｓｉｚｅ : １０ｐｔ}
這樣的樣式宣告又會造成什麼結果呢？結果就是將被包括在＜Ｐ＞與＜/Ｐ＞之間的文字
外觀顏色都變成紅色而且文字的大小指定為１０pt。
獨立宣告~~!
什麼叫獨立宣告啊？！獨立宣告也就所謂的分組宣告，網頁標籤的可設定屬性相當多，因此以分組的宣告方式來管理是一個不錯的選擇，例如：BODY標籤它可以設定的屬性就相當地多，有背景顏色、文字大小、文字字型樣式.....等等，現在就以BODY 標籤的樣式宣告為示範對象進行解說！
|
 |
| 如果我們在樣式表中宣告下列的BODY標籤敘述：
BODY {ｂａｃｋｇｒｏｕｎｄ : ＃ＦＦ００００；ｆｏｎｔ－ｓｉｚｅ : １０ｐｔ}
這樣的樣式宣告將會把包括在＜BODY＞與＜/BODY＞之間的文字外觀顏色都變成紅色同時將文字的大小指定 為１０pt !
|
**如果我們在樣式表中宣告下列BODY標籤敘述：
如果我們在樣式表中宣告下列BODY標籤敘述：
BODY {ｂａｃｋｇｒｏｕｎｄ : ＃００ＦＦ００}
BODY {ｆｏｎｔ－ｓｉｚｅ : １０ｐｔ}
BODY {ｆｏｎｔ－ｓｉｚｅ : １０ｐｔ}
這樣的樣式宣告又會造成什麼結果呢？結果是與範例解說A一模一樣的：
被包括在＜BODY＞與＜/BODY＞之間的文字外觀顏色都變成紅色而且文字
的大小指定為１０pt。既然所得到的結果都一樣，那分組的意義在哪裡呢？
分組的意義在於分類管理標籤不同的樣式性質，以本例來說，我們分類
管理了BODY標籤的顏色相關屬性與文字相關屬性！
危險的錯誤宣告
BODY {ｆｏｎｔ－ｓｉｚｅ : １0ｐｔ}
BODY {ｂａｃｋｇｒｏｕｎｄ : ＃００ＦＦ００}
BODY {ｆｏｎｔ－ｓｉｚｅ : １2ｐｔ}
BODY {ｂａｃｋｇｒｏｕｎｄ : ＃００ＦＦ００}
BODY {ｆｏｎｔ－ｓｉｚｅ : １2ｐｔ}
這樣的樣式宣告又會造成什麼結果呢？結果將是：
被包括在＜BODY＞與＜/BODY＞之間的文字外觀顏色都
變成紅色但是文字的大小卻指定為１２pt。在本例中我們重複
的宣告了BODY標籤的文字大小屬性，但結果是最後宣告的設定值生效了！
因此在被包括在＜BODY＞與＜/BODY＞之間的文字大小都被指定為１２pt ~
**
**
**
*複合宣告，複合宣告可分為兩種情況！一種是將網頁標籤的
不同樣式性質宣告在一起〔不同的屬性設定以分號格開〕，
這種情況之前我們已經使用過了呦！另一種就是將不同
的網頁標籤但是樣式性質相同的屬性合併在一起宣告
〔不同的網頁標籤以逗號格開〕！
**單獨標簽的復合宣告**
*：一行通吃
BODY { background:#FF0000 ; color:#00FF00 ; ：一行通吃 font-size:10pt ; font-family:細明體 }
這樣的樣式宣告結果將是：
被包括在＜BODY＞與＜/BODY＞標籤之間的文字外觀顏色都變成綠色、
文字的大小指定為１０pt、文字字型為細明體同時背景顏色也被指定為紅色。
在本例中我們一次就宣告了BODY標籤的四種樣式屬性，但請注意：
每個指定的樣式屬性之間必須以分號隔開！
：多行排列 BODY { background:#FF0000 ; color:#00FF00 ;
font-size:10pt ;
font-family:細明體 }
其實多行排列與一行通吃所得到的結果是相同的！但是為了顧及HTML網頁
原始檔的維護與排版，當宣告過長時我們就可在分號之後加以折行撰寫，
不管中間有多少空白字元或是幾個換行列，只要我們宣告的
格式正確就都不會有錯誤發生的
**多組標簽的復合宣告**
**：一行通吃
BODY，Ｐ { color:#00FF00 ; font-size:10pt ; font-family:細明體 }：一行通吃 這樣的樣式宣告結果將是：被包括在＜BODY＞與＜/BODY＞標籤之間的
文字外觀顏色都變成綠色、文字的大小指定為１０pt、文字字型為細明體；同時，
在被包括在＜P＞與＜/P＞標籤之間的文字外觀顏色也都變成綠色、文字的大小
指定為１０pt、文字字型為細明體，本例中我們一次就宣告了BODY標籤與Ｐ標籤的三種
共通樣式屬性。
請注意：進行複合宣告的標籤之間必須以逗號隔開！
：多行排列BODY，Ｐ { color:#00FF00 ; font-size:10pt ;
font-family:細明體 }
同樣的，多組標籤的複合宣告也可以使用多行排列，與一行通吃所得到的結果是相同的 !!
css 基礎網頁應用
|
*
典型的<STYLE>樣式表宣告：
<HTML>
<HEAD>
<STYLE>
<!--
BODY {background:RED;color:BLACK}
BODY {font-size:12pt}
-->
</STYLE>
<TITLE>典型的樣式表宣告</TITLE>
</HEAD>
</BODY>這是標準的STYLE宣告<BODY>
</html>
<HEAD>
<STYLE>
<!--
BODY {background:RED;color:BLACK}
BODY {font-size:12pt}
-->
</STYLE>
<TITLE>典型的樣式表宣告</TITLE>
</HEAD>
</BODY>這是標準的STYLE宣告<BODY>
</html>
這樣的樣式宣告會造成什麼結果呢？結果就是將被
包括在<BODY>與<BODY>標籤之間的文字外觀顏色都變成黑色、文字
大小為12pt，同時網頁的背景色設定為紅色。
網頁標籤內的<STYLE>樣式宣告：我們除了可以將CSS屬性以集合的方式
合併宣告外，也可以在網頁標籤中直接
加入CSS的樣式性質！
<HTML>
<HEAD>
<TITLE>網頁標籤內的樣式宣告</TITLE>
</HEAD>
<BODY>
<P STYLE=" font-size:14pt;color:BLUE">
這是在網頁標籤內STYLE宣告</P>
</BODY>
</html>
<HEAD>
<TITLE>網頁標籤內的樣式宣告</TITLE>
</HEAD>
<BODY>
<P STYLE=" font-size:14pt;color:BLUE">
這是在網頁標籤內STYLE宣告</P>
</BODY>
</html>
這樣的樣式宣告又將會造成什麼結果呢？結果就是將被包括在<P>與</P>標籤之間
的文字外觀顏色都變成藍色、文字大小為14pt，為什麼會這樣呢？因為
我們在<P>網頁標籤中又加上了CSS的STYLE性質設定：font-size:14pt 將文字
大小格式設定為14pt；color:BLUE 同時將文字外觀顏色設定為藍色。
*
進階的<LINK>樣式表檔案參照：
進階的<LINK>樣式表檔案參照： 如果我們有很多的檔案要採用統一的設計 風格，如果在每張網頁中都加入相同的樣式
宣告未免太麻煩、太沒效率啦！因此，我們
可以先自行建立一個樣式參照檔案，這個
參照檔案只是一個純文字的檔案格式，
任意一種文書編輯器就可以用來編輯參照
檔案的內容！
樣式表檔案的內容並不需要加 上<STYLE>與</STYLE>標籤，同時，
更不需要加上<!-- 與 --> 註解標籤，現在就請你
開啟你慣用的文書編輯器來編輯一個樣式參照
檔案，同時將檔案名稱定為 test1.css (這只是範例，
參照檔案的名稱你可以自訂)並且加入以下內容：
BODY {font-size: 12pt ; font-family: 標楷體}
BODY {background: #008800 ; color: #FFFFFF}
P {color:RED}
P {font-size:14pt}
BODY {background: #008800 ; color: #FFFFFF}
P {color:RED}
P {font-size:14pt}
這樣的樣式內容是什麼意思呢？就是將被包括在<BODY>與<BODY>標籤之間
的文字字型設定為標楷體、文字大小為12pt，
網頁的背景設設定為綠色，文字外觀顏色都
變成白色；包括在<P>與</P>標籤之間的文字大小
為14pt、文字外觀顏色都變成紅色。
在建立好參照檔案後，接著我們就要利用LINK標籤來指定樣式表的關聯啦！
現在我們就來建立一個HTML網頁檔：
<HTML>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="test.css">
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</html>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="test.css">
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</html>
REL=STYLESHEET ：表示我們要參照一個外部的樣式檔案
TYPE="text/css" ：說明我們參照的檔案類型
HREF="test.css"：指定我們要參照的樣式檔案位置及檔名
TYPE="text/css" ：說明我們參照的檔案類型
HREF="test.css"：指定我們要參照的樣式檔案位置及檔名
進階的@import 樣式表檔案參照：我們除了可以用LINK標籤來指定樣式表的關聯外，也可以採用@import 指定法！但是這種指定法
比較麻煩一點，不但要把它加
在<STYLE>與</STYLE>標籤內，
同時還得加上<!-- 與 --> 註解標籤。
我們沿用上一個範例的test1.css樣式檔案 來說明，現在就讓我們來建立一個以@import 指
定法的HTML網頁檔：
<HTML>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE><STYLE>
<!--
@import URL(./test.css);
-->
</STYLE>
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</html>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE><STYLE>
<!--
@import URL(./test.css);
-->
</STYLE>
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</html>
URL(./test.css); 指定我們要參照的樣式檔案位置及檔名
使用@import 指定法來參照外部樣式檔案；
使用@import 指定法來參照外部樣式檔案；
請注意：在@import 敘述的最後面一定要加上一個分號
*
標準、進階四法結合使用：
標準、進階四法結合使用： 為了解說方便，現在就再次請你開啟你 慣用的文書編輯器來編輯一個新的樣式參
照檔案，同時將檔案名稱定為 test2.css
(這只是範例，參照檔案的名稱你可以自訂)
並且加入以下內容：
BODY {font-size: 16pt ; font-family: 新細明}
BODY {background: #FFC8FF ; color: #000000}
P {color:BLUE}
P {font-size:10pt}
BODY {background: #FFC8FF ; color: #000000}
P {color:BLUE}
P {font-size:10pt}
樣式宣告內容：包括在<BODY>與<BODY>標籤之間的文字
字型設定為新細明、文字大小為16pt，網頁
的背景設設定為粉紅色，文字外觀顏色都
變成黑色；包括在<P>與</P>標籤之間的文字大小
為10pt、文字外觀顏色都變成藍色。
在建立好參照檔案後，接著我們就要利用標準、進階四法結合使用來
建立一個HTML網頁檔：
<HTML>
<HEAD>
<TITLE>結合法參照樣式範例</TITLE><LINK REL=STYLESHEET TYPE="text/css" HREF="test1.css">
<STYLE>
<!--@import url("test2.css");
A {color:#772B1A}
-->
</STYLE>
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P style="color:YELLOW">這是在P標籤內的文字</P>
<A>鏈結的A標記</A>
</BODY>
</HTML>
<HEAD>
<TITLE>結合法參照樣式範例</TITLE><LINK REL=STYLESHEET TYPE="text/css" HREF="test1.css">
<STYLE>
<!--@import url("test2.css");
A {color:#772B1A}
-->
</STYLE>
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P style="color:YELLOW">這是在P標籤內的文字</P>
<A>鏈結的A標記</A>
</BODY>
</HTML>
[實例展示]現在你應該清楚的了解到CSS的樣式宣告四法其實並不會衝突而且可以合併結合
使用了吧！這宣告四法雖然可以合併結合使用，但是這樣的結合宣告我們並不認為
是適當的！因為把眾多的功能混雜使用只會使自己弄得糊裡糊塗的！建議你還是選擇設
合自己習慣的一種方法來使用就好。
樣式宣告衝突時的優先順序：當我們混合多種的樣式宣告法後，若有些
標籤樣式的性質重複宣告了怎麼辦？他們的
優先順序如何？
作用優先順序：直接加註在標籤內的樣式
性質 > STYLE樣式區段內的性質 > 鏈結進來的
樣式檔案性質
- 直接加註在標籤內的樣式性質 ：
- 例如，<P style="color:YELLOW">。
- STYLE樣式區段內的性質：被包括
- 在<STYLE>與</STYLE>標籤之間的樣式性質設定。
- 鏈結進來的樣式檔案性質：利用 LINK
- 方法或 @import 方法鏈結進來的樣式
- 檔案宣告內容。
設定優先順序：網頁設計者的設定 >
瀏覽者的使用者自訂 > 瀏覽器的預先設定
- 網頁設計者的設定：就是我們所討論的
- 樣式性質設定啦！
- 瀏覽者的使用者自訂：瀏覽者透過所使用
- 的瀏覽器進行自己瀏覽格式的設定。
- 瀏覽器的預先設定：瀏覽者所使用的
- 瀏覽器所預設的瀏覽格式。
*css 進階網頁應用
**
在CSS的世界中並非只有文字格式的變化而已！其實，還有非常多
的特殊效果可以呈現喔！在本單元中所要介紹的效果都是CSS可以
獨立操做而不必其他語言配合方能表現的，但是因為有些瀏覽者
所使用的瀏覽器並不支援這些CSS的性質功能，因此在某些特定的
瀏覽器中或許就沒有辦法表現出這些新奇的效果 ！
|
  虛擬類別：虛擬類別？這是什麼東東啊？！虛擬類別主要是用來控制鏈結文字的色彩變化，
也就是說利用在網頁鏈結標籤<A>的上面，但是這些虛擬類別並不能寫在網頁標籤中。
 不要以為只有你使用的Windows系統才有所謂不同的滑鼠指標變化呦！ |
在網頁中也可以有不同的滑鼠指標變化呦！不過很可惜目前只有IE4才有
這種變化效果。
比如說：網頁剝落效果、百葉窗效果....等等。
你是不是常常利用圖片的方式來表現文字的立體效果？其實，利用
CSS同樣也能以片段的文字來達到體積較大的圖片效果喔
*虛擬類別
所謂的虛擬類別就是讓我們可以很輕易
的控制被包括在<A>與</A>鏈結標籤中的文字鏈結字串的變化
的CSS標準性質。包括了：尚未瀏覽過的鏈結字串顏色、正要開始瀏覽的鏈結字
串顏色、已經瀏覽過的鏈結字串顏色及滑鼠指標移至鏈結字串時所顯現的文字外觀
顏色等四種，特別要注意的是：前三種屬性設定不管是 NetScapt4、IE3、IE4 都有
支援解析；但是第四種屬性也就是：設定滑鼠指標移至鏈結字串時所顯現的文字外觀
顏色屬性，這個虛擬類別屬性目前只有IE4 有支援解析！
 A:link | 尚未瀏覽過的鏈結字串顏色。 |
 A:active | 正要開始瀏覽的鏈結字串顏色。 |
 A:visited | 已經瀏覽過的鏈結字串顏色。 |
 A:hover | 滑鼠指標移至鏈結字串時所顯現的文字外觀顏色。 |
標準用法：以下是一個簡短的HTML網頁範例，我們宣告CSS的
虛擬類別控制被包括在<A>與</A>鏈結標籤中的文字鏈結字串：
尚未瀏覽過的鏈結字串 顏色為綠色、正要開始瀏覽的鏈結字串顏色為藍色、
已經瀏覽過的鏈結字串顏色為咖啡色及滑鼠指標移至鏈結字串時所顯現的
文字外觀顏色為紅色：
<html><head>
<STYLE>
<!--
A:link {color:Green}
A:active {color:Blue}
A:visited {color:#772B1A}
A:hover {color:Red}
-->
</STYLE>
<title>虛擬類別控制範例１</title>
</head><body>
<a class=lin href="webuseaex1.htm">虛擬類別測試１</a>
</body></html>
<STYLE>
<!--
A:link {color:Green}
A:active {color:Blue}
A:visited {color:#772B1A}
A:hover {color:Red}
-->
</STYLE>
<title>虛擬類別控制範例１</title>
</head><body>
<a class=lin href="webuseaex1.htm">虛擬類別測試１</a>
</body></html>
[實例展示]
進階用法：
我們除了可以控制被包括在<A>與</A>鏈結標籤中的文字鏈結字串顏色外還可以
加上鏈結文字的字型與文字大小的控制：尚未瀏覽過的鏈結字串顏色為綠色字體
大小為14pt、正要開始瀏覽的鏈結字串顏色為藍色、已經瀏覽過的鏈結字串顏色
為咖啡色字體大小為16pt及滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色
大小為16pt字型為標楷體：
進階用法：加上鏈結文字的字型與文字大小的控制：尚未瀏覽過的鏈結字串顏色為綠色字體
大小為14pt、正要開始瀏覽的鏈結字串顏色為藍色、已經瀏覽過的鏈結字串顏色
為咖啡色字體大小為16pt及滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色
大小為16pt字型為標楷體：
<html><head>
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt}
A:hover {color:Red;font-size:16pt;font-family:標楷體}
-->
</STYLE>
<title>虛擬類別控制範例２</title>
</head><body>
<a class=lin href="webuseaex2.htm">虛擬類別測試２</a>
</body></html>
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt}
A:hover {color:Red;font-size:16pt;font-family:標楷體}
-->
</STYLE>
<title>虛擬類別控制範例２</title>
</head><body>
<a class=lin href="webuseaex2.htm">虛擬類別測試２</a>
</body></html>
[實例展示]
特殊用法：
十六種屬性值，也就可以呈現的指標樣式有十六種：
*
*註:把你的滑鼠移至上表中的滑鼠值表
屬性名稱上你就可以看到相對應的滑鼠
指標形狀 ~
*
標準的樣式宣告：
我們可以使用標準的樣式宣告：將我們所要設定的樣式性質包括
合併於主文標籤中的樣式宣告：
另外還有一種常用來設定網頁中滑鼠指標的宣告方式：那就是將接我們所要設定
虛擬類別與滑鼠指標：
滑鼠指標性質其實可以使用於任何的標籤特性上，也就是說它相容於所有的網頁
*轉換效果*
*當你進入本單元的各個網頁時相信你
會驚訝的發現網頁為何會產生轉化的效果？
但是，如果你是使用Netscapt 瀏覽器來
觀賞本網頁一定看不到這種特殊的效果！
因為目前這種效果只有IE4以上的版本才
有解析的能力。
所謂網頁轉換的效果就是類似電影場景的轉換，例如：水平百葉窗轉換、圓形漸小、
方塊漸大等效果。以前要做到這種頁面轉換的效果通常是必須透過Java Applet 或
是ActiveX Control 等的輔助才能在瀏覽器中顯現出來，但是現在因為瀏覽器的支援
解析，只要透過短短的一行網頁敘述就可以達到這種動人的效果！
為了要能順利的使用CSS所提供的頁面
轉換效果，首先我們先來看一下HTML標籤
語法中相當重要的一個主標籤：
＜ＨＥＡＤ＞與＜/ＨＥＡＤ＞標籤之中的。
而＜ＭＥＴＡ＞標籤中的"網頁動作"設定值
在我們的網頁頁面轉換效果中指遇到兩個設
定值，就是： Page-Enter 當網頁被載入時，
Page-Exit 當網頁載出時。
＜ＭＥＴＡ＞標籤中的"動作或時間設定"設定值
在我們的網頁頁面轉換效果中所使用的就是
CSS的頁面轉換性質，其標準語法如下：
頁面轉換的花樣共有２４種，
特殊用法：- 經過上列的範例演練後你應該了解了CSS的威力了吧！告訴你！這樣還算遜啦！
- 有沒有看到鏈結字串下方還有一條底線？很醜對吧？！有沒有發覺本網頁中
- 的鏈結字串就少了那醜醜的底線？
- 要如何消除那醜醜的底線呢？告訴你一個CSS的文字裝飾屬性：
- text-decoration ，這個屬性有五個屬性值，列表如下：none
無變化，什麼都沒有。 underline加上底線。 overline加上頂線。 
line-through加上刪除線。 
blink閃爍文字。
- 好的！知道了這個CSS的文字裝飾屬性：
- text-decoration後，只要你加入
- text-decoration:none 這組CSS屬性與屬性值之後就
- 可以消除鏈結字串下方那醜醜的底線啦！
下面這個範例不僅使滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色
大小為16pt字型為標楷體外還消除了鏈結文字的底線，同時我們還設定了已經
瀏覽過的鏈結字串顏色為咖啡色字體大小為16pt並且還幫它劃上了一條刪除線 ！
<html><head>
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt;
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt;
text-decoration:line-through}
A:hover {color:Red;font-size:16pt;font-family:
A:hover {color:Red;font-size:16pt;font-family:
標楷體;text-decoration:none}
-->
</STYLE>
<title>虛擬類別控制範例３</title>
</head><body>
<a class=lin href="webuseaex3.htm">虛擬類別測試３</a>
</body></html>
-->
</STYLE>
<title>虛擬類別控制範例３</title>
</head><body>
<a class=lin href="webuseaex3.htm">虛擬類別測試３</a>
</body></html>
*滑鼠指標
**不要以為只有你使用的Windows系統才有
所謂不同的滑鼠指標變化！在網頁中也
可以有不同的滑鼠指標變化！不過只有
IE4 以上才有這種變化效果。
滑鼠指標也就是所謂的CURSOR，目前在CSS2的樣式性質中一共可以設定 十六種屬性值，也就可以呈現的指標樣式有十六種：
*
auto
| 由使用者瀏覽器預設的滑鼠箭頭。 |
crosshair
| 十字交叉的滑鼠箭頭。 |
default
| 由使用者作業系統所決定的滑鼠指標。 |
hand
| 手指頭指向的滑鼠指標。 |
move
| 十字指向四方的指標箭頭。 |
e-resize
| 指向右方的箭頭滑鼠指標。 |
ne-resize
| 指向右上方的箭頭滑鼠指標。 |
nw-resize
| 指向左上方的箭頭滑鼠指標。 |
n-resize
| 指向上方的箭頭滑鼠指標。 |
se-resize
| 指向右下方的箭頭滑鼠指標。 |
sw-resize
| 指向左下方的箭頭滑鼠指標。 |
s-resize
| 指向下方的箭頭滑鼠指標。 |
w-resize
| 指向左方的箭頭滑鼠指標。 |
text
| 代表可編輯文字的Ｉ字滑鼠指標。 |
wait
| 表示等待作業或忙碌中的滑鼠指標。 |
help
| 箭頭再加上問號的滑鼠指標。 |
*註:把你的滑鼠移至上表中的滑鼠值表
屬性名稱上你就可以看到相對應的滑鼠
指標形狀 ~
*
標準的樣式宣告：我們可以使用標準的樣式宣告：將我們所要設定的樣式性質包括
在<STYLE>與</STYLE>標籤之間，同時必須於CSS宣告內容的兩端加上
<!-- 與 --> 的註解符號！最重要的是樣式宣告內容必須被包括
在<HEAD>與</HEAD>之間。
以下是一個簡短的HTML網頁範例，
我們宣告CSS的虛擬類別控制被包括在<DIV>與</DIV>網頁標籤中的文字字串：
當滑鼠移至字串上時滑鼠指標就變成箭頭再加上問號的指標形狀。
<html>
<HEAD>
<STYLE>
<!--
DIV {cursor: help}
-->
</STYLE>
<title>滑鼠指表控制範例１</title>
</HEAD>
<body>
<DIV>滑鼠指表控制範例１</DIV></body>
</html>
<HEAD>
<STYLE>
<!--
DIV {cursor: help}
-->
</STYLE>
<title>滑鼠指表控制範例１</title>
</HEAD>
<body>
<DIV>滑鼠指表控制範例１</DIV></body>
</html>
合併於主文標籤中的樣式宣告：另外還有一種常用來設定網頁中滑鼠指標的宣告方式：那就是將接我們所要設定
的樣式性質及屬性質直接包括在網頁標籤之中。
要在網頁標籤中設定滑鼠指標的樣式性質必須透過STYLE標籤：我們必須利用STYLE標
籤來設定被包括在特定網頁標籤中的圖片或文字字串當滑鼠移至字串上時滑鼠指標
所要呈現的指標形狀。
以下這個HTML網頁範例就是利用合併於
主文(包括在<BODY>與</BODY>標籤之中
的內容)標籤中的STYLE樣式宣告，來達到
改變滑鼠指標形狀的目的：當滑鼠移
到<P STYLE="cursor: wait">與</P>網頁標籤中的文字字串時
滑鼠指標就變成表示等待作業或忙碌中的滑鼠指標。
<html>
<HEAD>
<title>滑鼠指表控制範例２</title>
</HEAD>
<BODY>
<P STYLE="cursor: wait">滑鼠指表控制範例２</P></BODY>
</html>
<HEAD>
<title>滑鼠指表控制範例２</title>
</HEAD>
<BODY>
<P STYLE="cursor: wait">滑鼠指表控制範例２</P></BODY>
</html>
虛擬類別與滑鼠指標：滑鼠指標性質其實可以使用於任何的標籤特性上，也就是說它相容於所有的網頁
標籤，不但如此，滑鼠指標性質對於虛擬類別的變化更是如虎添翼。
以下這個HTML網頁範例，
- 我們宣告CSS的虛擬類別控制被包括在<A>與</A>鏈結標籤中的文字
- 鏈結字串：尚未瀏覽過的鏈結字串顏色為綠色字體大小為14pt、正要開始
- 瀏覽的鏈結字串顏色為藍色、已經瀏覽過的鏈結字串顏色為咖啡色字體大小
- 為16pt並且將滑鼠指表形狀設為十字交叉的滑鼠箭頭及滑鼠指標移至
- 鏈結字串時所顯現的文字外觀顏色為紅色大小為16pt字型為標楷體滑鼠指表
- 形狀設為指向上方的箭頭滑鼠指標。
- 包括在<P>與</P>非鏈結標籤中的文字字串：當滑鼠移至字串上時滑鼠
- 指標就變成表示等待作業或忙碌中的滑鼠指標。
<html>
<HEAD>
<title>滑鼠指表控制範例３</title>
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt;cursor:crosshair}
A:hover {color:Red;font-size:16pt;font-family:標楷體;cursor:n-resize}
-->
</STYLE>
</HEAD>
<BODY>
<P STYLE="cursor: wait">不具超鏈結功能的Ｐ標籤</P>
<a class=lin href="webusebex3.htm">有超鏈結能力的Ａ標籤</A>
</BODY>
</html>
<HEAD>
<title>滑鼠指表控制範例３</title>
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt;cursor:crosshair}
A:hover {color:Red;font-size:16pt;font-family:標楷體;cursor:n-resize}
-->
</STYLE>
</HEAD>
<BODY>
<P STYLE="cursor: wait">不具超鏈結功能的Ｐ標籤</P>
<a class=lin href="webusebex3.htm">有超鏈結能力的Ａ標籤</A>
</BODY>
</html>
*轉換效果*
*當你進入本單元的各個網頁時相信你
會驚訝的發現網頁為何會產生轉化的效果？
但是，如果你是使用Netscapt 瀏覽器來
觀賞本網頁一定看不到這種特殊的效果！
因為目前這種效果只有IE4以上的版本才
有解析的能力。
所謂網頁轉換的效果就是類似電影場景的轉換，例如：水平百葉窗轉換、圓形漸小、
方塊漸大等效果。以前要做到這種頁面轉換的效果通常是必須透過Java Applet 或
是ActiveX Control 等的輔助才能在瀏覽器中顯現出來，但是現在因為瀏覽器的支援
解析，只要透過短短的一行網頁敘述就可以達到這種動人的效果！
為了要能順利的使用CSS所提供的頁面 轉換效果，首先我們先來看一下HTML標籤
語法中相當重要的一個主標籤：
<meta http-equiv="網頁動作" content="動作或時間設定">
上列的這個<META>標籤是必須被包括在 ＜ＨＥＡＤ＞與＜/ＨＥＡＤ＞標籤之中的。
而＜ＭＥＴＡ＞標籤中的"網頁動作"設定值
在我們的網頁頁面轉換效果中指遇到兩個設
定值，就是： Page-Enter 當網頁被載入時，
Page-Exit 當網頁載出時。
＜ＭＥＴＡ＞標籤中的"動作或時間設定"設定值 在我們的網頁頁面轉換效果中所使用的就是
CSS的頁面轉換性質，其標準語法如下：
revealTrans(Duration=<duration>,
Transition=<transition shape>)
<duration>表示頁面轉換時所需的毫秒數，<transition shape>則是
代表頁面轉換的花樣型式。
頁面轉換的花樣共有２４種，
我們使用時只要呼叫其花樣型式的代號
即可，茲將此２４種花樣型式代號說明如下：
*
| 代號 | 花樣 | 代號 | 花樣 |
| ０ | 方塊漸小 | １２ | 隨機碎片隱藏 |
| １ | 方塊漸大 | １３ | 垂直向內撥裂 |
| ２ | 圓形漸小 | １４ | 垂直向外撥裂 |
| ３ | 圓形漸大 | １５ | 水平向內撥裂 |
| ４ | 由下向上擦拭 | １６ | 水平向外撥裂 |
| ５ | 由上向下擦拭 | １７ | 由右上向左下撥裂 |
| ６ | 由左向右擦拭 | １８ | 由右下向左上撥裂 |
| ７ | 由右向左擦拭 | １９ | 由左上向右下撥裂 |
| ８ | 垂直百葉窗 | ２０ | 由左下向右上撥裂 |
| ９ | 水平百葉窗 | ２１ | 隨機水平條紋擦拭 |
| １０ | 水平棋盤 | ２２ | 隨機垂直條文擦拭 |
| １１ | 垂直棋盤 | ２３ | 前２３項隨機選取 |
*網頁載入時的轉換特效現在我們來建立兩個簡易的網頁：A網頁為
標準無變化的單純網頁(本範例為
webusecex1.htm)，B網頁為具有載入
時產生垂直百葉窗轉換效果的網頁(本範例為
webusecex11.htm)：
A網頁(本範例為 webusecex1.htm)
|
B網頁(本範例為 webusecex11.htm)
|
| <html> <HEAD> <title>頁面轉換特效範例畫面１</title> </HEAD> <body background="images/4-12.gif"> <a class=lin href="webusecex11.htm"> 頁面轉換特效範例畫面２</A> </body> </html> | <html> <HEAD> <meta http-equiv="Page-Enter" content="revealTrans (Duration=5.0,Transition=8)"> <title>頁面轉換特效範例畫面２</title> </HEAD> <body background="images/4-13.gif"> <a class=lin href="webusecex1.htm"> 頁面轉換特效範例畫面１</A> </body> </html> |
[實例展示]
當進入實例展示的第一個畫面(A網頁)並不
當進入實例展示的第一個畫面(A網頁)並不
會有任何變化，接著我們點選超鏈結文字連
結至B網頁後，你就可以看到B網頁中我們所
設定的頁面載入特效啦！
網頁載出時的轉換特效現在我們換個方式，不要使用載入時產生
特效而採用網頁載出時產生特效，現在同樣
來建立兩個簡易的網頁：A網頁為具有載出
入時產生垂直百葉窗轉換效果的網頁(本範例為
webusecex2.htm)，B網頁為標準無變化
的單純網頁(本範例為 webusecex22.htm)：
A網頁
(本範例為 webusecex2.htm)
|
B網頁
(本範例為 webusecex22.htm)
|
| <html> <HEAD> <meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0, Transition=8)"> <title>頁面載出轉換特效範例畫面 １</title> </HEAD> <body background="images/4-12.gif"> <a class=lin href="webusecex22.htm"> 頁面轉換 特效範例畫面２</A> </body> </html> | <html> <HEAD> <title>頁面載出轉換特效範例畫面 ２</title> </HEAD> <body background="images/4-13.gif"> <a class=lin href="webusecex2.htm"> 頁面轉換特效範例畫面１</A> </body> </html> |
[實例展示]當進入實例展示的第一個畫面(A網頁)並
不會有任何變化，接著我們點選超鏈結文
字連結至B網頁後，你就可以看到網頁的轉
換特效，是不是與上一個範例的結果
相同呢？但是這個效果並非是B頁面載入
所產生的而是A頁面載出所產生的特效 !
*堆疊效果*
*CSS除了可以用來設定網頁文字的大小、
樣式、字型與顏色外，我們還可以利用CSS
以圖素(像素)為單位來將文字字串安排在
多層次的版面上，這就是所謂的堆疊，比較
理論複雜的說法就是所謂的'z-index'，
以3D立體來說：我們可以將文字平面
(或是圖片平面)當成水平X軸與垂直Y軸
所構成的平面，而'z-index'就是指Z軸上
的座標位置。
當我們要訂定一個網頁中的文字內容或圖片 絕對位置時，我們必須遵守CSS所定位置標準：’top’與’left’(以圖素(像素)為單位)
，舉例來說：我們要將某一文字字串放在
瀏覽器視窗從左邊緣算來第６０個像素的位置，
從上邊緣算來第１００個像素的位置，則我們
應該指定’top’為１００與’left’為６０。
*
看到了上圖所呈現的文字字串堆疊效果覺得
很棒吧！這個效果是如何做出來的呢？複習
一下前幾個單元的介紹，同時將本單元的新
CSS性質屬性加入利用，我們Step By Stype
的來實做一下：
標準的網頁內容開頭：<html>
<HEAD>
<title>堆疊效果範例１</title>
CSS樣式宣告內容：別忘了加上註解符號。<STYLE>
<!--
設定網頁的背景顏色：網頁背景色
設為綠色。
BODY {background:#008800}
BODY {background:#008800}
定義第一個層次所要表現的文字樣式 layer1：這一個層次的開始位置是在瀏覽器視窗從左邊緣算來
第３０個像素的位置，從上邊緣算來第２０個像素的位置，特別要注意的是：
這個層次的’z-index’屬性值為１。
.layer1{
position:absolute;
top:20px;
left:30px;
z-index:1;
font-size:24pt;
font-family:標楷體;
color:#FFFFFF}
.layer1{
position:absolute;
top:20px;
left:30px;
z-index:1;
font-size:24pt;
font-family:標楷體;
color:#FFFFFF}
定義第一個層次所要表現的文字樣式 layer2：這第二個層次的開始位置是在瀏覽器視窗從上邊緣算
來第４０個像素的位置，從左邊緣算來第１２０個像素的位置，特別要注意的是：
這個層次的’z-index’屬性值為２。
.layer2{
position:absolute;
top:40px;
left:120px;
z-index:2;
font-size:12pt;
font-family:標楷體}
.layer2{
position:absolute;
top:40px;
left:120px;
z-index:2;
font-size:12pt;
font-family:標楷體}
結束CSS樣式宣告內容：別忘了加上註解符號。-->
</STYLE>
</HEAD>
開始主文(<BODY>標籤)並在網頁標籤<P>
中直接加入我們所宣告的CSS屬性類別設定。
<BODY>
<P class="layer1">第一層的文字字串</P>
<P class="layer2">第二層的文字字串</P>
<BODY>
<P class="layer1">第一層的文字字串</P>
<P class="layer2">第二層的文字字串</P>
結束主文(</BODY>)與網頁主體(</html>)標籤。</BODY>
</html>
*
不僅是文字字串可以做層次的堆疊，其實
圖片也可以做不同層次的堆疊！在開始示
範吐片層次堆疊前，不知你在觀賞上一個
文字字串堆疊範例時是否注意到了一
個CSS屬性：position？這個屬性是做什麼
用的呢？它是用來指定元件(文字字串、
圖片....)在瀏覽器畫面上的擺設方式，
它的屬性值之介紹說明如下：
| absolute | 以主元件為基準(通常指的是網頁畫面主體)，擺設元件 在某依特定位置。 |
| relative | 以相鄰的元件為位置基準，擺設元件在某依特定位置。 |
| static | 依元件在HTML網頁原始碼中的位置擺放，此為預設值。 |
我們就以兩張不同的圖片為元件來進行層次
排練的實作練習：
標準的網頁內容開頭：<html>
<HEAD>
<title>堆疊效果範例２</title>
CSS樣式宣告內容：別忘了加上註解符號。<STYLE>
<!--
定義第一個層次所要表現的圖片擺設位置
樣式 map1：
這一個層次的開始位置是在瀏覽器視窗從左邊緣算來第
這一個層次的開始位置是在瀏覽器視窗從左邊緣算來第
３０個像素的位置，從上邊緣算來第２０個像素的位置，特別要注意的是：
這個層次的’z-index’屬性值為１。.map1{
position:absolute;
top:20px;
left:30px;
z-index:1;}
position:absolute;
top:20px;
left:30px;
z-index:1;}
定義第一個層次所要表現的圖片擺設
位置樣式 map2：
這第二個層次的開始位置是在瀏覽器視窗從上邊
這第二個層次的開始位置是在瀏覽器視窗從上邊
緣算來第５０個像素的位置，從左邊緣算來第１００個像素的位置，特別要注意
的是：這個層次的’z-index’屬性值為２。
.map2{
position:absolute;
top:50px;
left:100px;
z-index:2;}
.map2{
position:absolute;
top:50px;
left:100px;
z-index:2;}
結束CSS樣式宣告內容：別忘了加上註解符號。-->
</STYLE>
</HEAD>
開始主文(<BODY>標籤)並在網頁標籤
<img>中直接加入我們所宣告的
CSS屬性類別設定。
<BODY>
<img src="images/webusedmap1.
<BODY>
<img src="images/webusedmap1.
gif" class="map1">
<img src="images/webusedmap2.
<img src="images/webusedmap2.
gif" class="map2">
結束主文(</BODY>)與網頁
主體(</html>)標籤。
</BODY>
</html>
</BODY>
</html>
沒有留言:
張貼留言
if you like make fds, wellcome you here~~anytime***
my free place for everyones who want the good software,
come & download them~ wellcome!!