舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

CSS 簡介

出自 MozTW Wiki

於 2005年5月10日 (二) 18:48 由 Kourge對話 | 貢獻 所做的修訂 (不是 </strong>,是 </style>,tag 給 close 錯了)

CSS 是個由全球資訊網協會 (W3C) 所定的互聯網標準。在新的互聯網標準中,HTML 4.01 只處理文件架構並與文件格式完全分開,舉例來說,它已沒有如 <font>、bgcolor、color 等排版格式的元素/屬性,只有如 <p> (段落)、<h1> (標題)、<address> (作者)、<li> (列表)等「語意」元素。(註:如果你現在用的教學站/書有教你用<font> 或 bgcolor 那它已經過時了)。

如今,網頁繪製的功能已移至語法簡單但功能強大,樣式選擇較為完善,與有彈性的 CSS 中。

從複雜到簡單

過去你可能這樣寫:

<b><font color="red">警告</font></b>
(粗體)(字體 顏色=紅色)紅字((*字體)(*粗體)

但現在你要用

<strong style="color:red;">警告</strong>
(重強調 樣式="顏色:紅色")警告(*重強調)

沒甚麼不同,不過如果你要用好幾個這類格式呢?

<head>
<style type="text/css">
  strong { color: red; }
</style>
</head>
:
<strong>警告</strong>

這裡我們單純對 HTML 元素(標籤)做樣式定義。我們也可以對用歸類的方式定樣式

<head>
<style type="text/css">
  .title { background-color: black; } /* 一般標題,黑字 */
  .notice { background-color: #00c; color: white; } /* 通告,白字籃底 */
  .date { color: #ccc; } /* 日期,灰字 */
  .username { font-style:italic; } /* 用戶名,斜體 */
</strong>
</head>
:
<table>
  <tr>
    <td class="notice"><a href="view?384548">WebMail 維護通告 (10/05/99)</a></td>
    <td class="username">管理員</td>
    <td class="date">10/5/2004</td>
  </tr>
  <tr>
    <td class="title"><a href="view?384555">我有問題</a></td>
    <td class="username">珊珊</td>
    <td class="date">10/10/2004</td>
  </tr>
  <tr>
    <td class="title"><a href="view?384552">我的 iPod 忘了放在 HSS 063 裡,有人看到嗎?</a></td>
    <td class="username">志強</td>
    <td class="date">10/07/2004</td>
  </tr>
  :
</table>

如果以過去用 HTML 來同時做樣式與架構的編寫方法,上述之範例將會有 <font>、bgcolor、<u>、color 等等標示,使得原始碼複雜難讀與難偵錯。用 CSS 來做樣式可以讓 HTML 更為簡單與有效率,樣式也可以定義一次重覆使用,而網頁開發也會因偵錯簡化與再使用更快更省。

註:上述範例中的樣式定義也可以另存文字檔然後從 HTML 中引用(見將 CSS 用在 HTML上

強大的功能

知前提到 HTML 與格式分開,那一些本身有預設格式的元素呢(像 <strong>、<h1>)?CSS 提供了可以 override 預設格式的功能,如以下:

<style type="text/css">
  /* small navigation (小型瀏覽列) */
  ul.snav li { display: inline; } /* 包括在 <ul class="snav"> 的 <li> 都是以文字層顯示 */
</style>
:
<ul class="snav">
<!-- 以下全顯示在一行文字內 -->
  <li><a>隱私權政策</a></li>
  <li><a>服務條款</a></li>
  <li><a>使用規範</a></li>
</ul>

除了可以把任何元素設為文字層、區塊層、或表格的顯示模式 (display mode) 外,CSS 還可以:

  • 設定背景圖片的位置與是否橫向或縱向重複
  • 設定文字底線與頂線
  • 設定各種元素的上下左右框格的顏色、線條、與粗細
  • 字行與字行間,或段落與段落間的空格
  • 隨意置放文字在任何地方(不用表格)
  • 還有好多好多的進階功能

CSS 的完美發揮

除了學那些可以做甚麼外,還要學正確的設計觀念。要注意樣式越複雜出錯的機率就越高,原始碼寫的越亂除錯就越困難。雖然 HTML 與 CSS 功能強,但它們基礎在於文件架構的邏輯,而你在設計時越有 discipline (紀律)越能發揮這些技術的潛能。

個人工具