建立及套用樣式

重要:  本文係由機器翻譯而成,請參閱免責聲明。本文的英文版本請見這裡,以供參考。

樣式是一組定義於階層式樣式表 (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">

頁面頂端

建立樣式

您可以從頭開始建立新的樣式,或複製現有的樣式。不論是哪一種方式,[新樣式] 對話方塊都可讓您定義有關新樣式的所有事項,包括選取器類型、屬性以及包含該樣式的樣式表。如果想要建立新的內置樣式,也可以使用 [CSS 內容] 工作窗格。如果要在網頁中快速建立及套用新的樣式,而不想設定樣式的任何屬性,還可以使用 [樣式] 工具列。

使用 [新增樣式] 對話方塊來建立樣式

  1. 請執行下列其中一項:

    • 若要新增樣式至外部 CSS,請開啟 .css 檔。

    • 若要新增樣式至內部 CSS,請開啟網頁。

    • 若要新增內置樣式,請開啟網頁,然後選取您要設定樣式的內容。

  2. 請執行下列其中一項:

    • 建立新樣式    從下列其中一個位置,按一下 [新樣式][套用樣式] 工作窗格、[管理樣式] 工作窗格、[樣式] 工具列或 [格式] 功能表。

    • 複製現有樣式    請執行下列其中一項:

      • [套用樣式] 工作窗格中,指向您要複製的樣式,按一下出現的向下箭號,然後選取 [新樣式複本]

      • [管理樣式] 工作窗格或 [CSS 內容] 工作窗格中,以滑鼠右鍵按一下您要複製的樣式,然後選取 [新樣式複本]

  3. [新樣式] 對話方塊中,進行下列作業:

使用這個

作用

[選取器]

  • 若要使用類別選取器,請先輸入句號 (.) 後面再接著唯一名稱。

  • 若要使用識別碼選取器,請先輸入數字符號 (#) 後面再接著唯一名稱。

    附註: 除非您是建立複雜的選取器,否則類別與識別碼選取器名稱不能包含空格。

  • 若要使用元素選取器,請輸入 HTML 元素的名稱,或按一下 [選取器] 下拉式方塊並選取某個元素名稱。

  • 若要使用內置選取器,請選取 [內置樣式]

  • 若要建立複雜選取器,請輸入選取器。

定義於

選取下列其中一項:

  • [本頁] 可將新樣式新增至目前網頁的內部 CSS。

  • [新樣式表] 可將新樣式新增至新的空白外部 CSS。

  • [現有的樣式表] 可將新樣式新增至指定的現有外部 CSS。

套用新樣式到文件選取範圍

可將樣式套用到目前網頁中目前的選取範圍。

URL

如果在 [定義於] 中選取了 [現有的樣式表],請輸入 .css 檔的 URL。

[類別]

請選取下列任一項,然後設定出現在對話方塊右邊的屬性:

提示: [類別] 清單中以粗體顯示的類別含有設定內容。

  • [字型] 可設定字型屬性,包括大小、粗細、裝飾和色彩。

  • [區塊] 可設定行高、文字對齊方式、文字縮排,以及文字間距。

  • [背景] 可設定背景色彩以及背景圖像屬性。

  • [框線] 可設定框線與其屬性。

  • [方塊] 可設定方塊以及區塊階層元素的邊框距離與邊界屬性。

  • [位置] 可設定方塊以及區塊階層元素的尺寸與位置。

  • [版面配置] 可設定方塊以及區塊階層元素的可視性、浮動與換行行為、裁剪與其他版面配置屬性。

  • [清單] 可設定清單元素的屬性,包括類型、位置與圖像。

  • [表格] 可設定表格相關元素的屬性,包括間距、版面配置、框線屬性。

附註: 您也可以將樣式從某個 CSS 複製到另一個 CSS。在 [管理樣式] 工作窗格中,從含有您要之樣式的 CSS 將該樣式拖曳到複製目的地 CSS 的名稱上,或拖曳到目標 CSS 的樣式清單中的某一點。

使用 [CSS 屬性] 工作窗格中建立的內嵌樣式

  1. 在網頁的 [設計] 檢視或 [程式碼] 檢視中,選取您要加上內置樣式的內容。

  2. [CSS 內容] 工作窗格的 [套用的規則] 底下,以滑鼠右鍵按一下您要套用內置樣式的選取器,或者,如果出現 [(不套用規則)],請以滑鼠右鍵按一下 [套用的規則] 底下的任何地方,然後按一下快顯功能表上的 [新增內置樣式]

  3. [CSS 內容] 底下,設定您要的屬性。

建立及套用新的未定義樣式

您可以建立樣式並將樣式套用至項目,然後稍後再定義樣式。例如,如果您要使用設計工具建立網頁外觀,可以將未定義的樣式套用至網頁中的項目,稍後再使用設計工具來定義樣式。

  1. 在網頁的 [設計] 檢視或 [程式碼] 檢視中,選取您要套用樣式的項目。

  2. 若要建立及套用新樣式,但不定義任何屬性,請在 [樣式] 工具列的 [類別][識別碼] 方塊中,輸入新樣式的唯一名稱。

頁面頂端

套用樣式

您可以使用 [套用樣式] 工作窗格、[管理樣式] 工作窗格或 [樣式] 工具列來套用內部和外部階層式樣式表 (CSS) 中的類別樣式或識別碼樣式。[套用樣式] 工作窗格可讓您將多個樣式套用至某個選取範圍,而 [管理樣式] 工作窗格與 [樣式] 工具列則只能讓您套用一個樣式。[樣式] 工具列可讓您在網頁中快速命名及套用新的未定義樣式。

您並不需要套用使用元素做為選取器的樣式 (元素樣式),因為這種樣式會自動套用至網頁中的相關聯元素。[套用樣式] 工作窗格會在 [內容選取器] 底下列出元素樣式,而 [管理樣式] 工作窗格則會在樣式名稱旁邊顯示一個藍點。[樣式] 工具列並不會列出元素樣式。

  1. 在網頁的 [設計] 檢視或 [程式碼] 檢視中,選取您要套用樣式的項目。

  2. 請執行下列其中一項:

    • 套用多個現有樣式    在 [套用樣式] 工作窗格中,按住 CTRL 鍵同時按一下您要的每一個樣式。

    • 套用單一現有樣式    請執行下列其中一項:

      • [套用樣式] 工作窗格中,按一下您要的類別樣式或識別碼樣式。

      • [樣式] 工具列的 [類別][識別碼] 下拉式方塊中,按一下您要的樣式。

      • [管理樣式] 工作窗格中,以滑鼠右鍵按一下您要的類別樣式或識別碼樣式,然後按一下快顯功能表上的 [套用樣式]

    • 建立及套用新的樣式而不定義任何屬性    在 [樣式] 工具列的 [類別][識別碼] 方塊中,輸入新樣式的唯一名稱。

頁面頂端

附註: 機器翻譯免責聲明︰本文係以電腦系統翻譯而成,未經人為介入。Microsoft 提供此等機器翻譯旨在協助非英語系使用者輕鬆閱讀 Microsoft 產品、服務及技術相關內容。基於本文乃由機器翻譯而成,因此文中可能出現詞辭、語法、文法上之錯誤。

擴展您的技能
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×