網頁的標準和一致性 (1/12)

網頁的標準和一致性 (1/12) • 不同的瀏覽器會用不同的方法處理有瑕疵的HTML文件。 • 在毫無差錯的情況下大多數的瀏覽器(含掌上型設備、家電電子、汽車電子等等)才會顯示一致性的畫面。 • 何謂標準化？所謂標準化是每個人(or 瀏覽器)都認可的HTML版本稱為「標準」。 • 爲什麼要標準化？ • 可用來簡化程式碼縮減網頁的大小 • 加快網頁載入速度 • 並讓網站更易維護 • 讓瀏覽器能夠忠實地顯示設計人員所創造的效果 • …

網頁的標準和一致性 (2/12) • 針對網頁顯示的相容性之解決方案大概有： • 於網頁上註明最佳瀏覽環境為何，直接限制讀者所使用的瀏覽器。 • 網頁設計者自行測試於各種瀏覽環境下的顯示狀況，並視情況設計不同瀏覽器所顯示的網頁。 • 網頁設計者與瀏覽器設計者，共同遵循國際標準組織所制訂的規範，以達到較佳的網頁顯示效果。 • 方案一直接限制讀者所使用的瀏覽器。 • 方案二為目前最廣泛使用；但瀏覽器多元開發與不同應用環境，大量增加網頁設計的時間，且也無法全面相容。 • 方案三透過國際標準組織之規範，為真正之治本方式

網頁的標準和一致性 (3/12) • HTML簡史 • HTML 1.0-2.0：草創階段，只在乎網頁內容。 • HTML 3：Netscape與IEExlorer之瀏覽器之爭，各有所屬的網頁標籤和屬性。 • HTML 4：World Wide Web (W3C)成立，首先專責HTML文件的標準化，也負責建立Internet的各種標準。 • HTML 4.01：最通用的HTML版本。 • XHTML (Extensible Hptertext Markup Language) 。

網頁的標準和一致性 (4/12) • 如何達到網頁的標準化？ • 告知瀏覽器HTML文件的版本 • 使用validator檢驗HTML文件的正確性 • 如何告知瀏覽器HTML文件的版本？使用文件類型定義 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 說明： • !DOCTYPE：告訴瀏覽器指定頁面類型 • HTML：表示<html>頁面的根元素 • PUBLIC：告知每個人都可以用HTML4.01標準 • -//W3C//DTD HTML 4.01 Transitional//EN：說明我們用HTML4.01版本，且是使用英文撰寫 • http://www.w3.org/TR/html4/loose.dtd：所謂的*.dtd是一種文件規範，告知文件檔案必須遵守此規範

網頁的標準和一致性 (5/12) • 若是宣告使用HTML4.01版本，但是內容語法並非真正的4.01，不同的瀏覽器就會使用不同的的方法解讀內容，呈現的結果仍然是容易產生怪異的現象。 • 只有寫出完整無誤的HTML4.01瀏覽器才會承諾一致性的優點。 • 使用 validator (http://validator.w3.org)驗證HTML檔案的正確性，e.g.,標籤名稱、結束標籤、巢居元素…（但是即使是HTML4.01，在不同的瀏覽器上面仍有少數的差異性）。 • -//W3C//DTD HTML 4.01 Transitional//EN 過渡期的標準（Transitional）

網頁的標準和一致性 (6/12) • DOCTYPE基本上有兩種，一種用在那些過渡期(Transitional)到HTML4.01的網頁，一種是比較嚴格 (STRICT)的HTML4.01網頁。 • 所謂過渡期（Transitional）網頁是因大部分的網頁都是用非標準的HTML4.01寫成，例如網際網路上仍有大量的HTML2.0和3.0。為了讓這些網頁順利銜接HTML4.01版本，允許網頁保留一些舊版的HTML，以避免一些較誇張的錯誤，例如配錯標籤、錯字等，在不用重寫HTML的前提下，讓網頁繼續有效。

一個符合HTML4.01 Transitional文件範例 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the New and Improved Head First Lounge</h1> <img src="images/drinks.gif" alt="drinks"> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="about/directions.html">detailed directions</a>. Come join us! </p> </body> </html>

網頁的標準和一致性 (8/12) • 嚴格的HTML4.01標準和過渡期標準差別何在？ • <html>必須是根元素 • <head><body>必須巢居在<html>元素裡 • <title>必須巢居在<head>元素裡 • 清單裡只能放清單項目 • 行內元素要放在區塊元素中 • 區塊元素不可以放在行內元素裡 • <blockquote>標籤裡只放區塊元素 • 不是所有行內元素都能放入行內元素

網頁的標準和一致性 (9/12) • 什麼是行內元素？什麼又是區塊元素？ Answer：區塊元素是用在網頁的主要建築區塊，行內元素則標示出內容的一小部份。設計網頁時，一般都事先用大頭(區塊元素) ，接著再加入行內元素。例如<p>, <h?>, <blockquote>…等等是區塊元素；<a>, <br>, <em>, <q>…等等是行內元素。(<img>也是行內元素, WHY?) • 為何不一開始就用嚴格版的HTML4.01？ Answer：嚴格版的HTML4.01較多規範，傳統HTML2.0或3.0版較不易一次轉換為嚴格版

一個符合HTML4.01 Strict 文件範例 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the New and Improved Head First Lounge</h1> <p><img src="images/drinks.gif" alt="drinks"></p> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs, </a> conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="about/directions.html">detailed directions</a>. Come join us! </p> </body> </html>

<!– 一個HTML3.2的範例，指出哪些地方不符合HTML 4.01 strict 版本 --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Webville Forecase</title> </head> <body bgcolor="tan" text="black"> <p> The weather report says lots of rain and wind in store for <font face="arial">Webville</font> today, so be sure to stay inside if you can. </p> <ul> <li>Tuesday: Rain and 60 degrees <li>Wednesday: Rain and 62 degrees </ul> <p align=right> Bring your umbrella! <center><font size="small">This page brought to you buy Lou's Dinner, a Webville institution for over 50 years. </font></center> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> <img src="images/drinks.gif" alt="drinks"> <h1>Tips for Enjoygin Your Visit in Webville</h1> <p>Here are few tips to help you better enjoy your stay in Webville.</p> <p><ul> <li>Always dress in layers and keep an html aroud your head and body.</li> <li>Get plenty of rest while you're here, sleep helps all those rules sink in.</li> <li>don't miss the work of our local artists right downtown in the CSS gallery.</li> </ul></p> <p> Having prolems? You can always find answer at <a href="http://headfirstlabs.com"> <em>Head First Labs</em></a>. Still got problems? Relax, Webville's a friendly place, just ask someone for help. And, as a local used to say: </p> <blockquote> Don't worry. As <q>long</q> as you hit that wire with the connecting hook at precisely 88mph the instant the lightning strikes the tower...everything will be fine. </blockquote> </body> </html> 請驗證本文的錯誤

XHTML簡介 • 什麼是XHTML? 簡單說就是以 HTML4 為範本，然後再依 XML 的語法規範重新對 HTML 作一個新規範的制定，來產生一個新的標記語言「XHTML」，W3C 最終目標是要以 XHTML 來取代 HTML。 • HTML語法要求較鬆散，對網頁編寫較方便使用。 • XHTML 文件遵循 XML。用標準的 XML 工具很容易查看、編輯和檢驗它們。 • 傳統的電腦，有能力相容鬆散語法；掌上型設備及一般家電(手機、PDA、車上電子等)，處理鬆散語法難度較大。因此需要語法要更嚴格的XHTML。 • 幾乎所有的瀏覽器在正確解析HTML同時都可相容XHTML。

XML簡介 • XML • 1996年， W3C 尋找一種在 WEB 中應用 SGML 的靈活性和強大功能的方法，於是造就了1998年 2 月 XML1.0 規範的發佈。XML (eXtensible Markup Language，可擴展標記語言)具備了 SGML 的核心特性，又非常的簡潔，XML 規範的內容甚至不到 SGML 的十分之一。 • SGML 成熟度與穩定度都非常高，但過於複雜，以致無法在網站上普及應用；而 HTML 又過於簡單與缺乏彈性而無法滿足網站在各方面的應用。

XML簡介 • XML 就是為了解決這些問題，希望 XML 能夠繼承 SGML 的優點又不會太複雜，而且又能補 HTML 之不足的地方。它的文件很容易在網路上傳遞與使用，當然也需要能正確解讀文件的軟體，而附有該剖析器的瀏覽器就是其中之一。 • 創造它的目的為的是重新獲得 SGML 的能力與靈活性，而去除大部分複雜的東西。儘管它是一個受到限制的 SGML 形式，但它仍保留了其中大部分的功能與豐富性，也保有 SGML 的所有常用特性。

XHTML特性 • 文件必須是編排良好的(Well-formedness) • XHTML documents must have a root element • XHTML elements must have a closing tag • XHTML elements must be properly nested • XHTML tags are case sensitive • 元素與屬性名稱必須小寫正確：巢狀元件。 <p>here is an emphasized <em>paragraph.</em></p> 不正確：層疊元件。 <p>here is an emphasized <em>paragraph.</p></em>

XHTML特性 • 非空元件必須有結束標籤 • 屬性值必須在引號中正確：終止的元件。 <p>here is a paragraph.</p><p>here is another paragraph.</p> 不正確：沒有終止的元件。 <p>here is a paragraph.<p>here is another paragraph. 正確：在引號中的屬性值 <table rows="3"> 不正確：不在引號中的屬性值。 <table rows=3>

XHTML特性 • 省略預設屬性值 • 空元件也要有結束標籤正確：有指明預設屬性值 <dl compact="compact"> 不正確：省略預設屬性值 <dl compact> 正確：結束的空元件 <br /><hr /> 錯誤：未結束的空元件 <br><hr>

XHTML優點 • XHTML可以延伸納入新的標記，具有擴充的功能。例如，延伸向量圖像與數學公式的元素。 • XHTML已正式成為移動設備與手機的語言。 • 容易將原有的XML轉換成為XHTML，讓原本讀取XML的應用軟體讀取XHTML。 • XHTML提供XML的優點，可以儲存大型架構的文件庫，同時也有HTML的好處，例如用CSS建立外觀。

從嚴格版HTML4.01轉換到XHTML1.0 • 將DOCTYPE更改為XHTML1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • 把xmlns、lang和xml:lang屬性加到<html>元素 • 由於XML可以用來定義許多的標記語言，所以必須清楚說明再用<html>元素時，適用哪一種語言。 • <html xmlns=http://www.w3.org/1999/xhmtl lang=“en” xml:lang=“en”> • xmlns：用來辨別html標籤所屬的XML語言 • http://www.w3.org/1999/xhtml： • lang=“en” xml:lang=“en”: 兩者的寫法都是指定使用的語言為英文，視瀏覽器詮釋XHTML的不同而使用，最好的辦法兩者都寫上。

從嚴格版HTML4.01轉換到XHTML1.0 • 所有的空元素都要以/>作結束，而非> • 所有的元素必須使用小寫 • 所有的屬性值都必須用雙引號框住 • <html>標籤必須是DOCTYPE之後的第一個標籤，而</html>結束標籤必須是文件最後一個標籤。

一個符合XHTML1.0 Strict 文件範例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"/> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the New and Improved Head First Lounge</h1> <p><img src="images/drinks.gif" alt="drinks"/></p> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs, </a> conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="about/directions.html">detailed directions</a>. Come join us! </p> </body> </html>

認識CSS • CSS 的全名為 Cascading Style Sheets，中文可翻譯為串接式樣式表，簡稱為「樣式表」。是一種樣式表 (Stylesheet) 語言。 • 所謂的樣式就是將文字的格式、文字的樣式、超連結樣式、字體、背景樣式、區塊編排、表單格式等，字體大小和字型、濾鏡、位置定位等HTMＬ文件的特殊效果。 • CSS就是將就是將特殊效果定義樣式(Style，以方便取用及更改。

認識CSS • CSS 的目的是為了對像 HTML 及 XHTML 之類的標記語言 (markup language) 提供一個顯示層。 • CSS將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。 • 它是用來延伸 HTML，有效的管理與維護網頁，而非取代 HTML。 • CSS負責外觀；HTML負責架構

CSS套用方式 • 有四種方式可將 CSS 套用入 HTML 文件中： • 行內套用 (Inline) • 嵌入套用 (Embed) • 外部連接套用 (External Link) • 匯入套用 (Import)

CSS套用方式 • 行內套用：直接將樣式宣告寫在標籤中語法：<style="樣式屬性: 屬性值;…;"> 例如：<body style="background-color:#0066FF“> <p style="font-size:24px;">This is font size 32</p> 範例：cs01.htm • 嵌入套用：將樣式直接嵌入於 HTML 文件中，並放置於<head></head>之中例如： <head> <style type="text/css"> div { background-color:#FF0000; } </style> </head> <body> <div>此區塊背景顏色是紅色 </div> <p>這部份顏色正常</p> </body> 範例：cs02.htm

CSS套用方式 • 外部連接套用：將CSS 樣式宣告都存在另外一個檔案中，檔案名稱為 *.css，再從HTML文件的<head></head>裡連接。語法：<link rel=stylesheet type="text/css" href="external-stylesheet.css"> 範例：css03.htmcss04.htm (兩者皆使用css03.css) • 匯入套用：外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import這個指令 @import 的語法為

CSS套用方式 <STYLE TYPE="text/css">  </STYLE> • @import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位

認識CSS -- 語法的基本格式 • 每個語法之中都包含有兩個部份，第一個部分是選擇器，第二個部分則是樣式宣告。 • 選擇器用來決定那些已知的標籤名稱或者我們自訂的名稱會受到樣式影響。 • 在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。 • 選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。

認識CSS -- 語法的基本格式 • 樣式宣告，由一組或多組屬性樣式：樣式值來指定選擇器的動作，就是 { 與 } 所括起來的部份。 • 若選擇器之中，有一個以上的樣式宣告，記得在每組之間用分號「;」隔開彼此。 • 每組之間使用分號來「串接」的方式也就是其 CSS 名稱的由來。 • 使用案例類型選擇器範例（如次頁所示）， Class 選擇器、和 ID 選擇器待討論。

CSS檔案內容 認識CSS -- 語法的基本格式 • 使用案例類型選擇器範例 h1 { font-size: 32px; } … HTML檔案內容 <html><head> <link type="text/css" rel="stylesheet" href="test1.css"/> </head> <body> <h1>這是標題一，font-size:32px，color:#993300</h1> </body> </html>

認識CSS -- 語法的基本格式 • Grouping：數個選擇器享有同樣的樣式，它們可以同時被宣告。 • 後代選擇器 (Descendant Selectors) ：當甲元素在乙元素之內時，甲元素才會用某個樣式。若甲元素不在乙元素內的話，那甲元素就可以有其他的樣式。 • 語法：【父選擇器】【子選擇器】{ 屬性：設定值； ... } h1,h2,h3 { color: #993300; } … li b { font-style: normal; font-weight: bold; font-size: 16px; }

加入樣式到Lounge裡(嵌入套用) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"/> <title>Head First Lounge</title> <style type=“text/css”> p { color: maroon;} </style> </head> <body> <h1>Welcome to the Head First Lounge</h1> <p><img src="../images/drinks.gif" alt="drinks"/></p> <p> Join us any evening for refreshing <a href="elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="directions.html">detailed directions</a>. Come join us! </p> </body></html>

認識CSS -- 語法的基本格式 • 繼續上一頁範例 • 改變<p>標籤的底色 p { background-color: maroon; } • 裝飾標題h1,h2 h1 { font-family: sans-serif; color : gray; } h2 { font-family: sans-serif; color : gray; } • 將h1,h2合併一起

認識CSS -- 語法的基本格式 • 在標題加底線 h1,h2 { font-family: sans-serif; color : gray; border-bottom: 1px solid black; } • 如果只想要在h1底下設定底線 h1,h2 { font-family: sans-serif; color : gray;} h1 { border-bottom: 1px solid black; } • 設定段落的顏色 p { color: : maroon; }

加入樣式到Lounge裡(外部連接套用) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"/> <title>Head First Lounge</title> <link type=“text/css” rel=“stylesheet” href=“lounge.css” /> </head> <body> <h1>Welcome to the Head First Lounge</h1> <p><img src="../images/drinks.gif" alt="drinks"/></p> <p> Join us any evening for refreshing <a href="elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="directions.html">detailed directions</a>. Come join us! </p> </body></html>

lounge.css (外部連接套用之CSS) • h1,h2 { • font-family: sans-serif; • color : gray; • } • h1 { • border-bottom: 1px solid black; • } • p { • color: maroon; • }

認識CSS -- 語法的基本格式 • 一個CSS檔案可以讓許多不同的*.htm使用，例如css03.htm, css04.htm, css05.htm都使用css03.css檔案。 • CSS的標籤元素有繼承關係，如下圖所示：

認識CSS -- 語法的基本格式 • 只要在<body>標籤元素設定樣式，底下所有標籤都會繼承同一樣式。例如： body { font-family: sans-serief;} h1,h2 {font-family: sans-serief; color: gray; } h1 { border-bottom: 1px solid black; } P { font-family: sans-serief; color: maroon; }

認識CSS -- 語法的基本格式 • 如果不想每個元素都使用案例sans-srif字型，例如某元素要改用serif字型，需選擇撤銷繼承關係。例如：em { font-family: serif; } • 使用 /* …… */當成注釋

認識CSS -- 語法的基本格式 • 使用類別(class)裝飾網頁的部份段段。 • 檢視css04.htm，該網頁可分成四個段落，分別是green tea, Raspberry, Blueberry 以及Cranberry四種飲料。 • 分別在四個段落，使用四種不同的顏色說明。 • 分別在四個段落設定不同類別 • <p class=“greentea”>… • <p class=“blueberrytea”>… • <p class=“raspberrytea”>… • <p class=“cranberrytea”>…

認識CSS -- 語法的基本格式 • 在CSS檔案寫法為： • p.greentea { color: green;} • p.blueberrytea {color: purple;} • p.raspberrytea {color: blue;} • p.cranberrytea {color: maroon;}

CSS04.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"/> <title>Head First Lounge Elixirs</title> <link type="text/css" rel="stylesheet" href="css03.css"/> </head> <body> <h1>Our Elixirs</h1> <h2>Green Tea Cooler</h2> <p class="greentea"> <img src="../images/green.jpg" alt="green tea" width="47" height="100"/> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root. </p> <h2>Raspberry Ice Concentration</h2> <p class="raspberrytea"> <img src="../images/lightblue.jpg" alt="raspberry ice concentration" width="48" height="100"/> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp. </p>

<h2>Blueberry Bliss Elixir</h2> <p class="blueberrytea"> <img src="../images/blue.jpg" alt="blueberry bliss elixir" width="50" height="100"/> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time. </p> <h2>Cranberry Antioxidant Blast</h2> <p class="cranberrytea"> <img src="../images/red.jpg" alt="cranberry antioxidant blast" width="64" height="100"/> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. </p> </body> </html>

CSS03.css body { font-family: sans-serif; } h1,h2 { color: gray;} h1 { border-bottom: 1px solid black; } p { color: black; } p.greentea { color: green; } p.blueberrytea { color: purple; } p.raspberrytea { color: blue; } p.cranberrytea { color: maroon; } p代表選擇器，greentea, blueberrytea, raspberrytea, 以及cranberrytea是類別名稱。 { color:green} 等等是樣式宣告，其中color代表屬性樣式；green代表樣式值。

認識CSS -- 語法的基本格式 • 若是要更改前頁greentea、blueberrytea、raspberrytea、以及cranberrytea的段落的文字大小，以及畫上底線，該如何做？ • 再次檢視CSS04.htm，若是我們想將每種茶的<h2>標題也換上和該段落相同的顏色，該如何處理？ • 若是一個元素(例如段落p)，加入一個以上的類別，例如<p class=“greentea raspberrytea blueberrytea”>，網頁會如何顯示呢？ • 該如何驗證CSS的正確性？http://jigsaw.w3.org/css-validator

網頁的標準和一致性 (1/12)

網頁的標準和一致性 (1/12)

Presentation Transcript