【CSS樣式】單元介紹
◆食神講古◆
- HTML 目前已經發展至4.0 版，有人稱這一個版本為 DHTML（動態網頁語言），然而這個語言的最大特色是融合了 HTML3.2 、CSS、Script 語言等三大技術，才能做出精彩的動態網頁。因此，為進階到 DHTML，所以我們先來學學 CSS 的用法！
- CSS 實際上從1994年十月就已經開始發展了，其目的就是要補救 HTML3.2 語法中規格的不足，一直到1996年年底，正式發表了 CSS1 的規格，而瀏覽器也總算開始支援 CSS1 規格。到目前為止，各家瀏覽器都能支援CSS規格了，但其中仍以IE系列支援的最完整。
- CSS 可以說是相當簡單易學的，基本上，他並不是程式，所以沒有變數、函數、迴圈等一堆複雜的東西。因此，您只要了解基本的用法，您根本無須去死背一堆的樣式性質，只要有用到的時候，再去查一下就行了，查書、查網站都可以，可以說比HTML還簡單。
【CSS是什麼碗糕？】
|
要講CSS之前，先要概略知道HTML 4.0這個東西。HTML 4.0大家或多或少有有聽說過吧！有人亦稱之為Dynamic HTML（動態語言）。食神在這裡簡單的介紹一下這東西，Dynamic HTML實際上包含了三大要素，那就是「傳統的HTML」、「Script語言」以及「CSS」，換言之，您要完全操作Dynamic HTML語言，那麼以上三項要素您都要相當熟捻才行。 「傳統的HTML」，也就是所謂的HTML3.2，在上一個系列的教學文章已經涵蓋其大部分，若是您還不太熟，建議您Ｋ完後再來看這一系列文章比較好一點。至於，「Script語言」則是指JavaScript或是VBScript語言，這部份若是想學好，那又要花一番工夫了！等到這一系列寫到一個段落後，我們再來謝謝這方面的文章吧！而剩下的「CSS」就是這一系列文章要說明的玩意兒啦！ CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。很奇怪的一串名詞對不對，其實，當您CSS用習慣後，您會發現它會這樣被稱呼還蠻貼切的。 |
【CSS能做什麼？】
|
CSS能做什麼？可做的事可多著，不過，以最簡單的方式來比喻其功能的話，我們可以說它是網頁的美容師，凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的空間，文字方面，您可以利用CSS來隨意設定字體大小（不再像HTML最大只能到size=7而已），設定行距、間距、去除連結底線…等。 您也可以利用CSS將圖片或文字精準的定位在網頁上的某一個地方，更可以更改表單、表格的框線、顏色…等，您甚至可以更改滑鼠形狀或是做出類似簡報的轉場效果。這些只是食神隨便舉幾個效果而已，實際上，若是要認真講解，是可以寫成一本書的。所以，今天這一系列食神盡量以一些實用的技巧，來介紹CSS，若是看完這篇教學後，還覺得意猶未盡的讀者，可以自行去買相關的書籍來閱讀喔！ |
【用什麼軟體編寫CSS】
|
因為CSS說實在的，通常他的語法都是和HTML寫在一起的，也就是說，只要是能夠編寫HTML語法的軟體，絕對都能夠編寫CSS。 當然，若是您用的是所見即所得的網頁編輯軟體，那麼，除非他有提供CSS的語法設定（或加入）功能，或是能夠允許您自行修改原始碼，您才有辦法編輯CSS，不然，可是沒有辦法的喔！ |
【用什麼東西來看CSS的結果】
|
用什麼東西看？就還是用瀏覽器啊！因為CSS的主要功能只是讓網頁的格式、外觀得以完全操控，因此說來說去，他的效果也都是呈現在網頁上，因此，我們從瀏覽器就能看得到CSS的效果。 不過，CSS可以說是一個比較新的規格（和HTML3.2比起來的話），因此，較舊的瀏覽器，是不支援CSS語法的，也就是說，您今天拿一個IE2.0來看有CSS語法的網頁，那麼CSS是完全無法發揮效用的。 簡單的來說，最早開始支援CSS的瀏覽器就是IE3.0，而Netscape則一直到4.0才支援CSS語法，不過，要說支援的最完整的莫過於IE5.0了，這一點相信是沒有人能否認的！因此，建議您，若是有心想學DHTML的網友們，若您是Netscape死忠派，此時請放下成見，試著用用IE5.0吧！ |
【CSS的運作環境】
|
只要能跑HTML的環境，就能跑CSS！換言之，什麼環境您無須擔心啦！您在DOS一樣可以編寫CSS，您用windows3.1、windows95、windows98、windows2000或是麥金塔，亦或是linux都無所謂啦！ 簡言之，CSS不過是在既有的網頁中，加上一些語法，藉以達到控制網頁外觀格式的目的而已，相信這是很簡單的！ |
|
利用CSS，要做這些事簡直是易如反掌。當下的一些大網站，很喜歡用一種小小的字體（就像您看到本文的字體），讓版面看起來很精緻，而且可以塞得下更多的資訊，這是怎麼做到的呢？ |
【CSS語法】
|
CSS語法我們"通常"加在<HEAD></HEAD>之間！ 為什麼說通常呢？因為隨著加上去的方法的不同，放置的位置也不盡相同。至於加上去的方法可不只一種喔！大致上說來，要在網頁上使用CSS共有四種方法，後面我們再一一來介紹。 以這個例子而言，我們究竟加上什麼，才能改變整個網頁的字體大小呢？看看下面的語法：
| 看看原始範例 | 看看加入CSS語法後的效果 | |
【範例解說】
|
這就是我們加在<HEAD></HEAD>之間的CSS語法啦！<style type="text/css"></style>標籤是告訴瀏覽器說：「這裡頭是CSS語法喔！若是瀏覽器有支援的話，那麼就照裡頭的語法來設定網頁的樣式吧！」而其中的 body{font-size:9pt} 則是CSS的宣告，它的意思是說：「只要是被<body>標籤包起來的文字，其文字大小（font-size）都設成9pt 的大小。」這樣可以了解嗎？ |
|
「宣告」這個東西，對於程式不熟的網友聽起來可能覺得很陌生，甚至有點害怕，實際上，「宣告」您可以想像是「設定」的意思，那就比較不會覺得迷迷糊糊了。 |
【為什麼要宣告？】
|
在了解為什麼要宣告之前，食神換個方式問：「不宣告會怎麼樣？」，那麼答案就簡單多了：「不宣告，CSS就不知道該怎麼做或是要做什麼？所以，整個CSS就無法運作啦！」。 那什麼是宣告呢？這更簡單，舉個例子來說，今天你要去見一個未曾謀面的網友，為了怕遇見恐龍，所以特地帶了個朋友去幫您鑑定一下，於是您告訴你朋友說：「若是等一下你看到的是辣妹，你就露出笑臉來表示！若看到的是正常女孩，那麼你就擺個正常表情，我就知道了，若是您看到的恐龍，那麼，別猶豫，大叫一聲，拔腿就跑！」以上這個就是宣告！ 以上的例子中，您就是宣告的主人，而您的朋友相當於瀏覽器（去瀏覽女人嘛！）當瀏覽器在瀏覽的過程中，若是發現辣妹元件，馬上進行｛表情：笑臉｝的反應，若是遇到正常女孩元件，那麼瀏覽器就做出｛表情：正常表情｝的反應，若是遇到恐龍元件，那麼瀏覽器的反應就是｛聲音：大叫｝，以上就是「宣告」。這樣可以了解嗎？（雖然例子有點不倫不類...） 好啦！看過不倫不類的例子後，我們回頭來看看真正的CSS宣告，實際上，上一單元就有用到宣告了！如下：
沒錯，上面這個就叫做「宣告」，告訴瀏覽器若是遇到什麼標籤，就應該要有什麼樣的情形出現。 |
【最基本的宣告】
|
現在我們就來學學如何做宣告的動作吧！，宣告最基本的方式如下：
什麼叫做「元件」？就是網頁上任何您看得到的東西，都可以當作是個「元件」，例如：一段文字、一張圖片、一個表格...等等，都可視之為元件。說直接明白一點：在網頁中，任何一個標籤都是元件！ 那什麼是「樣式性質」呢？這就比較難說明啦，粗略的來說，「樣式」有「外觀形態」的意思在裡面，食神直接舉例來說這東西，以「文字」而言，其樣式性質有哪些呢？文字大小、文字顏色、粗細、字型、字距、行距...等等，都是「文字」的「樣式性質」。 至於「設定值」就沒什麼好說的啦！就看您的樣式性質是什麼，下去做設定囉！ |
【宣告實例說明】
|
食神就以之前說過的 body{font-size:9pt} 來作說明： body就是一個元件，指的就是被<BODY></BODY>標籤包起來的地方，然後在兩個大括號{}中間的就是主要的樣式設定，font-size 就是文字大小的樣式性質，9 就是設定值，pt 是單位。 整個宣告來說就是：被<BODY></BODY>標籤包起來的地方，其文字大小通通以 9pt 來呈現。 |
【動動腦囉！】
|
看看下面的例子，您能說出這是什麼意思嗎？
|
|
有時候，我們希望一口氣能宣告一堆的東西，例如我們希望一次就能夠設定文字顏色、大小、字型...等等，那麼，此時您會用到「集體宣告」！這一篇就是要來告訴大家，集體宣告怎麼玩。 |
【集體宣告的玩法】
|
基本上，集體宣告有兩種玩法，第一種就是針對一個標籤，然後一次設定好幾個樣式性質。第二種就是同時對好幾個標籤設定一樣的樣式性質。很頭大對不對？一堆生硬的名詞繞來繞去...別緊張，慢慢看下去就知道了。 以下這個例子就是所謂的：「針對一個標籤，然後一次設定好幾個樣式性質」
您會發現，我們同時對<BODY>標籤宣告了：字形大小為 9pt、字形顏色為紅色、背景為白色，這三個樣式性質，為了將著三個分隔開來，我們利用分號"；"來將之隔開，這樣才不會無法運作喔！ 當然，若是您覺得這樣一列一列的寫出來很浪費空間，那麼您也可以寫成一列，如下：
|
【數個標籤同時宣告】
|
剛剛我們看得是一個標籤，同時設定幾個樣式規格，實際上，我們也可以好幾個標籤一起來做設定喔！例如：
以此例而言，我們同時設定了三組標籤<H1>、<H2>、<TD>，換言之，凡是被這三個標籤包起來的，其文字大小都會變成 12pt、紅色字、並且以標楷體顯示喔！ |
【其他廢言...】
|
在宣告中，只要您的格式正確，也就是說，樣式性質的設定有用"{}"括起來，然後每隔之間以"；"隔開，那麼，CSS就可以正確無誤的運作，不論您中間有多少空白、換行都無所謂！高興的話您也可以寫成這樣：
不過，這樣誰看得懂呢？所以說，養成自己的良好習慣，看起來舒服，往後要修改也比較容易...。 |
【蝦米是分項宣告】
|
搞懂了基本宣告和集體宣告後，現在要來談談分項宣告，這個東西基本上是多此一講啦！因為這並不是什麼特別的用法，您看看下例就知道了：
您會發現，我們同時對<BODY>標籤做了兩次宣告，對！這就是我們今天要講的分項宣告，也就是說，對同一個標籤，我們可以做兩次不同的宣告，在CSS中，這是可以的喔！至於這樣做，是多此一舉？還是更加靈活？那就看您的使用習慣囉！ 基本上，每個人的CSS撰寫習慣都不太一樣...。 |
【小心這種情形】
|
在分項宣告中，有種情形要特別注意，如下：
您發現，同一個標籤來作分項宣告，結果裡面的樣式性質有一組竟是一樣的（font-color性質一樣，但是設定值不一樣），那麼結果會是怎樣呢？被<BODY>標籤包起來的文字會是紅色（red）還是藍色（blue）呢？ |
【將 CSS 加到網頁中】
|
老實說，在精美字體的那一個單元，大家已經見識過了，要如何將CSS的宣告加到網頁中，在此，食神仍然不厭其煩的，再來解說一遍，不懂的趕快看，懂的就當作複習吧！
這是一個最常見，也是最標準，最普通的將CSS加到網頁中的方法。沒錯！就是利用<style></style>標籤，讓瀏覽器知道，接下來的一段語法，就是CSS的語法。 通常，我們將這一整段的語法擺在<head></head>中。 |
【萬一瀏覽器不支援怎麼辦？】
|
您無法肯定的說不可能有這種情形！總是會有一些人仍在使用古董級瀏覽器，萬一該瀏覽器看不懂該標籤，那該如何是好，老實說，我們也不能做什麼補救措施！不過，我們可以將傷害降到最低點，也就是說，萬一瀏覽器真的不認識CSS那麼就讓他直接跳過CSS語法的部份吧！以免產生其他的錯誤情形。 因此，我們可以在CSS語法中加上隱藏標籤。
如此的話，萬一瀏覽器不認識<style>標籤，那麼他就會直接跳過裡頭的語法，而不會將這些語法印在畫面上。 |
|
上一單元，我們說明了如何將CSS宣告加到網頁中，而這一單元，我們要教另一種方法來玩玩，那就是把CSS做成一個獨立的CSS檔，然後套用到網頁中來。 |
【外部呼叫的優點】
|
為什麼要把CSS宣告做成一個CSS檔呢？這樣有什麼好處哩？有！第一個好處，網頁處理速度會快一點，尤其在很多網頁共用一份CSS表時更好用！因為您不用每一頁網頁都擺同樣的CSS碼，網頁自然就會瘦一點、輕快一點。 第二個好處是，可以防止一些電腦程度較低的使用者直接看到CSS語法（就是有人不喜歡被看見語法咩...），當然，食神指的是無法直接看到，而非無法看到，稍微有點道行的，要查看CSS檔的內容簡直易如反掌。 第三個好處當然就是維護方便啦！您只要修改一個CSS檔，不管您有幾千篇網頁，都會以您最新修改的版本為準！ |
【動手做CSS檔】
|
說了半天，應該還是有人滿臉問號，沒關係，咱們動手做一做就可以很容易了解了！我們仍然拿『精美字體』的CSS表來作範例。 首先，我們將原來宣告中的<style type="text/css"></style>拿掉（CSS檔裡，不需這兩個標籤...因為，瀏覽器看副檔名是css就知道這是一個css檔了），然後利用任一文字編輯軟體輸入以下的語法（相信聰明的您應該會用剪下--複製的方法吧！）
接著將之存檔，檔名隨便，但副檔名請存成css，於是食神將之存成my_css.css，並放置於和網頁同一目錄下（也就是說您的網頁檔案放在C:\www，那麼也請您把CSS檔同樣放在C:\www中即可）。 |
【從網頁呼叫CSS檔】
|
做好CSS檔後，咱們就來呼叫看看吧！呼叫的方法有兩種，第一種是用<link>標籤來作連結呼叫，方法如下：
這樣就可以囉！看看範例！ |
【另一種方法呼叫CSS檔】
|
另外一種方法，應該說是『匯入』CSS表比較貼切，方法如下：
這樣就可以囉！看看範例！ |
|
本單元是另一種將CSS用在網頁中的方法，之前提的都是針對"整篇網頁"所設計的CSS表，若是今天我只要針對一個小地方做CSS設定時該怎麼辦呢？難道也要大費周章的做CSS表？不需要啦...本單元教您更靈活的用法。 |
【為謂單獨使用？】
|
其實「單獨使用」是食神自己發明的詞啦！原來的說法應該是「加入STYLE屬性」不過太教條化了...看了頭大，所以食神將這功能描述為「單獨使用」。 「單獨使用」顧名思義，就是將CSS宣告套用在單獨的一個網頁元件上（任一個文字、圖片、表格...等，都是網頁元件），此時，CSS將不在以一個表來狀態來呈現，而是利用STYLE屬性來加到標籤中，又聽不懂了對不對？別急，看看實例吧！ 為什麼需要「單獨使用」CSS？原因是：比較靈活...舉個最簡單的例子，我們希望讓輸入表單的底色，不要是白色的，我們想將之改成淺綠色（如下），那該怎麼做？
|
【關於STYLE屬性】
|
其實，幾乎每個 HTML 標籤都有其各自的屬性，例如 <p align="center"> 其中的 align 便是標籤 <p> 的「align (對齊)屬性」，加上 align 屬性後，您就可以設定段落要置左、置中或置右。 相同的，STYLE也可以當作是一個屬性，一樣加在標籤之中，以我們上面的問題而言，其原先的語法應該是這樣的：
現在，我們替這個輸入表單加入STYLE屬性，也就是在<input>標籤中加入STYLE屬性：
「STYLE="*****"」就是把STYLE當作屬性的用法，其後一樣將CSS宣告放在""裡面，至於裡面的background-color:#ccffcc意思就是「背景顏色：（為）#ccffcc」的意思，現在不熟沒關係，也後會慢慢講解到這部份。 |
【什麼標籤可以加入STYLE屬性呢？】
|
什麼標籤可以加入STYLE屬性呢？基本上，任何標籤都可以加上STYLE屬性。所以，您不用擔心會有標籤不接受。不過，單獨針對網頁元件加入STYLE屬性雖然非常靈活，但是，卻喪失了CSS 的一個優點，那就是統一性。所以說，您在使用時，除非只有部份元件需要單獨的CSS格式，否則，盡量使用之前介紹的套用方法，如此，日後在維護上會比較簡單。 |
|
現在食神來整理一下，在前面「標準用法」、「外部呼叫」、「單獨使用」三個單元中，我們談的是「如何將CSS加入網頁中」或是「如何在網頁中使用CSS」的方法。您會不會開始有疑惑：我該用何方法？兩個不同的方法，會不會有衝突？ |
【使用時機】
|
是否為了不知道該用何種方法，而傷透腦筋呢？其實別想那麼多啦！您只要會用其中任一種方法，實際上，就很好用了。「什麼？您還是不知道該用哪一種方法？」那麼，食神給您幾個建議，先看看您的網頁規模： 1. 若是您的網站規模在10頁以上，而且有統一的格式，那麼強烈建議採用「外部呼叫」的方法，因為，維護上會很方便，只要改改CSS檔，所有套用CSS檔的網頁，其格式都會一併改過來，如此，維護方便，又可減少網頁體積，何樂而不為。 2. 若是您的網頁是屬於那種每頁有不同風格的，那麼，用「標準用法」比較恰當，也就是將CSS表放置在各個網頁中，如此，可以方便的針對各個網頁做不同的調整。 3. 若是您的網頁中，只有少部份會用到CSS，那麼，您可以採用「單獨使用」也就是以加入STYLE屬性到標籤中的方式，如此，省空間，又有彈性。 4. 若是您的網頁不屬於以上任一情形，那麼，以「標準用法」最為恰當，因為，既保留了彈性，亦保留了統一性，是不錯的選擇。 您或許會想知道，本站用的是那種方式？食神用的是「外部呼叫」，畢竟幾百頁的網頁，若只是為了改變一個小地方，動輒修改數百頁的CSS表，那將是一件恐怖的事情。 |
【會不會互相衝突】
|
有人會擔心：「我若是同時使用標準用法和外部呼叫，那會不會有所衝突？」嗯嗯...好問題。這要看看您所謂的衝突是什麼意思。若是您的意思是「衝突 = 當機 or 無法顯示」那放心好了，不會！不可能。 |
【各種用法的優先順序】
|
剛剛說過四種用法並不衝突，不過，若是今天您在「標準用法」的CSS表中設定文字顏色為紅色，但又在外部呼叫的CSS檔中設定文字顏色為藍色，那到底文字顏色會變成什麼色呢？嘿嘿...要回答這個問題，我們就要了解一下，對於瀏覽器而言，到底哪一種用法的優先權最高！就好像坐公車一樣！少年人能座椅子的優先權最低..老年人高一點，孕婦的優先權又更高一點...CSS也一樣有優先權喔！簡單來說： 1. 您可以四種一起用，只要設定內容沒有重複，那麼，四種用法都可以相安無事。但是，幹嘛四種一起用？不要把事情搞得太複雜嘛！ 2. 若是您重複設定（如下表），那麼以後者為準，亦即文字大小會是15pt：
3. 若是您用了好幾種方法（如下表），而且有設定項是相同的，那麼一樣以最後者為準，亦即文字大小會是15pt：
4. my_css.css內容：
5. 所以，簡單的說，設定以最後讀入者為最優先！ |
|
進行到這一單元，您應該要知道「什麼是CSS樣式表」、「如何將CSS樣式表加到網頁中」，接下來，我們今天要聊聊的是...如何自己定做一個CSS的類別（class）。 |
【天啊！什麼是類別？】
|
您或許想吐血了！因為，又出現了一個新東西「類別」，其實，別緊張，這東西或許您並不陌生呢！回想一下，在HTML標籤中，有個屬性叫做class，當時，食神從不解釋這個屬性能幹嘛。其實，不是食神不解釋，而是解釋了也不會用，所以就暫時不說，等到今天再說。這個class屬性，食神將之稱為「類別」屬性，他能幹嘛呢？他能夠讓我們在不同的標籤中使用相同的CSS設定，食神舉個例子如下： 我們在讀書的時候，常常會在課本上畫重點，怎麼畫呢？有的用紅筆畫，有的用螢光筆畫...如果，今天我們在網頁上，也想將一些比較重要的地方，用「紅色、粗體字」來呈現，您會怎麼做呢？我們把上一段拿來畫重點：
目前的您應該會這樣做吧！ |
【用CSS"畫重點"】
|
用剛剛那種方法是相當不錯啦！簡單又易懂！不過，試想一種情形...若是您的網頁中有1000多個所謂的「重點」，今天您突然想把重點通通換成「藍色」的，那您該怎麼辦？ 嘿嘿...傷腦筋了吧！這時，我們就請出CSS來幫我們解決難題吧！而且，我們的「自定類別」也要派上用場了喔！
首先，我們在CSS表中動動手腳，自己做一個叫做important的類別，然後利用class屬性，套用在網頁中，不難吧！還不懂？看看範例吧！ 以後若是要將「紅色」改成「藍色」，那麼只要改類別裡的設定就行囉！不管網頁中有幾萬個"重點"，都不用怕了！ |
【自定類別的用法】
|
ＯＫ！看過自定類別的大概用法後，食神再來做詳細的解說，如何自定類別...。自定類別很簡單，方法和一般的CSS宣告沒什麼兩樣！唯一的不同是，CSS宣告是針對某標籤；而自定類別則不針對某標籤，而是要自己命名！
以上為例，.important { color:red ; font-weight:bold }就是我們自定的類別，其中的{}部份和一般的CSS宣告方法一模一樣！差別就在前面的.important，沒錯！important就是我們自定的名稱，有了名稱，才能呼叫。注意！前面記得在自定名稱前加一個小點「.」，這樣我們就完成了自定一個類別！這個類別可以利用class來呼叫！套用到任何標籤中！ |
|
這個標題很熟悉吧！沒錯，之前的「進階技巧」單元中就有這麼一個主題，今天我們就要來深入一點的來聊聊，什麼叫做「連結變色」！除了變色外，還能玩出什麼花樣？ |
【連結變色怎麼做？】
|
在開講之前，我們先直接跟您講答案！怎麼做出「連結變色」的用法？
這就是連結變色的 CSS 語法！怎麼套用到網頁上呢？不不不...它不需要套用！您只要將這個CSS語法乖乖的擺到網頁上即可，當網頁中有連結時，它就會自動套用上去了！夠簡單吧！若仍不懂，請看看範例及原始碼。 |
【為什麼會這樣？】
|
您可以仔細瞧瞧 CSS 樣式表中所列的東西，通通都是 A: 開頭的！這是什麼意思呢？A在HTML裡面代表的就是連結...也就是說，您宣告的這四個語法都是和連結有關係的！ 有什麼關係呢？嗯！關係就寫在「:」之後（注意 A:link 這中間沒有任何空白！）A:link 就是代表「正常的連結」，A:visited 就是代表「參觀過的連結」，A:active 就是代表「執行中的連結」，A:hover 比較特別，它是代表「當滑鼠移到連結上的時候」！我們再回頭看看剛剛的樣式表，我們來解釋一下：
就這樣...連結變色的效果，很快的就產生了！真的粉簡單吧！ |
|
今天要介紹兩個標籤，一個是<DIV>、另一個是<SPAN>標籤。或許您會覺得奇怪，為什麼突然要介紹這兩個標籤？簡單講，因為這兩個標籤和CSS密不可分。 |
【打包網頁元件】
|
被<DIV>或<SPAN>標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。就如同我們在打包物品一樣，您可以一個包裹只包一件衣服，也可以一個包裹包衣服、鞋子、帽子等。<DIV>和<SPAN>標籤就是這種功能！您可以用<SPAN>標籤包住一段文字，該段文字就成了一個物件（您要想成包裹也無可厚非...），您也可以用<SPAN>標籤包住一段文字，一張圖、一個表格，那麼這三個東西也會被視作一個物件。 這兩個標籤在DHTML（動態HTML）中，是相當重要的東西，因為，動態HTML顧名思義，有些東西是動態的，可能是一張圖、一段文字要動來動去。要一張圖動來動去還好，因為，一張圖本身就是一個「物件」。但是，要怎樣讓瀏覽器知道某一句話，或是某一個字是一個物件？或是要讓圖片和表格同時動來動去，那麼此時，您就需要用到 <DIV>、<SPAN>標籤。 |
【有什麼不同？】
|
<DIV>、<SPAN>標籤究竟有什麼不同？有！不過只有一個地方比較不一樣，您可以比較看看：
發現了嗎？被<DIV>包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。而被<SPAN>包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。您可以視不同的狀況，使用不同的標籤。 |
【這標籤怎麼用？】
|
要明白的告訴您 <DIV>、<SPAN> 標籤要怎麼用是有點困難的，因為，網頁設計會面對的情況千變萬化，不過，食神還是舉個實例好了！免得您還是一頭霧水。 現在食神想要設計一個機制，就是讓使用者按下「按我」兩個字時，會出現一個警告對話框（不是使用連結喔！），我們這就來玩玩看吧！
別懷疑，按下下邊的「按我」兩個字看看！（此時游標不會變成手指狀！） 食神來解釋一下，我們先用<SPAN>標籤將「按我」兩個字變成一個物件，然後，我們指定：當滑鼠按到這個物件時（onClick）則立即執行alert('***')（出現警告對話框）這樣明白嗎？ |
留言列表
1F-網路創業賺錢 (1)