Friday, January 27, 2006

三種設定網頁CSS樣式的方法

一、行內樣式 Inline Style
直接把某一段文字的樣式標示在<p>標記中。
例如: 
<p style="font-size: 25pt; font-weight: bold; font-style: italic; color: red;">這一段文字已加入行內樣式了</p>
<p>下一段文字則完全不受影響</p>

出來的結果為:

這一段文字已加入行內樣式了

下一段文字則完全不受影響
  • 影響範圍只限它所加入的tag
  • 一般應避免使用行內樣式
  • 在建立樣式表前,可先利用行內樣式來測試結果,但要記得最後將tag中的style屬性完全移除。以免日後找不到為何樣式發生問題。
  • 行內樣式會蓋過嵌入樣式及樣式表所定義的樣式。

二、嵌入樣式 Embedded Style
將樣式表置於XHTML文件的<head></head>之間
例如:
<head>
....(略)
<style type="text/css">
/* <![CDATA[ */
h1 {font-size: 16pt; font-weight:bold;}
p {color:blue;}
/* ]]> */
</style>
</head>
  • 嵌入樣式影響範圍只限於包含此樣式的頁面
  • 若設計的版型很複雜,較容易的做法是先把樣式嵌入在文件的的head中,完成後再移到主樣式表中
  • 頁面樣式會蓋過樣式表所定義的樣式。
三、連結樣式表
只要在每個XHTML網頁的標題中加入以下一行,便可以將樣式表套用到許多XHTML網頁中。
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
其中media設定為screen,表示是透過螢幕(即網頁)來觀看內容。
所以還可以加一行作為列印時所用的樣式表:
<link href="my_style_sheet_print.css" media="print"
rel="stylesheet" type="text/css" />


參考character entity