共用方式為


樣式概觀

樣式是一組設定格式的特性,定義於階層式樣式表 (CSS) 中。您可以將樣式套用到網頁的內容中,包括文字 (個別字元或整個段落)、圖形、圖層、表格,甚至整個網頁的本文。樣式可讓您有效率地重複使用一組屬性及值,而不需在每次要使用時再重新設定屬性。

CSS 的樣式以下列方法重疊顯示:全域樣式規則會套用到 HTML 元素,除非由本機樣式規則覆寫。一般而言,本機樣式規則比一般樣式規則優先採用。例如,網頁中內部 CSS 所定義的樣式會覆寫外部 CSS 所定義的樣式。同樣地,定義在網頁之單一 HTML 元素內的內嵌 CSS,會覆寫為網頁內部或外部 CSS 中相同元素所定義的所有樣式。即使套用了本機樣式,不與本機 CSS 樣式規則相抵觸的全域樣式規則部分,仍會套用到 HTML 元素。

樣式類型

位於外部或內部 CSS 中可為類別、元素或識別碼選取器的樣式。樣弌由其規則集所定義,其中包含選取器,以及一個出現在一組大括號 ({ }) 之間的屬性宣告區塊。各樣式類型可由其選取器與其他樣式類型區別;類別型樣式的選取器前會有句點 (.);識別碼型樣式的選取器前會有井號 (#);而元素型樣式的選取器只包含 HTML 元素,如 H1。

類別選取器

類別選取器可用以定義要用於網頁中一或多個項目上的一組屬性。若要修改樣式,可以編輯樣式的規則集,之後您只要套用該樣式就會自動反應所做的變更。

在下列範例中,"introduction" 為樣式的選取器,"font-size: small" 為屬性宣告,之後接著第二個屬性宣告。

類別選取器規則集範例

.introduction {font-size: small; color: white}

套用至 <p> 標籤的類別選取器範例

<p class="introduction">

元素選取器

元素選取器可用以定義特定 HTML 元素的每個例項要在網頁中使用的一組屬性。例如,若要在網頁的所有段落 (以 <p> 標籤包圍的內容) 周圍建立 25 像素的邊界,您可以建立一個將 p 元素作為選取器的元素,並包含邊界屬性的宣告,如下列程式碼所示。

元素選取器的規則集範例

p { margin-left: 25px; margin-right: 25px }

識別碼選取器

針對從一或多個網頁之所有其他內容區別出來的單一項目或項目的區塊,若要為其定義一組屬性,即可使用識別碼選取器。當您想將樣式套用到網頁的單一 HTML 元素時,請使用識別碼選取器。

識別碼型樣式規則集範例

#footer {background-color: #CCCCCC; margin: 15px}

套用至 <p> 標籤的識別碼型樣式範例

<p id="footer">

內嵌樣式

當您想要為網頁中的單一項目或項目的單一區塊定義一組屬性,且不想重複使用該樣式時,即可使用內嵌樣式。內嵌樣式 (或內嵌 CSS) 與識別碼、元素及類別選取器不同,這些類型的樣式會將屬性定義在網頁的標題區段 (內部 CSS) 或外部 CSS 檔中,但內嵌樣式則是將屬性直接定義在要使用該樣式的 HTML 元素中。

內嵌樣式的規則集範例

<p style="font-weight: bold; font-style: italic; color: #FF0000">

請參閱

概念

階層式樣式表概觀

建立樣式

修改樣式