共用方式為


套用樣式面板

您可以使用 [套用樣式] 面板套用、移除、修改、重新命名及刪除樣式;附加或卸離外部階層式樣式表 (CSS);選取樣式的所有例項;以及移至含有樣式規則集的程式碼。[套用樣式] 面板會根據樣式的規則顯示每個樣式,而讓您得以從樣式的外觀快速找出所要使用的樣式。

當您開啟網頁時,[套用樣式] 面板會列出網頁的階層式樣式表 (CSS) 中所定義之所有樣式,包括外部、內嵌與內部 CSS。類別與識別碼選取器會出現在含有該樣式之外部 .css 檔案的名稱下;若該樣式位於內部 CSS 中,則會出現在 [本頁] 中。元素選取器會以相同的方式進行組織,但會出現在類別與識別碼選取器清單下名為 [內容選取器] 的個別標題下。您可以將面板設定為列出所有樣式,或將其限定為僅列出目前的網頁或網頁中目前選取範圍所使用的樣式。無論選取的選項為何,元素選取器與內嵌選取器都只會在您將游標置於使用該樣式的內容上或在您選取使用該樣式的內容時,才會出現在面板中。

您可以為 [套用樣式] 面板中所顯示的樣式清單進行排序,也可以限定清單僅顯示目前的網頁或目前選取範圍所使用的樣式。若有某個樣式在面板的白色背景中難以檢視,可以選取一個色彩並將其顯示於面板中,作為不具背景屬性之樣式的背景。

tip note秘訣:

若要使用指標在浮動視窗中暫時顯示某個樣式的所有規則,請在 [套用樣式] 面板中指向該樣式。

套用樣式面板

Cc295403.7d746eac-1e02-4837-984d-904cf410e301(zh-tw,Expression.40).png

Cc295403.edef891a-6b74-4192-8f7f-5079614b9112(zh-tw,Expression.40).png

[清除樣式] 可從目前的選取項目中移除所有類別選取器與內嵌樣式。

Cc295403.957413f8-28e0-4dc7-a144-0598679350b9(zh-tw,Expression.40).png

連結自目前網頁的外部 CSS 檔案。

Cc295403.13f14333-cc5f-457a-863b-ccd449500941(zh-tw,Expression.40).png

匯入目前網頁的外部 CSS 檔案。

Cc295403.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(zh-tw,Expression.40).png

[本頁] 可列出內部 CSS 與匯入的外部 CSS 檔案中之類別與識別碼選取器。

Cc295403.9c26150c-cd15-44bb-bf69-ff72093d3d71(zh-tw,Expression.40).png

目前網頁內部 CSS 中所定義的樣式。

Cc295403.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(zh-tw,Expression.40).png

目前的選取範圍所使用的樣式周圍會出現實線的矩形框線。

Cc295403.3ca58ea1-12d2-4379-9b89-e415efd03ca4(zh-tw,Expression.40).png

包含於連結的外部 CSS 檔案 (events.css) 中之類別與識別碼選取器。

Cc295403.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(zh-tw,Expression.40).png

每種樣式均有下拉式功能表可執行多項樣式型工作。請指向樣式然後按一下箭號,或以滑鼠右鍵按一下樣式。

在 [套用樣式] 面板中每個樣式旁所顯示的圖示,可識別樣式的類型以及樣式是否用於目前的網頁中。

套用樣式面板圖示

圖示 描述
Cc295403.d2d37440-9664-4050-a58e-7fee8ea63242(zh-tw,Expression.40).png

識別碼選取器旁會出現紅點。

Cc295403.2374f498-4295-4fe3-be55-7d154c89142a(zh-tw,Expression.40).png

類別選取器旁會出現綠點。

Cc295403.c983e0ca-2bc5-409e-b8fc-834785293639(zh-tw,Expression.40).png

元素選取器旁會出現藍點。

Cc295403.376aebaa-ab0c-430f-a82d-6f13d6125571(zh-tw,Expression.40).png

內嵌樣式旁會出現黃點。

Cc295403.e67de9f1-9a1a-46ce-8629-06280b678e1b(zh-tw,Expression.40).png

目前的網頁中所使用的樣式會以圈起來的彩色點標示。

Cc295403.040e2329-921d-46af-9cba-9f280c15d703(zh-tw,Expression.40).png

匯入的外部階層式樣式表旁會出現 @ 符號。

排序套用樣式面板中的樣式清單

在 [套用樣式] 面板中按一下 [選項],並執行下列其中一項動作:

  • 若要依照樣式在 CSS 中的顯示順序列出樣式,請選取 [依順序分類]。

  • 若要根據字母順序與樣式的類型 (類別或識別碼選取器) 列出樣式,請選取 [依類型分類]。

顯示或隱藏套用樣式面板中的樣式

在 [套用樣式] 面板中按一下 [選項],並執行下列其中一項動作:

  • 若要列示目前網頁的外部、內部與內嵌 CSS 中所含之所有樣式,請選取 [顯示所有樣式]。

  • 若只要列出目前網頁中所使用的樣式,請選取 [顯示目前網頁使用的樣式]。

  • 若只要列出網頁中目前的選取範圍所使用之樣式,請選取 [顯示選取範圍使用的樣式]。

    Note注意:

    只有在您將游標置於使用該樣式的內容上或在選取使用該樣式的內容時,元素選取器與內嵌樣式才會出現在 [套用樣式] 面板中。

在套用樣式面板中以彩色背景襯托不具背景屬性規則的樣式

  1. 在 [套用樣式] 面板中按一下 [選項],然後選取 [預覽背景色彩]。

  2. 在 [其他色彩] 對話方塊中選取一個色彩,然後按一下 [確定]。

另請參閱

工作

套用樣式

參照

管理樣式面板
CSS 屬性面板

概念

使用階層式樣式表工具
階層式樣式表參照
使用樣式