「CSS 簡介」修訂間的差異
出自 MozTW Wiki
（→CSS 的完美發揮） |
Danielwang（對話 | 貢獻） |
||
| 行 1： | 行 1： | ||
| − | CSS 是個由[http://www.w3.org 全球資訊網協會] (W3C) 所定的互聯網標準。在新的互聯網標準中，HTML 4.01 | + | CSS 是個由[http://www.w3.org 全球資訊網協會] (W3C) 所定的互聯網標準。在新的互聯網標準中，HTML 4.01 只處理文件架構，並與文件格式完全分開，舉例來說，HTML 已沒有如 <font>、bgcolor、color 等排版格式的元素/屬性，只有如 <p> (段落）、<h1> (標題)、<address> (作者)、<li> (列表)等有「語意」的元素。（註：如果你現在用的教學站/書有教你用<font> 或 bgcolor 那它已經過時了）。 |
如今，網頁繪製的功能已移至語法簡單但功能強大，樣式選擇較為完善，與有彈性的 CSS 中。 | 如今，網頁繪製的功能已移至語法簡單但功能強大，樣式選擇較為完善，與有彈性的 CSS 中。 | ||
| 行 5： | 行 5： | ||
== 從複雜到簡單 == | == 從複雜到簡單 == | ||
| − | <p> | + | <p>過去要用粗體紅字表示「警告」你可能會這樣寫：</p> |
<pre class="code"> | <pre class="code"> | ||
| − | <b><font color="red">警告</font></b> | + | <b><font color="red">警告</font></b> <!-- {粗體 {字體 顏色＝紅色 {紅字} 字體} 粗體} --></pre> |
| − | |||
| − | <p> | + | <p>但現在你可以用</p> |
| − | <pre class="code"><strong style="color:red;">警告</strong> | + | <pre class="code"><strong style="color:red;">警告</strong> <!-- {重強調 樣式="顏色：紅色" {警告} 重強調} --></pre> |
| − | |||
<p>沒甚麼不同，不過如果你要用好幾個這類格式呢？</p> | <p>沒甚麼不同，不過如果你要用好幾個這類格式呢？</p> | ||
| 行 28： | 行 26： | ||
<pre class="code"><head> | <pre class="code"><head> | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | .title { background-color: black; } /* 一般標題，黑字 */ | + | .title { background-color: black; } /* 一般標題，黑字 */ |
.notice { background-color: #00c; color: white; } /* 通告，白字籃底 */ | .notice { background-color: #00c; color: white; } /* 通告，白字籃底 */ | ||
| − | .date { color: #ccc; } /* 日期，灰字 */ | + | .date { color: #ccc; } /* 日期，灰字 */ |
| − | .username { font-style:italic; } /* 用戶名，斜體 */ | + | .username { font-style:italic; } /* 用戶名，斜體 */ |
</strong> | </strong> | ||
</head> | </head> | ||
| 行 54： | 行 52： | ||
</table></pre> | </table></pre> | ||
| − | <p>如果以過去用 HTML 來同時做樣式與架構的編寫方法，上述之範例將會有 <font>、bgcolor、<u>、color | + | <p>如果以過去用 HTML 來同時做樣式與架構的編寫方法，上述之範例將會有 <font>、bgcolor、<u>、color 等等標示，使得原始碼複雜，難讀，與難偵錯。用 CSS 來做樣式可以讓 HTML 更為簡單與有效率，樣式也可以定義一次重覆使用，而網頁開發也會因偵錯簡化與再使用更快更省。</p> |
<p class="note">註:上述範例中的樣式定義也可以另存文字檔然後從 HTML 中引用（見[[將 CSS 用在 HTML上]]）</p> | <p class="note">註:上述範例中的樣式定義也可以另存文字檔然後從 HTML 中引用（見[[將 CSS 用在 HTML上]]）</p> | ||
| 行 75： | 行 73： | ||
</pre> | </pre> | ||
| − | + | 除了可以把任何元素設為文字層、區塊層、或表格的顯示模型 (display model) 外，CSS 還可以： | |
* 設定背景圖片的位置與是否橫向或縱向重複 | * 設定背景圖片的位置與是否橫向或縱向重複 | ||
* 設定文字底線與頂線 | * 設定文字底線與頂線 | ||
| 行 81： | 行 79： | ||
* 字行與字行間，或段落與段落間的空格 | * 字行與字行間，或段落與段落間的空格 | ||
* 隨意置放文字在任何地方（不用表格） | * 隨意置放文字在任何地方（不用表格） | ||
| − | * | + | * 還有其它許多的進階功能 |
== CSS 的完美發揮 == | == CSS 的完美發揮 == | ||
| 行 87： | 行 85： | ||
除了學那些可以做甚麼外，還要學正確的設計觀念。要注意樣式越複雜出錯的機率就越高，原始碼寫的越亂除錯就越困難。雖然 HTML 與 CSS 功能強，但它們基礎在於文件架構的邏輯，而你在設計時越有 discipline （紀律）越能發揮這些技術的潛能。 | 除了學那些可以做甚麼外，還要學正確的設計觀念。要注意樣式越複雜出錯的機率就越高，原始碼寫的越亂除錯就越困難。雖然 HTML 與 CSS 功能強，但它們基礎在於文件架構的邏輯，而你在設計時越有 discipline （紀律）越能發揮這些技術的潛能。 | ||
| − | {{link| | + | == 一些很酷的 CSS 功能 == |
| + | * [[CSS 選擇符|選擇符]] - 定義樣式的套用條件，如不同的 focus 與 blur 表單物件樣式、同元素被包在不同元素內時的樣式、依 href 等屬性定樣式等等 | ||
| + | |||
| + | {{link|CSS|CSS}} | ||
於 2005年5月20日 (五) 19:42 的修訂
CSS 是個由全球資訊網協會 (W3C) 所定的互聯網標準。在新的互聯網標準中，HTML 4.01 只處理文件架構，並與文件格式完全分開，舉例來說，HTML 已沒有如 <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 model) 外，CSS 還可以：
- 設定背景圖片的位置與是否橫向或縱向重複
- 設定文字底線與頂線
- 設定各種元素的上下左右框格的顏色、線條、與粗細
- 字行與字行間，或段落與段落間的空格
- 隨意置放文字在任何地方（不用表格）
- 還有其它許多的進階功能
CSS 的完美發揮
除了學那些可以做甚麼外，還要學正確的設計觀念。要注意樣式越複雜出錯的機率就越高，原始碼寫的越亂除錯就越困難。雖然 HTML 與 CSS 功能強，但它們基礎在於文件架構的邏輯，而你在設計時越有 discipline （紀律）越能發揮這些技術的潛能。
一些很酷的 CSS 功能
- 選擇符 - 定義樣式的套用條件，如不同的 focus 與 blur 表單物件樣式、同元素被包在不同元素內時的樣式、依 href 等屬性定樣式等等
‧返回上一頁: CSS
