以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

    以下為本頁本文內容

    定義語法

    無論您是在 HTML 文件中定義體裁或是在另一份文件中定義,定義的語法都相同 每一個標題使用下面的格式來定義:

     

    h3 { font-family: Arial }

    這裡 h3 是標題之一 (在本例中,又正好是一個 HTML 語法 [譯者按:因為我們一直以H3作例子,而H3又 恰是 HTML 中的一個標題文字,所以我們一直以標題來當作用語,事實上體裁定義可以自由命名]), font-family: Arial 是一種體裁定義。體裁定義的語法(如前例)是特性和內含值,用冒號隔開 (屬性 這裡指的是一個元件能擁有的特殊質--好比字體、級數、顏色。 檔 內含值則是指定這個特性的特色--好比 新細明體、 24點、紅色) 參閱 CSS 屬性一覽表 裡面列出了完整的 CSS 屬性及其內含值 

    體裁定義可以同時指定多個屬性只要用分號格開即可:

    h3 { font-family: Arial; font-style: italic; color: green } 

    為了增加可讀性,可以寫成如下:

    h3  { font-family: Arial;      font-style: italic;      color: green }

    也可以在一個屬性中定義超過一個內含值,依順序寫入,用逗號隔開

    h3  { font-family: Arial, Helvetica, sans-serif;     font-style: italic;     color: green }

    上面 font-family 這個屬性提供了流覽器 數個內含可供選用,流覽器會依序尋找到可用的字體時,用該字體顯示文件。 第一個寫入的內含值是 (Arial) 表示我們最想用這個字體。 接下來的 (Helvetica) 則是找不到第一種字體時用這個字體來替代。 第三個 (sans-serif) 則是一般常見字體,建議您加在最後一項因為幾乎 所有電腦都有的字體。 如果前列的字體都不存在時,流覽器就會用自己內定的字體來顯示了。 (譯者按:例如中文網頁,那就可以寫成 font-family:華康細明,文鼎細明,新細明體 等的...)

    使用 classes 和 IDs 檔作是體裁定義中的一個元件 

    任何一個 HTML 標籤都可以拿來當作是一個體裁元件, 但有時您則想在您的定義中指定更多的體裁元件。例如: 假設您有一個大表格,包含了很多列,而且您想指定這些列包含了四種不同的顯示方式, 使用 <TR> 標籤當作是一個體裁元件時會限制您只能有一種體裁,那麼您所有列的內容看起來會一模一樣。 

    這時 classesIDs 就方便多了。 一旦您定義了 class 或 ID,您可以連結到任何一個 HTML 標籤中使用,不管這個標籤原本有什麼特色。 

    定義 class 的方法是取一個體裁元件的名稱(名稱之前加一個點) 然後加上體裁定義的屬性及內含值在大括號中就可以了:

    .periwinkle { color: #6699ff}

    一旦這個體裁元件加到了 HTML 文件之中 (參閱 應用在文件中), 您可以這樣子加到 HTML 標籤中使用:

    <STRONG class="periwinkle">粗體水藍色的文字</STRONG> 

    這就比單單使用 <STRONG> 標籤來的多樣化,前面的指令例子可以使 strong 標籤文字 periwinkle. 

    IDs 基本上使用方法相同,除了前置符號是 (#) 以外 : 

    #bright { font-weight: bolder; color: #00ff00 } 

    加到 HTML 標籤中像是:

    <P id="bright">這段文字不易閱讀</P>

    使用 ID 像是給體裁元件一個專用的名稱, 當您使用描述檔(script files)時,會變的很有用 (您無需各別指定每個元件)但是您要 But if you're sure you'll be sticking with style sheets and not venturing into scripting, 一般則是用 classes 來作為體裁元件 

    上一頁:連結外部定義檔 下一頁:特殊的定義方式

    以下為文章回應區

    同意轉載,不過麻煩看一下轉載需知

    給個回應
    姓名:
    佈落格網址:
      如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
    內容: