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

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

當(dāng)前模式下的 CSS 樣式面板

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

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

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

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

.foo{

color: green;

font-family: ‘Arial’;

}

p{

font-family: ‘serif’;

font-size: 12px;

}

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

font-size: 12px

font-family: ‘Arial’

color: green

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

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

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

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

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

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

總結(jié)

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

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