以下為本站文章分類清單

 


中文版(簡體)說明

以下為本站側欄內容

以下為本頁本文內容

特殊的定義方式

更多的 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> 虛擬體裁元件

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

以下為文章回應區

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

divider

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