●使用css

集體宣告

【 集體宣告的玩法 】  

1. 基本上，集體宣告有兩種玩法，第一種就是針對一個標籤，然後一次設定好幾個

 樣式性質。第二種就是同時對好幾個標籤設定一樣的樣式性質。好像很複雜，別緊

 張，慢慢看下去就知道了。 以下這個例子就是所謂的：「針對一個

 標籤，然後一次設定好幾個樣式性質」



<stype="text/css">



body{font-size:9pt;

font-color:red;

background:white}



</style>  



2. 您會發現，我們同時對標籤宣告了：字形大小為 9pt、字形顏色為紅色、背景為

 白色，這三個樣式性質，為了將著三個分隔開來，我們利用分號"；"來將之隔開，

 這樣才不會無法運作喔！ 當然，若是您覺得這樣一列一列的寫出來很浪費空間，

 那麼您也可以寫成一列，如下：



<style type="text/css"> 



body{font-size:9pt;font-color:red;background:white}



</style>  

 



 【 數個標籤同時宣告 】  

1. 剛剛我們看得是一個標籤，同時設定幾個樣式規格，實際上，我們也可以好幾個

 標籤一起來做設定喔！例如： 





<style type="text/css"> 



h1,h2,td{font-size:12pt; font-color:red; font-family:標楷體}



</style>



以此例而言，我們同時設定了三組標籤<H1>、<H2>、<TD>，換言之，凡是被這三個

標籤包起來的，其文字大小都會變成 12pt、紅色字、並且以標楷體顯示喔！ 





【 分項宣告 】  

搞懂了基本宣告和集體宣告後，現在要來談談分項宣告，這個東西基本上是多此一

講啦！因為這並不是什麼特別的用法，您看看下例就知道了： 



<style type="text/css"> 



body{font-size:9pt; font-color:red}

body{font-family:標楷體; background:white}



</style>  



您會發現，我們同時對標籤做了兩次宣告，對！這就是我們今天要講的分項宣告，

也就是說，對同一個標籤，我們可以做兩次不同的宣告，在CSS中，這是可以的喔！

至於這樣做，是多此一舉？還是更加靈活？那就看您的使用習慣囉！ 基本上，每個

人的CSS撰寫習慣都不太一樣...。  











外部呼叫

【 外部呼叫的優點 】  

為什麼要把CSS宣告做成一個CSS檔呢？這樣有什麼好處哩？有！第一個好處，網頁

處理速度會快一點，尤其在很多網頁共用一份CSS表時更好用！因為您不用每一頁網

頁都擺同樣的CSS碼，網頁自然就會瘦一點、輕快一點。



第二個好處是，可以防止一些電腦程度較低的使用者直接看到CSS語法（就是有人不

喜歡被看見語法咩...），當然指的是無法直接看到，而非無法看到，稍微有點道行

的，要查看CSS檔的內容簡直易如反掌。



第三個好處當然就是維護方便啦！您只要修改一個CSS檔，不管您有幾千篇網頁，都

會以您最新修改的版本為準！  



 【 動手做CSS檔 】  

首先，我們將原來宣告中的<style type="text/css"></style>拿掉（CSS檔裡，不

需這兩個標籤...因為，瀏覽器看副檔名是css就知道這是一個css檔了），然後利用

任一文字編輯軟體輸入以下的語法（相信聰明的您應該會用剪下--複製的方法吧！）



body{font-size:9pt} 



接著將之存檔，檔名隨便，但副檔名請存成css，於是就將之存成my_css.css，並

放置於和網頁同一目錄下（也就是說您的網頁檔案放在C:\www，那麼也請您把CSS檔

同樣放在C:\www中即可）。 ） 



 【 從網頁呼叫CSS檔 】  

做好CSS檔後，咱們就來呼叫看看吧！方法如下： 





<head>

<title>CSS外部呼叫範例</title>

<link rel=stylesheet type="text/css" href="my_css.css">

</head>

 



這樣就可以囉！













單獨使用

【 為什麼單獨使用？ 】  

其實「單獨使用」是「加入STYLE屬性」不過太教條化了...看了頭大，所以將這功

能描述為「單獨使用」。 

「單獨使用」顧名思義，就是將CSS宣告套用在單獨的一個網頁元件上（任一個文字

、圖片、表格...等，都是網頁元件），此時，CSS將不在以一個表來狀態來呈現，

而是利用STYLE屬性來加到標籤中，又聽不懂了對不對？別急，看看實例吧！ 



為什麼需要「單獨使用」CSS？原因是：比較靈活...舉個最簡單的例子，我們希望

讓輸入表單的底色，不要是白色的，我們想將之改成淺綠色（如下），那該怎麼做

？ 




           

          




 【 關於STYLE屬性 】  

其實，幾乎每個 HTML 標籤都有其各自的屬性，例如 <p align="center"> 其中的

 align 便是標籤 <p> 的「align (對齊)屬性」，加上 align 屬性後，您就可以設

定段落要置左、置中或置右。 



相同的，STYLE也可以當作是一個屬性，一樣加在標籤之中，以我們上面的問題而言

，其原先的語法應該是這樣的：



語法：<input type="Text" value="我有淺綠色的底喔！">

結果：  

                        



現在，我們替這個輸入表單加入STYLE屬性，也就是在<input>標籤中加入STYLE屬性

：



語法：<input type="Text" value="我有淺綠色的底喔！" 

STYLE="background-color:#ccffcc"> 



結果：  

 



「STYLE="*****"」就是把STYLE當作屬性的用法，其後一樣將CSS宣告放在""裡面

，至於裡面的background-color:#ccffcc意思就是「背景顏色：（為）#ccffcc」的

意思，現在不熟沒關係，也後會慢慢講解到這部份。

 



 【 什麼標籤可以加入STYLE屬性呢？ 】 



什麼標籤可以加入STYLE屬性呢？基本上，任何標籤都可以加上STYLE屬性。所以，

您不用擔心會有標籤不接受。不過，單獨針對網頁元件加入STYLE屬性雖然非常靈活

，但是，卻喪失了CSS 的一個優點，那就是統一性。所以說，您在使用時，除非只

有部份元件需要單獨的CSS格式，否則，盡量使用之前介紹的套用方法，如此，日後

在維護上會比較簡單。 



範例:





style屬性真的很實用喔:D!















自訂類別(class)

【 自定類別 】  

您或許想吐血了！因為，又出現了一個新東西「類別」，其實，別緊張，這東西或

許您並不陌生呢！回想一下，在 HTML 標籤中，有個屬性叫做 class，當時從不解

釋這個屬性能幹嘛。其實，不是不解釋，而是解釋了也不會用，所以就暫時不說，

等到今天再說。這個 class 屬性，所以將之稱為「類別」屬性，他能幹嘛呢？他能

夠讓我們在不同的標籤中使用相同的 CSS 設定，舉個例子如下： 

我們在讀書的時候，常常會在課本上畫重點，怎麼畫呢？有的用紅筆畫，有的用螢

光筆畫...如果，今天我們在網頁上，也想將一些比較重要的地方，用「紅色、粗體

字」來呈現，您會怎麼做呢？我們把上一段拿來畫重點： 



原始碼 「<font color="Red"><b>類別</b&g;</font>」  





目前的您應該會這樣做吧！ 

 



 【 用CSS"畫重點" 】 

用剛剛那種方法是相當不錯啦！簡單又易懂！不過，試想一種情形...若是您的網頁

中有1000多個所謂的「重點」，今天您突然想把重點通通換成「藍色」的，那您該

怎麼辦？ 嘿嘿...傷腦筋了吧！這時，我們就請出CSS來幫我們解決難題吧！而且，

我們的「自定類別」也要派上用場了喔！



樣式語法 <style type="text/css">

.important { color:red ; font-weight:bold }

</style>  

新原始碼 「<font class="important">類別</font>」  



首先，我們在CSS表中動動手腳，自己做一個叫做important的類別，然後利用class

屬性，套用在網頁中，不難吧！ 



以後若是要將「紅色」改成「藍色」，那麼只要改類別裡的設定就行囉！不管網頁

中有幾萬個"重點"，都不用怕了！ 

 



 【 自定類別的用法 】  

ＯＫ！看過自定類別的大概用法後，再來做詳細的解說，如何自定類別...。 自定

類別很簡單，方法和一般的CSS宣告沒什麼兩樣！唯一的不同是，CSS宣告是針對某

標籤；而自定類別則不針對某標籤，而是要自己命名！ 



樣式語法 <style type="text/css">

.important { color:red ; font-weight:bold }

</style>  





以上為例，.important { color:red ; font-weight:bold }就是我們自定的類別，

其中的{}部份和一般的 CSS 宣告方法一模一樣！差別就在前面的.important，沒錯

！important 就是我們自定的名稱，有了名稱，才能呼叫。注意！前面記得在自定

名稱前加一個小點「.」，這樣我們就完成了自定一個類別！這個類別可以利用

class 來呼叫！套用到任何標籤中！ 

 





連結變色

【 連結變色怎麼做？ 】 



在開講之前，我們先直接跟您講答案！怎麼做出「連結變色」的用法？ 







 

樣式表

 <style type="text/css">


                      A:link {color: blue}


                      A:visited {color: gray}


                      A:active {color: green}


                      A:hover {color: red}


                      </style>


                    		









這就是連結變色的 CSS 語法！怎麼套用到網頁上呢？不不不...它不需要套用！

您只要將這個CSS語法乖乖的擺到網頁上即可，當網頁中有連結時，它就會自動套用

上去了！夠簡單吧！ 

 



 【 為什麼會這樣？ 】 

您可以仔細瞧瞧 CSS 樣式表中所列的東西，通通都是 A: 開頭的！這是什麼意思呢

？A在HTML裡面代表的就是連結...也就是說，您宣告的這四個語法都是和連結有關

係的！ 



有什麼關係呢？嗯！關係就寫在「:」之後（注意 A:link 這中間沒有任何空白！）

A:link 就是代表「正常的連結」，A:visited 就是代表「參觀過的連結」，

A:active 就是代表「執行中的連結」，A:hover 比較特別，它是代表「當滑鼠移到

連結上的時候」！我們再回頭看看剛剛的樣式表，我們來解釋一下： 





 

原始CSS

其意義如下


             


                  

 <style type="text/css">


                      A:link {color: blue}


                      A:visited {color: gray}


                      A:active {color: green}


                      A:hover {color: red}


                      </style>


                    		

 <CSS 樣式表開始>


                      一般連結：｛顏色：藍色｝


                      參觀過的連結：｛顏色：灰色｝


                      正在執行的連結：｛顏色：綠色｝


                      當滑鼠移到連結上：｛顏色：紅色｝


                      <CSS 樣式表結束>


                    		


        




就這樣...連結變色的效果，很快的就產生了！真的粉簡單吧！ 

 

【 標籤解說 】 

1. A: xxx：指定要連結變色發生的時間。link是普通的連結、visited是拜訪過的

連結、active是處理中的連結、hover是位於游標下方的連結。 

2. color:FF00FF：設定連結顏色。也可直接寫顏色的英文，如red、green等。 

3. text-decoration: none; ：設定連結是否有底線，沒有這一行就有底線。 

4. font-family: 新細明體：設定連結字體，先決條件是瀏灠者電腦也有安裝這種

字型才可以。 



--------------------------------------------------------------




●使背景固定的方法  





在<BODY>裡加入





bgProperties="fixed"





例: <BODY text="#999999" background="○○○.gif" bgProperties="fixed">















●滑鼠指標(cursor)





指定頁面全體的指標





<STYLE type="text/css"> <!--BODY{cursor : n-resize;}--> </STYLE>





指定連結全體的指標 (a就是連結的意思!)


<STYLE type="text/css"><!--a{cursor : n-resize;}--></STYLE>





指定某文字段落上的指標


<SPAN style=cursor:n-resize;>哇拉拉拉拉拉拉</SPAN>





指定某特定連結的指標


<A href="○○.htm" style="cursor : n-resize;">前往指定網頁</A>




n-resize:向上的箭頭     s-resize:向下的箭頭


e-resize:向右的箭頭     w-resize:向左的箭頭


nw-resize:左上的箭頭   sw-resize:左下的箭頭


crosshair:十字型       wait:忙碌


help:求救              move:移動


default:預設值















●自動換頁 




  
 

    【 加入網頁步驟 】

  













  
 

     

      
1. 將下面的控制碼先複製起來。（用滑鼠將底下的一堆黑色部份的程式碼，按滑鼠右鍵選擇【複製】就行啦！）


        


        2. 然後在網頁中的 <HEAD> 之後將剛剛複製的東西貼上就大功告成了！（按滑鼠右鍵選擇【貼上】就行啦！） 

        


        


        

      


        
 

          <meta http-equiv="refresh" content="20; 

            url=欲連結網頁.htm">

        


      


      


      3. 最後，更改原始碼中的秒數（20紫紅色的地方）及欲連結網頁名稱就可以了！（就是紫紅色的地方，改成您想要的內容即可！） 

       


  

















●換頁特效 




  
 

    【 加入網頁步驟 】

  













  


    
 

       

        
1. 將下面的控制碼先複製起來。（用滑鼠將底下的一堆黑色部份的程式碼，按滑鼠右鍵選擇【複製】就行啦！）


          


          2. 然後在網頁中的</HEAD> 之前將剛剛複製的東西貼上。（按滑鼠右鍵選擇【貼上】就行啦！）


          


          

        


          
 

            <meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">


              <meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=0)">


              <meta http-equiv="Site-Enter" content="revealTrans(Duration=3.0,Transition=1)">


              <meta http-equiv="Site-Exit" content="revealTrans(Duration=5.0,Transition=23)">		

          


        


        


        3. 最後，更改原始碼中的內容就可以了！（就是紫紅色的地方，改成您想要的內容即可！） 


    


  


  


  

  


    
 

      【 標籤解說 】

    


  


  


  

  


    
 

       

        
1. meta http-equiv="Page-Enter"：指定要換頁特效發生的時間。 

          Page-Enter 是進入本頁、Page-Exit 是離開本頁、Site-Enter 是進入本站、Site-Exit 是離開本站。 


          


          2. content="blendTrans(Duration=2.0)"：設定換頁特效為"混合"。Duration=2.0 

          是設定特效持續的時間（秒），過短過長都不好，太短容易當機、太長浪費瀏灠時間，建議在3-5秒之間。 


          


          3. content="revealTrans(Duration=5.0,Transition=0)"：指定換頁特效，Transition=0 

          中的0可用0-23代替，下表列出0-23分別代替的特效。 


          


          

        


          
 

            0

            方塊出現

            1

            方塊消失

            2

            圓形向內

          


          
 

            3

            圓形向外

            4

            向上擦拭

            5

            向下擦拭

          


          
 

            6

            向左擦拭

            7

            向右擦拭

            8

            垂直窗簾

          


          
 

            9

            水平窗簾

            10

            棋盤交錯

            11

            棋盤向下

          


          
 

            12

            隨機分裂

            13

            垂直分割進入

            14

            垂直分割出去

          


          
 

            15

            水平分割進入

            16

            水平分割出去

            17

            左下方剝落

          


          
 

            18

            左上方剝落

            19

            右下方剝落

            20

            右上方剝落

          


          
 

            21

            水平隨機列

            22

            垂直隨機列

            23

            隨機

          


        


        


        


        


        


        


          

  ●捲軸變色


        


          
 

            【 加入網頁步驟 

              】

          


        


        


        

        


          


            
 

               

                
1. 將下面的控制碼先複製起來。（用滑鼠將底下的一堆黑色部份的程式碼，按滑鼠右鍵選擇【複製】就行啦！）


                  


                  2. 然後在網頁中的 <HEAD> 之後將剛剛複製的東西貼上就大功告成了！（按滑鼠右鍵選擇【貼上】就行啦！） 

                  


                  


                  

                


                  
 

                     

                      
<STYLE>


                        body {scrollbar-face-color : #FBB955 

                        ; scrollbar-shadow-color : #FCD998 

                        ; scrollbar-darkshadow-color : #FCD998 

                        ; scrollbar-highlight-color : #FCD998 

                        ; scrollbar-3dlight-color : #FCD998 

                        ; scrollbar-track-color : #FDDFB3 

                        ; scrollbar-arrow-color : white}


                        </STYLE> 


                    		

                  


                


                


                3. 最後，更改顏色的原始碼（紫紅色的地方）!


            


          


          


      

          

          


            
 

              【 標籤解說 

                】

            


          


          


          

          


            
 

               

                
1. scrollbar-face-color：設定卷軸表面的顏色 


                  


                  2. scrollbar-shadow-color：設定卷軸陰影的顏色。 (右下部份) 

                  


                  


                  3. scrollbar-darkshadow-color：設定卷軸暗陰影的顏色。 

                  (右下部份) 


                  


                  4. scrollbar-highlight-color：設定卷軸加亮區的顏色。 

                  (左上部份)


                  


                  5. scrollbar-3dlight-color：設定卷軸立體亮區的顏色。 (左上部份)


                  


                  6. scrollbar-track-color：設定卷軸軌道的顏色。


                  


                  7. scrollbar-arrow-color：設定卷軸中指標的顏色。 




視 覺 化 濾 鏡 ( 只 適 用 於 I E 5 及 以 上 ) 

 使 用 方 法 

這個可以使用在 FONT，IMG，TABLE 等等原碼內。

請參考以下例子：

1. <FONT STYLE="FILTER: XXXX()">

2. <IMG SRC="XXXXX" STYLE="FILTER: XXXXX(Color=blue)">

3. <FONT STYLE="FILTER: XXXXX(Color=blue,Strength=5,XXXXX)"> 



 基 本 原 碼 

灰階影像 {FILTER: Gray} 



影像輪廓 {FILTER: Xray}



光源投射 {FILTER: Light} 



左右相反 {FILTER: FlipH} 



上下相反 {FILTER: FlipV}



負片效果 {FILTER: Invert} 



透明遮罩 {FILTER: Mask}

參數： Color　顏色 



去除色彩 {FILTER: Chroma} 

參數： Color　顏色 



光暈邊緣 {FILTER: Glow}

參數： Color　顏色　Strength　範圍 



立體陰影 {FILTER: Shadow} 

參數： Color　顏色　Direction(0,90,180,270)　陰影角度(順時鐘) 



影像模糊 {FILTER: Blur}

參數： Direction(0,90,180,270)　模糊角度(順時鐘)　Strength　幅度 



影像波浪 {FILTER: Wave} 

參數： Freq　波浪數　Lightstrength　亮度　Phase　相角　Strength　幅度 



下方陰影 {FILTER: DropShadow} 

參數： Color　顏色　Positive　透明度　OffX　水平位移　OffY　垂直位移 



影像透明 {FILTER: Alpha} 

參數： Opacity　開始顯度　Finishopacity　結尾顯度　Style(0/1/2/3)

均勻/直線/圓形/對角  















參考網址   http://members10.cool.ne.jp/~zumirin/kowaza/

           http://i-webhk.com/home.asp