以下為本站文章分類清單

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

以下為本頁本文內容

特殊的定義方式

更多的 CSS 體裁定義加到您的 HTML 文件中時,有幾個方式可以使 CSS 變的簡單而功能強大。

使用關連式體裁元件

您可以嵌套標籤在一個體裁元件中指定某種特殊體裁屬性

strong em { color: red }

這樣子的體裁元件稱為 contextual selector,因為只有當 <EM> 標籤加在 <STRONG> 標籤之後,文字才會是紅色的。換言之標籤被嵌套住了。

<STRONG>這裡是粗體字, <EM>粗體、斜體紅色</EM>.</STRONG> 
<EM>這段只有斜體了</EM>

群組體裁元件

您也可以群組體裁元件,那樣可以節省 style sheet 的長度避免冗長的語法,只要用逗號 將體裁元件隔開即可:

h1, strong em, td
       { 
       font-family: Arial;
       color: blue;
      }

現在所有 (<H1>, <EM> 加在 <STRONG>之後的, 還有 <TD>) 都使用同一種體裁規格如 (blue, Arial text)。 當然這些只是附加在原本該標籤在 HTML 文件中的定義上,如: <H1> 仍保有原來標籤代表的字的級數, <STRONG> 也仍是粗體字。 任何不包含在體裁元件定義過的標籤中的文字是不受影響的 

如果您想要在這些體裁元件中加入更多的規格,再定義即可

h1, strong em, td
       { 
      font-family: Arial;  
      color: blue  
      }  

 h1
       {
       font-style: italic
       }

 

現在所有標籤都是藍色 Arial 字體, 但 <H1> 則另有斜體效果。 

速記編碼

您可以使用速記編碼方式來定義體裁元件,例如:

em {font: 12pt/14pt bolder Arial, Helvetica} 

是下列的速記法 

em
       {
       font-family: Arial, Helvetica; 
      font-size: 12pt;  
      line-height: 14pt;  
      font-weight: bolder  
      }  

(注意: 有些屬性如行距還沒正式宣告可用。參閱 CSS 屬性一覽表 )

使用 <ANCHOR> 虛擬體裁元件

虛擬體裁元件(Pseudoclasses) 可以擴充 CSS 用以包含那些不屬於 HTML 定義的規格,但是流覽器可以支援的語法。像是: <ANCHOR> 標籤並沒有 link, active, 或 visited 這些屬性, 但流覽器支援不同連結色彩,您可以定義 <ANCHOR> 虛擬體裁元件用冒號相連

A:link {color: red} 
A:visited {color: blue}  
A:active {color: white}  

這樣的話未造訪的連結文字是紅色的 已經流覽過的連結文字是藍色的 當按下滑鼠時文字會變成白色 參閱 W3C recommendation 獲得更多有關 <ANCHOR> 虛擬體裁元件

上一頁: 定義的語法 下一頁:實例演練

以下為文章回應區

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

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