舊文件

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

「CSS 簡介」修訂間的差異

出自 MozTW Wiki

CSS 的完美發揮
行 1: 行 1:
CSS 是個由[http://www.w3.org 全球資訊網協會] (W3C) 所定的互聯網標準。在新的互聯網標準中,HTML 4.01 只處理文件架構並與文件格式完全分開,舉例來說,它已沒有如 <font>、bgcolor、color 等排版格式的元素/屬性,只有如 <p> (段落)、<h1> (標題)、<address> (作者)、<li> (列表)等「語意」元素。(註:如果你現在用的教學站/書有教你用<font> 或 bgcolor 那它已經過時了)。
+
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>過去要用粗體紅字表示「警告」你可能會這樣寫:</p>
 
<pre class="code">
 
<pre class="code">
&lt;b>&lt;font color="red">警告&lt;/font>&lt;/b>
+
&lt;b>&lt;font color="red">警告&lt;/font>&lt;/b> &lt;!-- {粗體 {字體 顏色=紅色 {紅字} 字體} 粗體} --></pre>
(粗體)(字體 顏色=紅色)紅字((*字體)(*粗體)</pre>
 
  
<p>但現在你要用</p>
+
<p>但現在你可以用</p>
<pre class="code">&lt;strong style="color:red;">警告&lt;/strong&gt;
+
<pre class="code">&lt;strong style="color:red;">警告&lt;/strong&gt; &lt;!-- {重強調 樣式="顏色:紅色" {警告} 重強調} --&gt;</pre>
(重強調 樣式="顏色:紅色")警告(*重強調)</pre>
 
  
 
<p>沒甚麼不同,不過如果你要用好幾個這類格式呢?</p>
 
<p>沒甚麼不同,不過如果你要用好幾個這類格式呢?</p>
行 28: 行 26:
 
<pre class="code">&lt;head&gt;
 
<pre class="code">&lt;head&gt;
 
&lt;style type="text/css"&gt;
 
&lt;style type="text/css"&gt;
   .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; }                 /* 用戶名,斜體 */
 
&lt;/strong&gt;
 
&lt;/strong&gt;
 
&lt;/head&gt;
 
&lt;/head&gt;
行 54: 行 52:
 
&lt;/table&gt;</pre>
 
&lt;/table&gt;</pre>
  
<p>如果以過去用 HTML 來同時做樣式與架構的編寫方法,上述之範例將會有 &lt;font&gt;、bgcolor、&lt;u&gt;、color 等等標示,使得原始碼複雜難讀與難偵錯。用 CSS 來做樣式可以讓 HTML 更為簡單與有效率,樣式也可以定義一次重覆使用,而網頁開發也會因偵錯簡化與再使用更快更省。</p>
+
<p>如果以過去用 HTML 來同時做樣式與架構的編寫方法,上述之範例將會有 &lt;font&gt;、bgcolor、&lt;u&gt;、color 等等標示,使得原始碼複雜,難讀,與難偵錯。用 CSS 來做樣式可以讓 HTML 更為簡單與有效率,樣式也可以定義一次重覆使用,而網頁開發也會因偵錯簡化與再使用更快更省。</p>
  
 
<p class="note">註:上述範例中的樣式定義也可以另存文字檔然後從 HTML 中引用(見[[將 CSS 用在 HTML上]])</p>
 
<p class="note">註:上述範例中的樣式定義也可以另存文字檔然後從 HTML 中引用(見[[將 CSS 用在 HTML上]])</p>
行 75: 行 73:
 
</pre>
 
</pre>
  
除了可以把任何元素設為文字層、區塊層、或表格的顯示模式 (display mode) 外,CSS 還可以:
+
除了可以把任何元素設為文字層、區塊層、或表格的顯示模型 (display model) 外,CSS 還可以:
 
* 設定背景圖片的位置與是否橫向或縱向重複
 
* 設定背景圖片的位置與是否橫向或縱向重複
 
* 設定文字底線與頂線
 
* 設定文字底線與頂線
行 81: 行 79:
 
* 字行與字行間,或段落與段落間的空格
 
* 字行與字行間,或段落與段落間的空格
 
* 隨意置放文字在任何地方(不用表格)
 
* 隨意置放文字在任何地方(不用表格)
* 還有好多好多的進階功能
+
* 還有其它許多的進階功能
  
 
== CSS 的完美發揮 ==
 
== CSS 的完美發揮 ==
行 87: 行 85:
 
除了學那些可以做甚麼外,還要學正確的設計觀念。要注意樣式越複雜出錯的機率就越高,原始碼寫的越亂除錯就越困難。雖然 HTML 與 CSS 功能強,但它們基礎在於文件架構的邏輯,而你在設計時越有 discipline (紀律)越能發揮這些技術的潛能。
 
除了學那些可以做甚麼外,還要學正確的設計觀念。要注意樣式越複雜出錯的機率就越高,原始碼寫的越亂除錯就越困難。雖然 HTML 與 CSS 功能強,但它們基礎在於文件架構的邏輯,而你在設計時越有 discipline (紀律)越能發揮這些技術的潛能。
  
{{link|技術傳教專案|CSS}}
+
== 一些很酷的 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 等屬性定樣式等等
個人工具