文字样式的变化

1、著作權所有 旗標出版股份有限公司第第 3 章章文字樣式的變化文字樣式的變化2本章提要本章提要p3-1 設定字體的大小、字型與顏色p3-2 設定字體的格式變化p3-3 可呈現特殊效果的文字標籤p3-4 特殊的標籤、字元與符號33-1 設定字體的大小、字型與顏色設定字體的大小、字型與顏色p在 HTML 語法中控制文字顯示的標籤非常多, 最常用的大概就是與字型相關的部分了, 除了可以調整字體的大小, 也可以設定使用何種字型, 並指定文字的顏色。43-1-1 設定字體大小設定字體大小p在 HTML 中專門用來處理字型的標籤是 , 這個標籤有許多屬性, 接下來將說明關於字體大小及其相關的設定。p雖然我們

2、可以設定網頁文件中的字體大小, 不過能設定的只是相對大小, 而非絕對大小。字的絕對大小, 一方面取決於螢幕解析度, 另一方面也和瀏覽器預設的字體大小有關。例如：開啟 IE 執行檢視檢視/字型字型命令, 可選擇不同大小的預設字體；而文件中的各種標籤, 便是以此為基準, 來設定文字的大小。5直接指定字體大小直接指定字體大小p 標籤中用來設定字體大小的屬性為 size, 其語法為:6直接指定字體大小直接指定字體大小psize_no 可用的數字為 1 至 7, 數值愈大字也愈大, 預設的數值為 3。例如:7直接指定字體大小直接指定字體大小pTIP: 與 兩者使用的數字與顯示字體大小的關係剛好相反,前者

3、數字愈大字體愈大, 後者數字愈大字體愈小。p如果未在最後加上 或是用 回復原來大小,則最後一個 的設定效力將持續影響後面文字的顯示,一直到再次遇到 或 標籤為止。8指定字體的相對大小指定字體的相對大小p除了可直接在 size 屬性上指定一固定的數值外, 也可使用加減數值的方式來指定, 例如上頁的例子可改成：9指定字體的相對大小指定字體的相對大小p所有的加或減都是以預設的字體大小 3 做為運算的基準, 例如 size=+2 就相當是size=5 (3+2), 而 -1 就是變成大小為 2 的字形 (3-1)。p若將文件各部分使用的字體大小都以相對方式設定好, 可以在維持整篇文字的比例關係下, 同

4、時對整篇文字做放大或縮小的效果。這時使用加減的設定就比較方便, 因為不需要一個個修改 的內容, 只要修改預設的字體大小即可。103-1-2 更改預設字體大小更改預設字體大小p用來更改預設字體大小的標籤是 , 同樣可指定 1 至 7 之間的數字：11p雖然我們可控制字體大小, 請注意, 這些設定都只是相對性的, 而非絕對性的。亦即可以設定這幾個字比那幾個字大或小多少, 但所有的字顯示出來的大小, 則是取決於瀏覽器的設定值。p像 IE 的檢視檢視/字型字型命令可調整網頁中的字體大小, 使用者可任意調整, 不受 HTML 語法的控制。3-1-2 更改預設字體大小更改預設字體大小12Headings

5、與與 font 的差異的差異p第 2 章介紹的 Headings () 標籤及 都有改變字體大小的功用, 我們將這兩組標籤的主要差異列於下面的表格中:13Headings 與與 font 的差異的差異p 標籤有 6 種字體大小, 分別是 h1h6, 標籤則有 7 種字體尺寸, 以 size 屬性來設定。有趣的是Headings 標籤是數字越大則字體越小, 而 標籤則是數字越大字體尺寸也就越大。p除了 7 號字以外, 字體大小相當於 的字體大小, 而 字體大小則相當於 的字體大小, 字體大小相當於 的字體.。14Headings 與與 font 的差異的差異p同樣的一段文章, 以 和 兩組標籤分

6、別比較時, 兩者的字體大小是一樣的, 但使用 標籤的字體會有明顯的加粗效果。p此外, 使用 這組標籤時, 在 . 之間的文字都會自成一行, 或者說這些文字算是自成一個段落。15Headings 與與 font 的差異的差異p而 . 則可用來修飾一行或一段內容中的一小段文字, 所以不會有換行的情形, 在同一行中用不同的size 屬性設定, 這些不同尺寸的字體還是會出現在同一行。p最後還有一點不同, 就是 文字的大小並不會受 的影響。163-1-3 指定文字字型指定文字字型p在 標籤中, face 這個屬性可以設定文字的字型。但是可以設定並不表示就能正確顯示出來, 還須視用戶端的電腦中是否有安裝該

7、網頁指定的字型。其語法如下：173-1-3 指定文字字型指定文字字型p字型名稱至少要指定一個, 為預防使用者的電腦上未安裝指定的字型, 可以在後面加上第二個字型名稱、第三個字型名稱., 名稱之間以逗號做區隔。p如此, 瀏覽器未找到第一個字型時, 會依序尋找第二個、第三個.來代替。例如：183-1-3 指定文字字型指定文字字型p請注意！如果所指定的字型, 使用者剛好都未安裝, 瀏覽器會使用預設的字型來顯示 標籤中的文字。193-1-4 指定字體的顏色指定字體的顏色p 標籤的 color 屬性可以設定文字的顏色, 不過僅限包含在 、 標籤之中的文字。如果要設定所有文字的顏色, 則適合用 標籤的 t

8、ext 屬性。 的使用方法如下：203-1-4 指定字體的顏色指定字體的顏色p我們來看看以下的例子:213-1-4 指定字體的顏色指定字體的顏色p製作網頁時所使用的顏色表示法有兩種, 一是文字表示法, 也就是上例所使用的方法(以 red 表示紅色)；而另一種則是十六進位表示法, 例如：223-1-4 指定字體的顏色指定字體的顏色p上例的 “#ff0000” 是紅色的十六進位表示法, 其意思是：p上述共 6 碼的十六進位數值, 代表 RGB 混合後所得到的顏色。使用十六進位表示法的好處在於, 對顏色的變化可以進行很細微的調整。233-1-5 設定本文文字的顏色設定本文文字的顏色p 標籤是用來標示

9、本文, 此處要介紹的是利用 標籤的 text 屬性, 來設定本文文字的顏色。其使用方法如下：243-1-5 設定本文文字的顏色設定本文文字的顏色p由於 標籤是用以標示本文, 因此利用 text 屬性設定文字顏色時, 會將全部的本文變更為同一個顏色。它的使用時機, 通常是為了配合背景顏色或圖片, 而修改本文的顏色。例如：253-1-5 設定本文文字的顏色設定本文文字的顏色263-1-5 設定本文文字的顏色設定本文文字的顏色p上例使用藍色當成背景, 若使用預設的黑色文字, 則會變得難以閱讀。改成白色的文字後, 就顯得清楚多了。因此, 適當地調整背景和文字的配色, 也可以讓網頁變得更加出色。pTIP

10、:text 屬性是對全部的本文做設定, 若是需要將針對個別的段落變換顏色, 則請使用 標籤來設定。273-2 設定字體的格式變化設定字體的格式變化p熟悉文書處理的讀者, 一定對粗體、斜體.等字體變化相當熟悉吧。運用這些字體變化, 可以幫我們強化文字的語氣, 或凸顯希望讀者注意的主題等。接下來就來看看有哪些標籤可以設定字體的變化。283-2-1 粗體字粗體字p利用 標籤可以表現粗體字 (Boldface) 效果, 讓想要凸顯的文字很容易被注意到。p 標籤的使用方式如下：293-2-1 粗體字粗體字p凡是放在 . 標籤之間的文字, 都會加上粗體字的效果, 可用於加強語氣的字句上, 例如：p使用時不

11、要忘了在最後一個粗體字後面加上結束標籤 , 否則後面所有的字就都會變成粗體字了。303-2-2 斜體字斜體字p利用 標籤可以表現斜體字 (Italics) 效果, 以強調該段文字。 標籤的使用方式如下：p 標籤也可以與 合併使用, 做出 粗體 + 斜體的效果, 例如：313-2-3 文字加底線文字加底線p利用 標籤可以將文字加上底線 (Underline), 通常會配合超連結使用, 可以讓瀏覽網頁的人很容易明白該段文字有超連結。 標籤的使用方式如下：323-2-3 文字加底線文字加底線p同樣地, 也可以將此標籤與 及 合併使用。例如：333-2-4 文字刪除線文字刪除線p當我們修改或更新了文章

12、的內容, 可以利用 標籤標示文字刪除線, 指出修正或更新的地方。 標籤的使用方式如下：343-2-4 文字刪除線文字刪除線p 標籤也可以與 、 等標籤合併使用。例如：p不過 標籤不建議和 標籤合併使用, 否則文字同時有刪除線和底線, 會使字體看起來太過混亂。353-3 可呈現特殊效果的文字標籤可呈現特殊效果的文字標籤p3-3-1 上標字p3-3-2 下標字p3-3-3 跑馬燈363-3-1 上標字上標字p上標文字 (Superscript) 會以略高於同一行文字的對齊方式排列, 同時字型略小於同一行文字。我們來看以下的例子：373-3-1 上標字上標字p一般最常使用到上標字的, 就是數學算式了

13、：p使用 標籤時, 若加上其他字體格式標籤 (如 粗體字、 斜體字等) 仍有效果。383-3-2 下標字下標字p相對於 標籤, 利用 標籤則可以做出下標字 (Subscript)。下標文字會以略低於同一行文字的對齊方式排列, 同時字型略小於同一行文字。請看下列的例子：393-3-3 跑馬燈跑馬燈p很多人利用 JavaScript 來做跑馬燈, 讓一串文字能由右至左循環地捲動, 不過在 IE 支援的擴充標籤中, 就有一項是用來在文件中顯示跑馬燈, 那就是 標籤。403-3-3 跑馬燈跑馬燈p標籤的用法很簡單, 只要直接將文字加到 標籤間即可, 例如：413-3-3 跑馬燈跑馬燈p這樣子就能使9/

14、20 新增波斯菊系列攝影集這個句子由視窗的最右邊開始向左邊移動, 消失後又會重覆地顯示。p 標籤還有很多屬性可使用, 以下先分別介紹各屬性的作用, 最後再以幾個實例看看其效果：42標籤屬性標籤屬性p 設定捲動的效果, 有 scroll、slide 及 alternate 三個屬性值可設定。預設值為 scroll, 即一般的捲動效果, 從一個方向進來, 另一個方向出去；slide 表示文字捲進來碰到邊界後, 就停下來不動了; alternate 的效果最有趣, 它會讓文字在限定的範圍中左右兩邊彈來彈去。43標籤屬性標籤屬性p 設定文字捲動的方向, 預設是由右到左的 left, 如果您要做由左跑到

15、右的反方向跑馬燈, 則可設定成 right。p 分別用來設定跑馬燈的高與寬, 可以單獨指定其一項, 也可以兩項都指定。? 可以直接輸入圖點數 (heigth=50 表示跑馬燈有五十個圖點高), 或是輸入跑馬燈的區域在視窗中所佔的畫面比例 (如 width=30%)。44標籤屬性標籤屬性p 設定跑馬燈捲動的次數, 預設值是 infinite, 表示不限定次數。您可以指定其他整數來設定跑的次數。p 這兩個屬性分別是用來設定跑馬燈捲動時每次移動的 步伐 大小(scrollamount), 以及需要多久移動一次的時間間隔(scrolldelay)。45步伐設大一點, 例如 scrollamount=“

16、50” (仍是以圖點為單位), 則跑馬燈文字會一下子就從右邊 跳 到左邊了；至於時間間隔則是以毫秒(ms)為單位。例如scrolldelay=500, 便是每 0.5 秒移動一次跑馬燈的文字。您可嘗試調整這兩個屬性值, 做出有趣的跑馬燈。p 這個屬性可以為跑馬燈設定背景顏色。標籤屬性標籤屬性463-3-3 跑馬燈跑馬燈p以下是一個使用 標籤的例子：473-3-3 跑馬燈跑馬燈p在第一個跑馬燈中, 除了使用 width 指定其寬度外, 在其前後也加上了 標籤, 使得顯示時跑馬燈只出現在畫面中間的一部分, 這也是常見的使用方式。如果文字比較多的時候, 可以將 width 設寬一點, 效果會比較好。

17、p後面三個跑馬燈都是嘗試設定不同屬性時的效果, 您可以加以修改看看能否做出更令自己滿意的效果。不過建議您在同一個頁面不要使用太多跑馬燈, 否則畫面看起來會像車水馬龍的大街一樣混亂。483-4 特殊的標籤、字元與符號特殊的標籤、字元與符號p編輯網頁時, 有些常用的樣式, 若每次都要重新設定格式實在有點麻煩；此外, 偶而會遇到需要運用特殊的字元 (如聲明版權的 (c)、符號 (如 X Y 的表示式) 等。雖然這樣的機會不高, 但萬一碰上時, 還真是令人頭痛。本節就要介紹如何使用這些特殊的字元、符號等。493-4-1 具有特殊含意的標籤具有特殊含意的標籤p在英文的文書處理中, 某些常用的註標、強調、

18、程式碼等內容, 習慣使用某些特殊的樣式或字體來表示或強調其顯示效果, 久而久之變成固定模式, 我們稱這些為具有特殊含意的標籤。p利用這類標籤可以方便地套用各種具有象微意義的樣式或字體, 不需要再花費心思調整各種屬性了。503-4-1 具有特殊含意的標籤具有特殊含意的標籤p這些標籤的用法和字型樣式的標籤都相同, 在此就不再一一詳述, 只以下表列出這些標籤：513-4-1 具有特殊含意的標籤具有特殊含意的標籤523-4-1 具有特殊含意的標籤具有特殊含意的標籤p現在我們把上表的標籤集合成以下的範例：533-4-1 具有特殊含意的標籤具有特殊含意的標籤p請注意, 如果您變更瀏覽器的預設字型時, 各標

19、籤實際的顯示效果也會有些許差異。543-4-2 附屬說明文字附屬說明文字p相信大家在成長過程中, 都是用注音符號來學習國字的唸法。在某些情況下, 像是要用到一般人都不太會唸的罕用字, 或是寫給識字不多的小朋友們看的文章時, 我們往往需要在字的旁邊加上注音, 但是要把這種用法搬到 HTML 文件中, 就有些累人了。553-4-2 附屬說明文字附屬說明文字p就以目前本書有提到的標籤而言, 可能有人會想到將注音和文字分兩行輸入, 並將注音的字體設小一點, 或許有人想乾脆做成圖片再放到網頁上, 效果可能比較好。不過 IE 支援一個標籤, 讓我們可以輕鬆解決這類問題。563-4-2 附屬說明文字附屬說明

20、文字p 標籤和之前介紹的標籤略有不同, 在使用時需搭配另一個輔助用的標籤 。讓我們來看一個實例：573-4-3 在在 HTML 文件中顯示符號文件中顯示符號p學了這麼多標籤後, 相信您已相當習慣 這一對符號。您是否想過, 萬一要在 HTML 文件顯示這 2 個符號時該怎麼辦？我們先來看一個例子：583-4-3 在在 HTML 文件中顯示符號文件中顯示符號p顯示結果竟然是在第一個大於符號之後的文字都不見了, 因為瀏覽器讀到 符號, 沒想到我們只是單純地想顯示這串簡單的文字而已。p類似這樣的情形不少, 問題在於某些特殊字元已經被 HTML 拿來當作標籤使用, 因此造成瀏覽器對網頁內容解讀錯誤。593-4-3 在在 HTML 文件中顯示符號文件中顯示符號p在 HTML 文件中, 必須使用特殊的字串來表示這些符號。例如要顯示 符號都要先將它們替換成下表所示的特殊語法才可以：603-4-3 在在 HTML 文件中顯示符號文件中顯示符號p像剛剛的例子改寫成這個樣子就能正常顯示了：p如果 HTML 文件是純中文, 也可考慮使用全形字來顯示這些符號, 這