CSS(Cascading Style Sheets) 串接樣式表上課講義

CSS(Cascading Style Sheets) 串接樣式表上課講義 本投影片資料來源：（1）CSS基本概念：台大計中許凱平 kphsu@ccms.ntu.edu.tw http://ccms.ntu.edu.tw/~kphsu （2）CSS範例：博碩出版社，『最新詳解JavaScript&HTML&CSS語法辭典-增訂新版』

何謂樣式表(Style Sheets)? • 風格樣式表體裁紙 • 如字體、顏色、大小 • 用途 • 控制文件在媒體上顯示的風格 • 媒體 • 電腦螢幕、電視、紙張、手機、聲音 • 理念 • 將文件的內容(contenet)與格式(format)分開

微軟OFFICE系列軟體中的樣式 • Word • 巨集、樣式 • Powerpoint • 投影片母片 • Front Page • 樣式表

CSS的優點(一) • 專業分工 • 由專業人員負責風格設計 • 其他人只要負責內容即可 • 讓文件呈現一致的風格 • 共享 • 可重複使用 • 具有繼承的概念

CSS的優點(二) • 效率 • 減少文件大小、節省網路頻寬 • 容易製作、容易維護 • 為一般文字格式 • 用普通編輯器即可撰寫

CSS的優點(三) • 可程式控制 • 可在程式中動態改變樣式 • 可合理退化 • UA自動忽略尚未支援的屬性

標示 • 邏輯性標示 • 地址 • 描述性標示 • 標題一 • 特殊標示 • 在選定範圍上直接指定格式

樣式表語言(Style Sheet languages) • CSS • Cascading Style Sheets • XSL(配合XML使用) • Extensible Stylesheet Language • 使用原則 • 能夠用CSS做到的就不要用XSL

年表 • CCS1(CSS Level 1)是在 1996 年 12 月完成製定，並在1999 年 1 月增修 • CSS-P(CSS-Positioning)CSS規格的一個延伸，可做絕對定位 • CCS2(CSS Level 2)的規格在 1998 年 5 月完成製定，目前瀏覽器只支援其中的少許功能。 • CSS3目前正在發展中的規格

Cascading • Cascading • Reader + inline + embedded + linked • Conflicts • Reader > inline > embedded > linked

Style Sheet and Rule樣式表與規則 • style sheet 樣式表 • a collection of rules 由一群規則(rule)組成 • rule 規則 • Selector(選取器) 的宣告 (declaration) • 語法selector { property : value; }選取器 { 特性: 特性值; }

CSS的使用方式 • Inline (在元素(Element) Level內使用) • <h1 style="color:red"> • Embedded (File Level)---從CSS檔案呼叫 • <style type="text/css"> h1 {color:red} </style> • Linked (interFile Level)---在HTML的<head>中的<style>內定義 • <link rel="stylesheet" href="style/main.css"> • Reader(browser) defined----由網頁瀏覽器選擇 • 工具/Internet 選項／

HTML文件<head>內定義樣式 <HTML> <HEAD> <LINK REL=STYLESHEET TYPE="text/css“ HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green"> While the paragraph is green. </BODY> </HTML>

連結樣式與標示/標籤/元素(一) • Tag • H1 { COLOR: blue } • Class • .LargerClass { FONT-SIZE: larger; } • ID • #uid {COLOR: green }

連結樣式與標示/標籤/元素(二) • Group • H1, H2 { COLOR: blue } • Tag + Tag • TABLE TR{color:blue } • Tag + Class • H1.LargerClass { FONT-SIZE: larger } • Tag + ID • H1#uid {COLOR: green }

Displayproperty • Block • <div>、<p> • Inline • <span>、<em> • list-item • <li> • None • 隱藏

CSS的程式設計功能 <p OnMouseOver= " poweredBy.style.display='block' " OnMouseOut= " poweredBy.style.display='none' " >

HTML格式設定的基本概念 _______________________________________ | margin (transparent) | | _________________________________ | | | border | | | | ___________________________ | | | | | padding | | | | | | _____________________ | | | | | | | content | | | | | | | |_____________________| | | | | | |___________________________| | | | |_________________________________| | |_______________________________________|

範例 • IPS (XML+XSL+CSS) • http://kptest.cc.ntu.edu.tw/ips/ • Tree的製作(XML+XSL+CSS) • http://kptest.cc.ntu.edu.tw/webtech/

參考資料 • W3C • http://w3.org/ • Style • http://www.w3.org/Style/ • CSS • http://www.w3.org/Style/CSS/

參考資料 • Microsoft MSDN Online • http://www.microsoft.com/taiwan/msdn/ • 無廢話XML • http://2tigers.net/xml_book/

References • Chinese XML Now! • http://www.ascc.net/xml/

一些有用的CSS教學網站 • 凱哥的無名相簿(HTML+CSS)教學，從這裡可以連到其它中文教學於資源網站 • CSS語法測試實驗網站 • CSS ZenGarden—CSS版面設計必訪之地 • CSS PLAY—CSS語法查詢與範例 • glish-- 學習CSS版面設計技巧的好去處 • Thefixor – CSS資源大本營 • Little Boxes – CSS版面設計經典原始碼，以圖解方式說明 • CSS Drive – CSS相關網站的連結站與資源蒐集 • Webcreme – 很多CSS版面設計與配色參考 • Oswd – Open Source Web Design，蒐集上千個CSS網網站範本讓你參考 • 美麗的CSS版面範例參考 csslovecssBeautycssmaniacssimportunmatched stylewebstandard awardsDark Eye

一些有用的HTML與CSS教學網站 • Tsung's Blog • HTML語法教學 • html語法教學區 • HTML教學目錄 • HTML CSS JavaScript 語法教學 • HTML 語法測試區 • CSS 語法教學 • css css 語法教學^_^包含無名小站的設定教學喔！ • CSS 語法參考辭典 • 無名 css 語法教學 • 無名 css 語法教學 • Tjun的小小小空間- 簡單的無名CSS教學（給初學者） • Keigo-凱哥‘s 無名相簿語法(CSS+Html)教學 • Xuite CSS教學、樣式與問題整理 • CSS教學：自訂無名小站的CSS樣式 (相關網站連結整理)

CSS範例 • 資料來源：博碩出版社，『最新詳解JavaScript&HTML&CSS語法辭典-增訂新版』

第一部份 CSS的組成 01.01 讀取CSS檔案 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>CSS的編寫</title> <link rel="stylesheet" href="default.css" type="text/css"> </head> <body> <h1>CSS的編寫</h1> <p> 將HTML文書編寫成樣式表，有以下三種方法。其中之一是在其他檔案中只記述樣式表，然後讀取。剩餘的兩個方法則是在HTML文書中直接編寫樣式表。 </p> </body> </html>

01.02 CSS的組成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>CSS的編寫</title> <link rel="stylesheet" href="default.css" type="text/css"> </head> <body> <h1>CSS的編寫</h1> <p> 將HTML文書編寫成樣式表，有以下三種方法。其中之一是在其他檔案中只記述樣式表，然後讀取。剩餘的兩個方法則是在HTML文書中直接編寫樣式表。 </p> </body> </html ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>CSS的組成</title> <style type="text/css">  </style> </head> <body> <h1>CSS的組成</h1> <p> 在HTML文書中組成樣式表有三種方法。其一是在其他檔案中記述樣式表，然後讀取；另外兩種是在HTML文書中直接寫入樣式表。 </p> </body> </html>

01.03 在任意元素中以STYLE屬性質來編寫 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>CSS的編輯</title> </head> <body style="margin:0; color:#000000; background:#00cc99 url(back.jpg)"> <h1 style="font-size: medium; margin: 0; padding: 0.3em; color: #ffffff; background-color: #000000"> CSS的編輯</h1> <p style="line-height: 1.8; margin: 1.6em 1.6em 1em 36%; padding: 1em; border: dotted 3px #ffffff"> 在HTML文書中編輯樣式表有以下三種方法。一種為在其他檔案中只記述樣式表，再加以讀取。其他兩種為直接在HTML文書中編輯樣式表。 </p> </body> </html>

第2部份適用CSS的對象 02.01 適用於特定元素 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用於特定元素</title> <style type="text/css">  </style> </head> <body> <h1>h1元素的內容</h1> <p>p元素的內容</p> </body> </html>

02.02 可適用於複數個元素的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>可適用於複數個的元素</title> <style type="text/css">  </style> </head> <body> <h1>h1元素的內容</h1> <p>p元素的內容</p> </body> </html>

02.03 適用於所有元素的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用於所有的元素</title> <style type="text/css">  </style> </head> <body> <h1>h1元素的內容</h1> <h2>h2元素的內容</h2> <h3>h3元素的內容</h3> <h4>h4元素的內容</h4> <h5>h5元素的內容</h5> <h6>h6元素的內容</h6> <p>p元素的內容</p> </body></html>

02.04 適用於指定ID及類別的元素的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用指定ID及類別的元素</title> <style type="text/css">  </style> </head> <body> <h1 class="myclass">h1元素的內容</h1> <p>p元素的內容</p> <p class="myclass">p元素指定成「class="myclass"」</p> <p>p元素的內容</p> <p id="myid">p元素指定成「id="myid"」</p> <p>p元素的內容</p> <p class="myclass">p元素指定成「class="myclass"」</p> <p>p元素的內容</p> </body> </html>

02.05 適合於連結LINK的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用於連結部分</title> <style type="text/css">  </style> </head> <body> <h1>適用於連結部分</h1> <p> 利用<a href=“css.html”>樣式表</a>的話，可以讓只有一部分的<a href=“link.html”>連結</a>改變顏色等的樣式。「:link」「:visited」等稱為「<a href=“pseudo.html” class=“special”>虛擬類別</a>」。 </p> <p class="navbar"> [<a href="next.html">下一頁</a>] [<a href="top.html">最頂端</a>] [<a href="prev.html">前一頁</a>] </p> </body> </html>

02.06 適用於第1行的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用於第一行</title> <style type="text/css">  </style> </head> <body> <p> 「:first-line」為適用於樣式表之Block level要素的第一行表示之模擬要素。因選擇器有多樣的種類，基本上可以任意的加以組合，但對於模擬要素的部分則一定會保留在選擇器的最後使用。 </p> </body> </html>

02.07 適用於第1個文字的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用於第一個文字</title> <style type="text/css">  </style> </head> <body> <p> 像在雜誌上經常可以看到的首字放大，使用樣式表時，可以限定只有開始的第一個文字適用於樣式。Windows的Internet Explorer從5.5版開始，Netscape從第6版開始可適用。但請注意，若用於日文版本，在Macintosh版Internet Explorer 5.0則有可能會發生亂碼的情形。 </p> </body> </html>

02.08 適用於特定元素的CSS設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>適用於特定的元素</title> <style type="text/css">  </style> </head> <body> <h1>這個是<em>h1元素</em>的內容。</h1> <p>這個是<em>p元素</em>的內容。</p> </body> </html>

第3部份字型的CSS設定 03.01 指定文字的顏色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定文字的顏色</title> <style type="text/css">  </style> </head> <body> <p class="type1">文字顏色指定為「#009999」。</p> <p class="type2">文字顏色指定為「#cccc00」。</p> <p class="type3">文字顏色指定為「#ff9900」。</p> </body> </html>

03.02 指定字型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定字型</title> <style type="text/css">  </style> </head> <body> <h1>font-family</h1> <p class="min">這個部份是以細明體設定。</p> <p class="gth">這個部份是以楷書設定。</p> <p class="com">Comic Sans MS</p> </body> </html>

03.03 指定字型大小 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定字型的大小</title> <style type="text/css">  </style> </head> <body> <p>此文字的大小是<em>初始值（medium）</em></P> <ul> <li class="xxs"><em>xx-small</em>的文字</li> <li class="xs"><em>x-small</em>的文字</li> <li class="s"><em>small</em>的文字</li> <li class="m"><em>medium</em>的文字</li> <li class="l"><em>large</em>的文字</li> <li class="xl"><em>x-large</em>的文字</li> <li class="xxl"><em>xx-large</em>的文字</li> </ul> <p> <span class="smaller">這裡是<em>smaller</em></span>、 <span class="m">這裡是<em>medium</em></span>、 <span class="larger">這裡是<em>larger</em></span> </p> <p> <span class="s09">這裡是<em>9 point</em></span>、 <span class="s12">這裡是<em>12 point</em></span>、 <span class="s16">這裡是<em>16 point</em></span> </p> <p> <span class="p080">這裡是<em>80%</em></span>、這裡是<em>100%</em>、 <span class="p120">這裡是<em>120%</em></span>、 <span class="p150">這裡是<em>150%</em></span> </p> </body> </html>

03.04 指定字型的粗細 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定字型的粗細</title> <style type="text/css">  </style> </head> <body> <ul> <li>font-weight: <em>normal</em></li> <li id="bold">font-weight: <em>bold</em></li> <li id="w400">font-weight: <em>400</em></li> <li id="w500">font-weight: <em>500</em></li> <li id="w600">font-weight: <em>600</em></li> <li id="w700">font-weight: <em>700</em></li> <li id="w800">font-weight: <em>800</em></li> <li id="w900">font-weight: <em>900</em></li> </ul> </body> </html>

03.05 指定字型樣式 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定字型樣式</title> <style type="text/css">  </style> </head> <body> <p> font-style: <span class="keywd">normal</span> </p> <p id="itlc"> font-style: <span class="keywd">italic</span> </p> <p id="oblq"> font-style: <span class="keywd">oblique</span> </p> <p> text-decoration: <span class="keywd">none</span> </p> <p id="udln"> text-decoration: <span class="keywd">underline</span> </p> <p id="lnth"> text-decoration: <span class="keywd">line-through</span> </p> <p id="ovln"> text-decoration: <span class="keywd">overline</span> </p> <p id="udov"> text-decoration: <span class="keywd">underline overline</span></p> </body> </html>

03.06 指定匯總後的字型關係 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定彙總後的字型關係</title> <style type="text/css">  </style> </head> <body> <h1>-font-</h1> <h2>[ shorthand font property ]</h2> <p> 使用此性質，就可以一次設定關於字型的多個性質，編排出美麗的版面。 </p> </body> </html>

第4部份文字的CSS設定 04.01 行距的設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>設定行距</title> <style type="text/css">  </style></head> <body> <h1>設定行距</h1> <h2>line-height: <em>normal</em></h2> <p id="sample1"> 行距會影響閱讀的容易度，過窄或過寬都會增加閱讀時的困難。比較上來說，如果行數較少、行距較寬，會較易閱讀；而一行的文字數多、行距狹窄則會較難閱讀。 </p> <h2>line-height: <em>1.5</em></h2> <p id="sample2">行距會影響閱讀的容易度，過窄或過寬都會增加閱讀時的困難。比較上來說，如果行數較少、行距較寬，會較易閱讀；而一行的文字數多、行距狹窄則會較難閱讀。 </p> <h2>line-height: <em>180%</em></h2> <p id="sample3">行距會影響閱讀的容易度，過窄或過寬都會增加閱讀時的困難。比較上來說，如果行數較少、行距較寬，會較易閱讀；而一行的文字數多、行距狹窄則會較難閱讀。 </p> </body> </html>

04.02 指定文字的水平設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定文字的水平位置</title> <style type="text/css">  </style> </head> <body> <p id="sample1">text-align: <em>left</em></p> <p id="sample2">text-align: <em>center</em></p> <p id="sample3">text-align: <em>right</em></p> </body> </html>

04.03 指定文字的垂直位置 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>指定文字的垂直位置</title> <style type="text/css">  </style> </head> <body> <p>vertical-align: <img class="vmid" src="leaf.gif" width="80" height="80" alt=""> <em>middle</em> </p> <p> vertical-align: <img src="leaf.gif" width="80" height="80" alt=""> <em class="vtop">top</em> <em class="vbtm">bottom</em> </p> <table border="3"> <tr> <td class="vtop"><em>top</em></td> <td class="vmid"><em>middle</em></td> <td class="vbtm"><em>bottom</em></td> </tr> </table> </body> </html>

04.04 指定文字間格與單字間格 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>設定文字間隔與單字間隔</title> <style type="text/css"> <!– .sample1 { letter-spacing: 0.5em } .sample2 { letter-spacing: 1em } .sample3 { letter-spacing: 2em } .sample4 { word-spacing: 0.8em } .sample5 { word-spacing: 1.5em } em { font-style: normal; font-weight: bold; color: #ff6600; background: #ffffff } --> </style> </head> <body> <h1>文字間隔與單字間隔</h1> <h2>■ letter-spacing</h2> <p>letter-spacing: <em>normal</em></p> <p class="sample1">letter-spacing: <em>0.5em</em></p> <p class="sample2">文字間隔：<em>1em</em></p> <p class="sample3">文字間隔：<em>2em</em></p> <h2>■ word-spacing</h2> <p>It specifies spacing behavior between words.</p> <p class="sample4">It specifies spacing behavior between words.</p> <p class="sample5">It specifies spacing behavior between words.</p> </body> </html>

04.05 設定段落首行縮排 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>設定段落首行縮排</title> <style type="text/css">  </style> </head> <body> <p>這是首行縮排「<em>0</em>（初始值）」的狀態</p> <p id="sample1"> 這是只有「<em>1em</em>」首行縮排的狀態。從一行的開始位置，以指定的距離向右移動。 </p> <p id="sample2"> 這是只有「<em>3em</em>」首行縮排的狀態。從一行的開始位置，以指定的距離向右移動。 </p> <p id="sample3"> 這是只有「<em>5em</em>」首行縮排的狀態。從一行的開始位置，以指定的距離向右移動。 </p> </body> </html>

04.06 空白跟換行的設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>空白跟換行的設定</title> <style type="text/css">  </style> </head> <body> <p> <code> function resetRadio() { for(var i = 0; i < document.form1.type.length; i++) { if(document.form1.type[i].defaultChecked == true) document.form1.type[i].checked = true else document.form1.type[i].checked = false } } </code> </p> </body> </html>

04.07 不換行的設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>不換行的設定</title> <style type="text/css">  </style> </head> <body> <h1>禁止換行</h1> <h2>■ 普通狀態</h2> <p> 若對於white-space性質指定「nowrap」，在此範圍的內容則無法換行。而其中的連續半形空格、Tab與換行碼會變更成一個半行的空格。 </p> <h2>■ white-space：nowrap</h2> <p class="sample1"> 若對於white-space性質指定「nowrap」，在此範圍的內容則無法換行。而其中的連續半形空格、Tab與換行碼會變更成一個半行的空格。 </p> </body> </html>

04.08 全體設定成大寫或小寫 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <title>全體設定成大寫或小寫</title> <style type="text/css">  </style> </head> <body> <h1>大寫與小寫</h1> <h2>lowercase</h2> <p id="sample1"> CAPITALIZATION EFFECTS OF AN ELEMENT'S TEXT. </p> <h2>uppercase</h2> <p id="sample2"> capitalization effects of an element's text. </p> <h2>capitalize</h2> <p id="sample3"> capitalization effects of an element's text. </p> </body> </html>

CSS(Cascading Style Sheets) 串接樣式表上課講義