套用樣式工作窗格
[套用樣式] 工作窗格可讓您套用、移除、修改、重新命名及刪除樣式;附加或卸離外部階層式樣式表 (CSS);選取樣式的所有例項;移至含有樣式規則集的程式碼。[套用樣式] 工作窗格會根據樣式的規則顯示每個樣式,而讓您得以從樣式的外觀快速找出所要使用的樣式。
當您開啟網頁時,[套用樣式] 工作窗格會列出網頁的階層式樣式表 (CSS) 中所定義之所有樣式,包括外部、內嵌與內部 CSS。類別與識別碼選取器會出現在含有該樣式之外部 .css 檔案的名稱下;若該樣式位於內部 CSS 中,則會出現在 [本頁] 中。元素選取器會以相同的方式進行組織,但會出現在類別與識別碼選取器清單下名為 [內容選取器] 的個別標題下。您可以將工作窗格設定為列出所有樣式,或將其限定為僅列出目前的網頁或網頁中目前選取範圍所使用的樣式。無論選取的選項為何,元素選取器與內嵌選取器都只會在您將游標置於使用該樣式的內容上或在您選取使用該樣式的內容時,才會出現在工作窗格中。
您可以為 [套用樣式] 工作窗格中所顯示的樣式清單進行排序,也可以限定清單僅顯示目前的網頁或目前選取範圍所使用的樣式。若有某個樣式在工作窗格的白色背景中難以檢視,可以選取一個色彩並將其顯示於工作窗格中,作為不具背景屬性之樣式的背景。
![]() |
---|
若要使用指標在浮動視窗中暫時顯示某個樣式的所有規則,請在 [套用樣式] 工作窗格中指向該樣式。 |
套用樣式工作窗格
[清除樣式] 可從目前的選取項目中移除所有類別選取器與內嵌樣式。
[本頁] 可列出內部 CSS 與匯入的外部 CSS 檔案中之類別與識別碼選取器。
匯入目前網頁的外部 CSS 檔案。
目前網頁內部 CSS 中所定義的樣式。
連結自目前網頁的外部 CSS 檔案。
目前的選取範圍所使用的樣式周圍會出現實線的矩形框線。
[內容選取器] 可列出目前的選取項目所使用之元素選取器。
包含於連結的外部 CSS 檔案 (events.css) 中之類別與識別碼選取器。
每種樣式均有下拉式功能表可執行多項樣式型工作。請指向樣式然後按一下箭號,或以滑鼠右鍵按一下樣式。
在 [套用樣式] 工作窗格中每個樣式旁所顯示的圖示,可識別樣式的類型以及樣式是否用於目前的網頁中。
套用樣式工作窗格圖示
圖示 |
描述 |
---|---|
![]() |
識別碼選取器旁會出現紅點。 |
![]() |
類別選取器旁會出現綠點。 |
![]() |
元素選取器旁會出現藍點。 |
![]() |
內嵌樣式旁會出現黃點。 |
![]() |
目前的網頁中所使用的樣式會以圈起來的彩色點標示。 |
![]() |
匯入的外部階層式樣式表旁會出現 @ 符號。 |
程序
排序 [套用樣式] 工作窗格中的樣式清單
在 [套用樣式] 工作窗格中按一下 [選項],然後執行下列其中一項動作:
若要依照樣式在 CSS 中的顯示順序列出樣式,請選取 [依順序分類]。
若要根據字母順序與樣式的類型 (類別或識別碼選取器) 列出樣式,請選取 [依類型分類]。
顯示或隱藏套用樣式工作窗格中的樣式
在 [套用樣式] 工作窗格中按一下 [選項],然後執行下列其中一項動作:
若要列示目前網頁的外部、內部與內嵌 CSS 中所含之所有樣式,請選取 [顯示所有樣式]。
若只要列出目前網頁中所使用的樣式,請選取 [顯示目前網頁使用的樣式]。
若只要列出網頁中目前的選取範圍所使用之樣式,請選取 [顯示選取範圍使用的樣式]。
注意事項:
只有在您將游標置於使用該樣式的內容上或在選取使用該樣式的內容時,元素選取器與內嵌樣式才會出現在 [套用樣式] 工作窗格中。
在 [套用樣式] 工作窗格中以彩色背景襯托不具背景屬性規則的樣式
在 [套用樣式] 工作窗格中按一下 [選項],然後選取 [預覽背景色彩]。
在 [其他色彩] 對話方塊中選取一個色彩,然後按一下 [確定]。