(教學第30篇) CSS 與 JavaScript 上篇
CSS？這是什麼東東啊？！相信你看到這三個字母時必定與偶一樣：丈二金剛摸不著頭腦，其實CSS的全名是〔Casciding Style Sheet〕，以字面上來解釋就是〔連(串)接樣式表〕，這種說法不要說是剛接觸的你，連偶都搞不懂！簡單的說，就是網頁的格式設定啦！[color=Magenta][size=4][b] 使用CSS有什麼好處呢？[/b][/size][/color]
[list]
[*]通吃瀏覽器：CSS樣式表，不管瀏覽者是使用何種瀏覽器來觀賞網頁皆能表現出網頁獨特的風格，不單是市場上使用率最高的 Microsoft Internet Explorer (IE) 與 Netscape Communicator 瀏覽器支援，甚至許多非主流的瀏覽器，如 Emacs-W3、Arena......等，都有支援解析的能力。
[*]網路環保：在大家全力推廣全民上網的同時，出現了一個嚴重的危機〔網路頻寬不足〕，一方面是因為上網人口的急速增加造成頻寬不足，但最大的原因是網頁設計者在網頁設計過程中使用了大量的圖片，圖片檔的體積大，在傳輸的過程中消耗了大量的網路資源，而CSS的出現將使這個問題獲得部分疏解，CSS可使用單純的文字來達到與圖片相同的表現效果！也就是說：一段簡短的文字就可以取代體積龐大的圖片！不但傳輸速度加快，同時也獲得與圖片相同的視覺效果。
[*]特立獨行的風格：一個人氣旺盛的網站之所以吸引人就是因為擁有獨一無二的風格！舉例來說：在 CSS樣式表出現之前，幾乎所有網頁中的超鏈結文字都會加上底線 (Under Line) ，而且並無特色變化，如果加上CSS語法那可就大大不同啦！下方的兩個超鏈結文字樣式，你喜歡哪一個？
[attach]732[/attach]
[*]網頁維護容易：為了維持我們特立獨行的網站風格，同時也為了維持網頁的一致性，我們可以建立一個獨立的CSS樣式表檔案，讓我們建立的每一個網頁樣式都能參照此一樣式檔案，當此一樣式檔案內容改變後，所有有參照此一樣式檔案的網頁外觀也就會全部跟著改觀了，因此我們不必一一的修改各個網頁來達到網站風格的一致性，如果你維護的網頁只有幾頁，或許並不會感受到它的便利性，如果是上百頁甚至數百頁，你就會體會到它所帶來的便利性啦！
[/list] [color=DarkOrange][size=5][b]宣告CSS [/b][/size][/color]
要宣告CSS樣式表首先你必須具備有HTML網頁語法的基礎！也就是你必須了解網頁原始碼中標籤的意義，在此我們假設你已經熟悉了這些HTML網頁標籤！
[color=Green][size=4][b]樣式宣告的標準語法如下：[/b][/size][/color][code]Element {Property : value}[/code][list]
[*]Element :HTML網頁標籤名稱，如：<P>、</P>.......等。
[*]Property:HTML網頁標籤屬性名稱，如：color、font-size.......等。
[*]value:HTML網頁標籤屬性值。
[/list]
[color=Red]注意：HTML網頁標籤屬性名稱與HTML網頁標籤屬性值之間必須以冒號「：」隔開；而HTML網頁標籤屬性名稱與HTML網頁標籤屬性值則必需以一組大括號{ }包括起來！[/color]
[color=Green][size=4][b]獨立宣告[/b][/size][/color]
獨立宣告？什麼叫獨立宣告啊？！獨立宣告也就所謂的分組宣告，網頁標籤的可設定屬性相當多，因此以分組的宣告方式來管理是一個不錯的選擇，例如：BODY標籤它可以設定的屬性就相當地多，有背景顏色、文字大小、文字字型樣式.....等等，現在就以BODY標籤的樣式宣告為示範對象進行解說！
範例解說A，如果我們在樣式表中宣告下列的BODY標籤敘述：[code]BODY {ｂａｃｋｇｒｏｕｎｄ : #FF0000；ｆｏｎｔ－ｓｉｚｅ : 10pt}[/code]這樣的樣式宣告將會把包括在＜BODY＞與＜/BODY＞之間的文字外觀顏色都變成紅色同時將文字的大小指定為10pt。
範例解說B，如果我們在樣式表中宣告下列的BODY標籤敘述：[code]BODY {ｂａｃｋｇｒｏｕｎｄ : ＃００ＦＦ００}
BODY {ｆｏｎｔ－ｓｉｚｅ : １０ｐｔ}[/code]這樣的樣式宣告又會造成什麼結果呢？結果是與範例解說A一模一樣的：被包括在＜BODY＞與＜/BODY＞之間的文字外觀顏色都變成紅色而且文字的大小指定為10pt。既然所得到的結果都一樣，那分組的意義在哪裡呢？分組的意義在於分類管理標籤不同的樣式性質，以本例來說，我們分類管理了BODY標籤的顏色相關屬性與文字相關屬性！
[color=Green][size=4][b]複合宣告[/b][/size][/color]
複合宣告，複合宣告可分為兩種情況！一種是將網頁標籤的不同樣式性質宣告在一起〔不同的屬性設定以分號格開〕，這種情況之前我們已經使用過了呦！另一種就是將不同的網頁標籤但是樣式性質相同的屬性合併在一起宣告〔不同的網頁標籤以逗號格開〕！
單獨標籤的複合宣告：
[color=Sienna][i]一行通吃 [/i][/color][code]BODY{background:#FF0000;color:#00FF00; font-size:10pt ; font-family:細明體 }[/code]這樣的樣式宣告結果將是：被包括在＜BODY＞與＜/BODY＞標籤之間的文字外觀顏色都變成綠色、文字的大小指定為10pt、文字字型為「細明體」，同時，背景顏色也被指定為紅色。在本例中我們一次就宣告了BODY標籤的四種樣式屬性，但請注意：每個指定的樣式屬性之間必須以分號隔開！
[color=Sienna][i]多行排列 [/i][/color][code]BODY { background:#FF0000 ;
color:#00FF00 ;
font-size:10pt ;
font-family:細明體 }[/code]其實多行排列與一行通吃所得到的結果是相同的！但是為了顧及HTML網頁原始檔的維護與排版，當宣告過長時我們就可在分號之後加以折行撰寫，不管中間有多少空白字元或是幾個換行列，只要我們宣告的格式正確就都不會有錯誤發生的呦！
[color=Green][size=4][b]單獨標籤的複合宣告：[/b][/size][/color]
[color=Sienna][i]一行通吃 [/i][/color][code]BODY，Ｐ { color:#00FF00 ; font-size:10pt ; font-family:細明體 }[/code]這樣的樣式宣告結果將是：被包括在＜BODY＞與＜/BODY＞標籤之間的文字外觀顏色都變成綠色、文字的大小指定為10pt、文字字型為細明體；同時，在被包括在＜P＞與＜/P＞標籤之間的文字外觀顏色也都變成綠色、文字的大小指定為10pt、文字字型為細明體，本例中我們一次就宣告了BODY標籤與P標籤的三種共通樣式屬性。
[color=Red]請注意：進行複合宣告的標籤之間必須以逗號隔開！[/color]
[color=Sienna][i]多行排列 [/i][/color][code]BODY，Ｐ { color:#00FF00 ;
font-size:10pt ;
font-family:細明體 }[/code]同樣的，多組標籤的複合宣告也可以使用多行排列，與一行通吃所得到的結果是相同的！ [color=DarkOrange][size=5][b]使用CSS[/b][/size][/color]
為了讓大家了解CSS的使用方式我們將以循序漸漸的方式引導大家進入CSS的美麗新世界！
[list]
[*]樣式表宣告的位置：樣式表宣告必須被包括在網頁的<HEAD>與</HEAD>之間。
[*]樣式表宣告的範圍：樣式表宣告的內容必須被包括在<STYLE>與</STYLE>標籤之間。
[*]危險的陷阱：為了避免瀏覽器不支援CSS的語法性質，我們必須於CSS宣告內容的兩端加上 <!- - 與 - -> 的註解符號！若不加上者一組註解符號會產生什麼後果呢？若瀏覽者所使用的瀏覽器並不支援CSS的性質屬性，我們所書寫的這些CSS宣告將會被當成一般的網頁文字而顯示在網頁上！
[/list]
[color=Green][size=4][b]標準用法[/b][/size][/color]
典型的<STYLE>樣式表宣告：[code]<HTML>
<HEAD>
<STYLE>
<!--
BODY {background:RED;color:BLACK}
BODY {font-size:12pt}
-->
</STYLE>
<TITLE>典型的樣式表宣告</TITLE>
</HEAD>
</BODY>這是標準的STYLE宣告<BODY>
</HTML>[/code]這樣的樣式宣告會造成什麼結果呢？結果就是將被包括在<BODY>與<BODY>標籤之間的文字外觀顏色都變成黑色、文字大小為12pt，同時網頁的背景色設定為紅色。
[attach]733[/attach]
網頁標籤內的<STYLE>樣式宣告：
我們除了可以將CSS屬性以集合的方式合併宣告外，也可以在網頁標籤中直接加入CSS的樣式性質！[code]<HTML>
<HEAD>
<TITLE>網頁標籤內的樣式宣告</TITLE>
</HEAD>
<BODY>
<P STYLE=" font-size:14pt;color:BLUE">
這是在網頁標籤內STYLE宣告
</P>
</BODY>
</HTML>[/code]這樣的樣式宣告又將會造成什麼結果呢？結果就是將被包括在<P>與</P>標籤之間的文字外觀顏色都變成藍色、文字大小為14pt，為什麼會這樣呢？因為我們在<P>網頁標籤中又加上了CSS的STYLE性質設定：font-size:14pt 將文字大小格式設定為14pt；color:BLUE 同時將文字外觀顏色設定為藍色。
[attach]734[/attach]
[color=Red]提示！！[/color]
直接以STYLE屬性在HTML標籤內指定樣式，就是所謂的『線內樣式』設定。 [color=Green][size=4][b]進階用法[/b][/size][/color]
[color=Sienna][i]進階的<LINK>樣式表檔案參照：[/i][/color]
如果我們有很多的檔案要採用統一的設計風格，如果在每張網頁中都加入相同的樣式宣告未免太麻煩、太沒效率啦！因此，我們可以先自行建立一個樣式參照檔案，這個參照檔案只是一個純文字的檔案格式，任意一種文書編輯器就可以用來編輯參照檔案的內容！
樣式表檔案的內容並不需要加上<STYLE>與</STYLE>標籤，同時，更不需要加上<!- -與- -> 註解標籤，現在就請你開啟你慣用的文書編輯器來編輯一個樣式參照檔案，同時將檔案名稱定為 test1.css (這只是範例，參照檔案的名稱你可以自訂)並且加入以下內容：
test1.css[code]BODY {font-size: 12pt ; font-family: 標楷體}
BODY {background: #008800 ; color: #FFFFFF}
P {color:RED}
P {font-size:14pt}[/code]這樣的樣式內容是什麼意思呢？就是將被包括在<BODY>與<BODY>標籤之間的文字字型設定為標楷體、文字大小為12pt，網頁的背景設設定為綠色，文字外觀顏色都變成白色；包括在<P>與</P>標籤之間的文字大小為14pt、文字外觀顏色都變成紅色。
在建立好參照檔案後，接著我們就要利用LINK標籤來指定樣式表的關聯啦！現在我們就來建立一個HTML網頁檔：[code]<HTML>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="test.css">
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</HTML>[/code][list]
[*]REL=STYLESHEET：表示我們要參照一個外部的樣式檔案。
[*]TYPE="text/css"：說明我們參照的檔案類型。
[*]HREF="test.css"：指定我們要參照的樣式檔案位置及檔名。
[/list]
[color=Sienna][i]進階的@import樣式表檔案參照：[/i][/color]
我們除了可以用LINK標籤來指定樣式表的關聯外，也可以採用@import 指定法！但是這種指定法比較麻煩一點，不但要把它加在<STYLE>與</STYLE>標籤內，同時還得加上<!-- 與 --> 註解標籤。
我們沿用上一個範例的test1.css樣式檔案來說明，現在就讓我們來建立一個以@import指定法的HTML網頁檔：[code]<HTML>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE>
<STYLE>
<!--
@import url("test1.css");
-->
</STYLE>
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</HTML>[/code][list]
[*]URL(./test.css);指定我們要參照的樣式檔案位置及檔名。
[*]使用@import 指定法來參照外部樣式檔案；請注意：在@import敘述的最後面一定要加上一個「；」分號！
[/list]
[attach]735[/attach] [color=DarkOrange][size=5][b]樣式宣告衝突時的優先順序[/b][/size][/color]
當我們混合多種的樣式宣告法後，若有些標籤樣式的性質重複宣告了怎麼辦？他們的優先順序如何？
[color=Green][size=4][b]作用優先順序：[/b][/size][/color]直接加註在標籤內的樣式性質 > STYLE樣式區段內的性質 > 鏈結進來的樣式檔案性質。
[list=1]
[*]直接加註在標籤內的樣式性質：例如，<P style="color:YELLOW">。
[*]STYLE樣式區段內的性質：被包括在<STYLE>與</STYLE>標籤之間的樣式性質設定。
[*]鏈結進來的樣式檔案性質：利用 LINK 方法或 @import 方法鏈結進來的樣式檔案宣告內容。
[/list]
[color=Green][size=4][b]設定優先順序：[/b][/size][/color]網頁設計者的設定 > 瀏覽者的使用者自訂 > 瀏覽器的預先設定。
[list=1]
[*]網頁設計者的設定：就是我們所討論的樣式性質設定啦！
[*]瀏覽者的使用者自訂：瀏覽者透過所使用的瀏覽器進行自己瀏覽格式的設定。
[*]瀏覽器的預先設定：瀏覽者所使用的瀏覽器所預設的瀏覽格式。
[/list]
[color=Red]提示！！[/color]
一般來說，我們都只是運用CSS來設定網頁文字的大小、樣式、字型與顏色，但是現在最流行的是所謂的：動態網頁(Dynamic HTML)，動態網頁解決了所有對網頁文件的存取限制，也就說我們可以在HTML網頁中加入動態的效果，動態的HTML可以使HTML元件(圖片、文字字串等等)游移於網頁之中，或是產生與瀏覽者有互動性的增強功能，當然，單靠CSS是做不到這種互動性功能的，但是卻可以結合程式語言來達到動態的效果，而最常用來結合CSS創造出動態HTML互動性效果的程式語言應該就是JavaScript了。
頁:
[1]