「CSS 簡介」修訂間的差異
出自 MozTW Wiki
Danielwang（對話 | 貢獻） 小 （次標題） |
（不是 </strong>，是 </style>，tag 給 close 錯了） |
||
| 行 19： | 行 19： | ||
<style type="text/css"> | <style type="text/css"> | ||
strong { color: red; } | strong { color: red; } | ||
| − | </ | + | </style> |
</head> | </head> | ||
: | : | ||
於 2005年5月10日 (二) 18:48 的修訂
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 （紀律）越能發揮這些技術的潛能。
