排版樣本

毛慶禎
輔仁大學圖書資訊學系

排版樣本 (Style Sheet) 的作用是定義網頁中文字段落的顯示樣式, 即區隔文件的結構與顯示。結構定義在HTML裡, 樣式定義在另外一個地方。不支援樣式的瀏覽器, 也可以讀取純的HTML文件

全球資訊網論壇(W3C)定義串接式排版樣本 (Cascading Style Sheet, CSS)。字型、顏色、背景、邊界、留白、字樣等, 都可以被定義。

國際標準組織為標識語言定義了另一個排版樣本, Documenta Style Semantics and Specification Language。

排版樣本有三種使用方式:

行內 Inline Style
在標籤裡加入排版樣式屬性
內嵌式 Embedding
在檔頭區中設定排版樣式屬性
連結式 Linking
將排版樣式獨立成一個檔案

串接式排版樣本交互運用這三種方式, 建立完整的排版樣本。

行內排版樣本的優先權最高, 其次為內嵌式排版樣本。希望有較高的優先權時, 加上

!important

即可。

行內 Inline Style

<TAG STYLE="PROPERTY:VALUE">...</TAG>

<P STYLE="font-size:25pt; color:red; line-height:50pt">

祗適用於該特定的標籤。

TAG
HTML的標籤
STYLE
有多個排版樣式設定時, 以分別區隔
PROPERTY
排版樣式的名稱
VALUE
排版樣式的設定值

內嵌式 Embedding

有三種處理模式:

STYLE
CLASS
ID

STYLE

放在檔頭區, 供文件本體使用。

<STYLE TYPE="text/css">

</STYLE>

<STYLE TYPE="text/css">

</STYLE>

用來防止無支援CSS的瀏覽器發生錯誤。

H2與H3標籤的屬性值, 都改為設定後的值。

CLASS

另外給CLASS名稱, 藉以控制標籤的值。

<STYLE TYPE="text/css">

</STYLE>

HTML的標籤可以視情況, 選擇不同的樣式; 沒有被樣式定義的部份, 仍依照原來的格式呈現。

ID

<STYLE TYPE="text/css">

</STYLE>

連結式 Linking

<LINK REL="stylesheet" TYPE="text/css" HREF="URL">

通常把排版樣式延伸檔名定義為 .css , 以示區隔。

排版樣式檔：linkx.css 內容如下

.type2 {font-size:20pt; color:green; text-decoration:underline}
#case1 {font-family:"華康POP1體W5"}
#case2 {font-family:"華康中黑體"}

<HTML>
<HEAD>
<TITLE>呼叫排版樣式檔</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="linkx.css">
</HEAD>
<BODY>
<H2 CLASS="type2">HTML 4.0教學範例</H2>
<BR>
<H2 CLASS="type2" ID="case1">HTML 4.0教學範例</H2>
<BR>
<H2 CLASS="type2" ID="case2">HTML 4.0教學範例</H2>
</BODY>
</HTML>

屬性相同的網頁, 可以採用相同的連結式排版樣本, 清楚的提醒讀者其現在的位置。

應用

排版樣本的類型, 可以歸屬於三類, 交替應用, 才能夠發揮其效用:

不變的, stylesheet
不論讀者的位置為何, 強迫其接受此排版樣本。
內定的
讀者可以行決定是否採用該排版樣本。
變動的, alternative sytlesheet
由讀者挑選喜歡的排版樣本。

排版樣本檔案是不變的, 永遠留在某個地方, 一旦在HTML的內文區指定了它, LINK, 就成為內定的排版樣本。

輔仁大學圖書資訊學系毛慶禎
mao@blue.lins.fju.edu.tw

http://www.lins.fju.edu.tw/~mao/wpd/style.htm
2000/05/19