使用“CSS 樣式”面板可以跟蹤影響當前所選頁面元素的 CSS 規(guī)則和屬性(“當前”模式)，也可以跟蹤文檔可用的所有規(guī)則和屬性(“所有”模式)。使用面板頂部的切換按鈕可以在兩種模式之間切換。使用“CSS 樣式”面板還可以在“所有”和“當前”模式下修改 CSS 屬性。

有關(guān)“當前”模式和“所有”模式下“CSS 樣式”面板的信息，請參閱下面兩部分。

當前模式下的 CSS 樣式面板

在“當前”模式下，“CSS 樣式”面板將顯示三個面板：“所選內(nèi)容的摘要”窗格，其中顯示文檔中當前所選內(nèi)容的 CSS 屬性；“規(guī)則”窗格，其中顯示所選屬性的位置(或所選標簽的一組層疊的規(guī)則，具體取決于您的選擇)；以及“屬性”窗格，它允許您編輯應(yīng)用于所選內(nèi)容的規(guī)則的 CSS 屬性。

您可以通過拖動窗格之間的邊框調(diào)整任意窗格的大小，通過拖動分隔線調(diào)整列的大小。

“所選內(nèi)容的摘要”窗格顯示活動文檔中當前所選項目的 CSS 屬性的摘要以及它們的值。該摘要顯示直接應(yīng)用于所選內(nèi)容的所有規(guī)則的屬性。僅顯示已設(shè)置的屬性。

例如，下列規(guī)則創(chuàng)建一個類樣式和一個標簽(在此例中為段落)樣式：

.foo{

color: green;

font-family: ‘Arial’;

}

p{

font-family: ‘serif’;

font-size: 12px;

}

當您在“文檔”窗口中選擇帶有類樣式 .foo 的段落文本時，“所選內(nèi)容的摘要”窗格將同時顯示兩個規(guī)則的相關(guān)屬性，因為兩個規(guī)則都應(yīng)用于所選內(nèi)容。在這種情況下，“所選內(nèi)容的摘要”窗格將列出以下屬性：

font-size: 12px

font-family: ‘Arial’

color: green

“所選內(nèi)容的摘要”窗格按逐級細化的順序排列屬性。在上面的示例中，標簽樣式定義字體大小，類樣式定義字體 (font-family) 和顏色。(類樣式定義的字體 (font-family) 屬性覆蓋標簽樣式定義的字體 (font-family) 屬性，因為類選擇器比標簽選擇器更為具體。有關(guān) CSS 具體說明的更多信息，請訪問 www.w3.org/TR/CSS2/cascade.html。)

“規(guī)則”窗格根據(jù)您的選擇顯示兩個不同視圖：“關(guān)于”視圖或“規(guī)則”視圖。在“關(guān)于”視圖(默認視圖)中，此窗格顯示定義所選 CSS 屬性的規(guī)則的名稱，以及包含該規(guī)則的文件的名稱。在“規(guī)則”視圖中，此窗格顯示直接或間接應(yīng)用于當前所選內(nèi)容的所有規(guī)則的層疊(或?qū)哟谓Y(jié)構(gòu))。(直接應(yīng)用規(guī)則的標簽顯示在右列。) 您可以通過單擊“規(guī)則”窗格右上角的“顯示信息”和“顯示層疊”按鈕在兩種視圖之間切換。

在“所選內(nèi)容的摘要”窗格中選擇某個屬性時，定義規(guī)則的所有屬性出現(xiàn)在“屬性”窗格中。(如果選擇了“規(guī)則”視圖，則也會在“規(guī)則”窗格中選擇定義規(guī)則。) 例如，如果您有一個定義字體 (font-family)、字體大小和顏色的名為 .maintext 的規(guī)則，那么在“所選內(nèi)容的摘要”窗格中選擇其中任何屬性都將在“屬性”窗格中顯示 .maintext 規(guī)則定義的所有屬性，并在“規(guī)則”窗格中顯示選定的 .maintext 規(guī)則。(此外，在“規(guī)則”窗格中選擇任何規(guī)則都將在“屬性”窗格中顯示該規(guī)則的屬性。) 然后您可以使用“屬性”窗格快速修改 CSS，而無論它是嵌入在當前文檔中還是通過附加的樣式表鏈接的。默認情況下，“屬性”窗格僅顯示那些已進行設(shè)置的屬性，并按字母順序排列它們。

您可以選擇在其它兩種視圖中顯示“屬性”窗格。“類別”視圖顯示按類別分組的屬性(如“字體”、“背景”、“區(qū)塊”、“邊框”等)，已設(shè)置的屬性位于每個類別的頂部，以藍色文本顯示。“列表”視圖顯示所有可用屬性的按字母順序排列的列表，同樣，已設(shè)置的屬性排在頂部，以藍色文本顯示。若要在視圖之間切換，請單擊“顯示類別視圖”、“顯示列表視圖”或“只顯示設(shè)置屬性”按鈕，這些按鈕位于“屬性”窗格的左下角。

在所有視圖中，已設(shè)置的屬性以藍色顯示；與選擇無關(guān)的屬性顯示時伴有一條紅色刪除線。將鼠標指針置于無關(guān)規(guī)則上方時將顯示一條消息解釋該屬性為何無關(guān)。通常，導(dǎo)致某個屬性無關(guān)的原因是它被改寫或者不是繼承的屬性。

對“屬性”窗格所做的任何更改都將立即應(yīng)用，這使您可以在操作的同時預(yù)覽效果。

總結(jié)

以上是生活随笔為你收集整理的css 样式面板,关于 CSS 样式面板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。