儘管大多數情況下網頁作者的樣式就足夠了，但 Opera 瀏覽器長期以來都為使用者提供了修改頁面外觀的功能，並且所有最新的 Opera 版本（包括 12.17）都允許使用使用者樣式表 。此版本之後的版本，例如 15.xx 版本，不再允許此類功能。對於那些喜歡舊樣式的使用者來說，12.17 版本可能比 12.16 版本更受歡迎，因為它是為了修復 Heartbleed 漏洞而建立的。
繼續，本地使用者 可以提供多個 樣式表，一個用於影響所有 頁面的通用 使用，其他樣式表則在開啟特定 頁面時使用。瀏覽器還內建了許多樣式表 ，以改善視力障礙使用者的瀏覽體驗並用於測試。
更改樣式或許最適合讓頁面更易於閱讀，但 CSS 級聯本身的研究需要具備樣式調整的能力。另一個更明顯的用途是網頁設計，其中無休止的測試是規則而不是例外。
與普遍看法相反，那些有興趣學習 CSS 樣式的人不需要購買昂貴的程式包。雖然此類程式對於尋求快速結果的使用者來說具有優勢，但網路本身是最好的示例來源，並且可以隨時學習。隨著瀏覽器中網頁開發軟體的引入，所有必要的特性都已經可用。
此頁面說明了如何配置 Opera 12.16 瀏覽器的樣式設定，以滿足其主要使用領域，並提供了一些示例文字檔案和教程來幫助學習。
樣式選項 設定選擇參與瀏覽器 CSS 級聯的樣式來源 。呈現模式 或簡稱模式 的兩個完整選擇集中進行切換。
有兩種主要工作模式 ，分別命名為作者模式 和使用者模式 ，並且可以在瀏覽器的主選單中選擇它們。這些模式名稱對於識別它們是必要的，但實際上選擇不佳，這將在稍後解釋。具體來說，模式是在瀏覽器的檢視/樣式 選單中切換 的。但是，預設 模式選擇（每次啟動或重新啟動後應用的選擇）是在瀏覽器的首選項 中透過檢視/樣式/管理模式…/呈現模式/預設模式 進行的。透過檢視/樣式 選單進行切換不需要重新啟動，而任何對預設選擇的更改都需要重新啟動。
每種模式在瀏覽器首選項中都有自己的一列詳細選擇 ，位於檢視/樣式/管理模式…/呈現模式 下。如果在這兩列中進行相同 的選擇，那麼這兩種模式都將包含級聯的相同功能；也就是說，它們都可以做同樣的事情 。為了進一步說明這一點，所謂的作者模式 可以很容易地設定為僅包含使用者 功能，反之亦然。
但是，或許最好遵循這些模式的固定名稱 ，直到 Opera 允許使用者選擇它們為止。透過在這些列中進行不同的 選擇，可以存在兩種完全不同的配置，並且可以透過簡單地切換模式來應用它們。例如，可以將預設設定為作者模式 ，並將其關聯的列設定為僅選擇頁面樣式表 （Opera 程式碼表示所有作者樣式 ）。另一列，即使用者模式 ，可能有兩個選擇，頁面樣式表 和我的樣式表 （Opera 程式碼表示整個使用者樣式表集 ）。這樣，模式就可以很容易地在正常瀏覽 和正常瀏覽加上使用者樣式 之間切換。
使用者等級由三個獨立的來源構成 。這些是 Opera 的內建 樣式表、使用者 樣式表user.css 以及一組可選使用的特定站點 樣式表。根據這些樣式表中哪個已安裝或在任何特定時間被選中，其中任何一個或所有這些 都可能在使用者級別的瀏覽器樣式級聯中合併。
該主題中使用的普遍接受的術語無疑在使用過程中有所發展，但很大程度上是由全球資訊網聯盟 (W3C) 提供的。這裡之所以關注它，僅僅是因為需要將其含義與 Opera 瀏覽器設定中使用的一些術語區分開來。
以下是一些普遍接受的含義
樣式表 ：包含網頁樣式的文字檔案。它透過其.css 字尾與其他文字檔案區分開來。樣式來源 ：樣式的位置，例如作者樣式 、使用者樣式 和瀏覽器自己的客戶端樣式 。它也用於描述這三者的任何子集，例如頭部樣式 、內聯樣式 等。使用者代理 (UA) 樣式表 ：瀏覽器自身樣式表或其等效項中的樣式。使用者樣式 ：寫入使用者計算機上儲存的本地樣式表中的樣式。作者樣式 ：來自作者連結的樣式表、文件頭部樣式以及任何內聯樣式。繼承 ：當子元素沒有自己的樣式時，從父元素向其傳播樣式。初始值 ：當所有其他樣式獲取都失敗時用作預設值的 CSS 屬性值。考慮到級聯的複雜性，下面的含義遠非直觀，因此理解它們非常重要。在呈現模式 對話方塊中，這些術語的含義如下
'頁面樣式表' 作者樣式 。即來自以下來源 的樣式作者連結的樣式表 ，以及文件頭部樣式 ，以及文件內聯樣式。
'我的樣式表' 來源 （使用者樣式表集），包括
本地使用者樣式表user.css ，以及特定網站的本地樣式表 ，以及Opera內建的樣式表
“作者模式 作者樣式 相關。
“使用者模式 使用者樣式 相關。 瀏覽器的呈現模式可以設定為允許完整的級聯或某些過濾版本，其中一些重要性等級被排除在外，下面的部分（模式選項詳解
樣式宣告可以有一個特殊的標記，以賦予它們比普通 宣告更高的優先順序，它們使用!Important 關鍵字來識別它們。它們被稱為重要 宣告。在排序列表時，瀏覽器會將重要 宣告與任何普通 宣告分離。然後，瀏覽器識別表1中的五個重要性等級 或重要性層 ，其中等級1 的重要性最低，等級5 的重要性最高。
表1：CSS 2級級聯重要性等級
等級1 瀏覽器預設樣式
等級2 使用者普通樣式宣告 使用者 樣式表中沒有 特定網站 和內建 樣式表的普通宣告也會合併到這裡。
等級3 作者普通樣式宣告 作者 設定中沒有
等級4 作者!Important樣式宣告 作者 設定中有
等級5 使用者!Important樣式宣告 使用者 樣式表中有 特定網站 和內建 樣式表的!Important宣告也會合併到這裡。
瀏覽器逐個標籤地解析頁面的樣式。在確定要為HTML標籤選擇哪個競爭屬性值時，瀏覽器首先按其屬性名稱對所有相關樣式進行排序。然後，在任何相似的屬性內，根據其重要性等級 進行排序。如果問題仍然沒有解決，則會進一步根據其特殊性 進行排序。如果經過所有這些操作後，它們的優先順序仍然匹配，則根據其源順序 進行選擇；也就是說，瀏覽器最後遇到的一個會被選中。有關更多詳細資訊和過程的詳細示例，請參閱CSS級聯
儘管Opera的呈現模式可能需要在許多可能的場景中進行設定，但它們可以分為四大類
瀏覽器的預設行為 ：所有作者和使用者CSS樣式都從級聯中排除。在此設定中，瀏覽器預設樣式表適用，其他很少。它主要對那些需要確認預設樣式表內容或首選項設定優先順序的人感興趣。僅作者樣式配置 。所有使用者樣式都從 級聯中排除。這是Opera的主要瀏覽設定，包括作者的所有連結、頭部和內聯樣式。僅使用者樣式配置 。所有作者樣式都從 級聯中排除。在此模式下，只有使用者 樣式表集可以應用。此模式允許與所有作者樣式良好分離，並用於測試和使用者樣式表設計。組合作者-使用者配置 。所有樣式源都級聯 。這是研究CSS級聯中樣式完全互動的模式。特別是，需要確認特定網站樣式表的正確切換以及user.css 樣式表的重要等級效果。設定很容易進行，但對於不熟悉它們的人，在詳細樣式模式設定 安裝使用者樣式表
要快速設定呈現模式 和樣式，建議執行以下操作
預設樣式模式設定 ：選擇作者模式 。瀏覽器將始終在此模式下啟動以進行正常的網頁瀏覽。作者模式列 ：僅選擇頁面樣式表 ，這是正常網頁瀏覽的最佳模式。使用者模式列 ：僅選擇頁面樣式表 和我的樣式表 ，這是進行完整級聯工作的最佳組合。您需要安裝合適的user.css 樣式表才能充分利用此設定，儘管它可以作為空樣式表安裝並在以後新增。使用這些推薦的設定，普通使用者可以使用檢視/樣式 選單選項輕鬆地在它們之間切換。對於那些需要更多保證的人，下面的部分詳細列出了每個選擇的包含和排除項。
可以透過工具/首選項/高階/內容/樣式選項/呈現模式 或透過檢視/樣式/管理模式…/呈現模式 選單選項訪問呈現模式 對話方塊。
Opera自己的幫助頁面中使用了大量模糊或完全誤導性的術語，並且瀏覽器本身宣傳的一些功能似乎無法使用。儘管可以公平地說其所有主要 功能都執行良好，但這些說明可能會有所幫助
“我的樣式表 內建 樣式表。原因是所有這些在邏輯上都合併到級聯中的一個使用者樣式表 中。
“僅一個user.css user.css 檔案，即使在不同的資料夾中，在某些階段也會導致樣式混亂。使用特定網站 樣式表而不是多個user.css 檔案。本文作者確信，關於這一點還有更多內容需要理解，但此處描述的限制將控制此事。歡迎有知識的人員相應地修改此理解。
“@Import規則 使用者 集中的任何表單中使用，當然，它可以構成任何作者表單的標題。
“頁面樣式表
“使用者模式 作者模式 作者模式 ，但在使用者模式 中進行相同的選擇將執行完全相同的事情。這些選擇的重複乍一看似乎是相當冗餘的，但它允許在任何兩個模式構造之間快速切換。
快速呈現模式切換 作者 和使用者 模式中擁有不同的選擇集，以及在兩者之間快速更改。更改這些模式的最佳方法是使用Opera的檢視/樣式 選單，因為它不需要清除瀏覽器快取或重新啟動。呈現模式 對話方塊中的模式選擇也可以使用，但它是一個預設設定，需要重新啟動。但是，對於長時間的會話並避免混淆，最好將預設設定更改為最感興趣的那個。冗餘模式？ 頁面字型和顏色 和我的字型和顏色 都無法理解。在獲得更多資訊之前，最好不要選中這些模式。我的連結樣式 旨在將連結顏色更改為工具/首選項…/網頁 中的設定，但在最近的測試中發現它無法使用。“特定網站的樣式表 user.css 樣式表的替代品，並且每當訪問特殊網站時，都會自動在兩者之間進行選擇。它們僅在選中我的樣式表 的模式下工作。
特定網站樣式表的安裝使用 右鍵點選方法 編輯網站偏好設定... 。這會添加當前網站並將其選中以進行編輯。選擇顯示 ，然後新增特定網站的css檔案的路徑。按確定 ，如有必要，重新載入網站以檢視效果。無法關閉 特定網站樣式表的通用使用，儘管在偏好設定 / 內容 / 高階 / 管理網站偏好設定... 中可以找到已安裝的這些網站的列表。使用此列表而不是右鍵點選方法來新增 樣式表已被證明很麻煩。Opera的“內建樣式表” 使用者樣式表 的呈現模式，即任何我的樣式表 複選框被勾選的模式。在這種情況下，它們會在使用者樣式表級別合併，通常帶有!important標記。
詳細樣式模式設定 - Opera 12.16
本節將簡要說明如何為四個主要使用領域設定瀏覽器的呈現模式。這些是
瀏覽器的預設行為 ：所有作者和使用者的CSS樣式都從級聯中排除。僅作者樣式配置 。所有使用者樣式都從級聯中排除。僅使用者樣式配置 。所有作者樣式都從級聯中排除。作者-使用者組合配置 。所有五個重要性等級都包含在級聯中。可以透過工具/首選項/高階/內容/樣式選項/呈現模式 或透過檢視/樣式/管理模式…/呈現模式 選單選項訪問呈現模式 對話方塊。
Opera瀏覽器的預設行為
要研究預設行為，必須排除所有應用的使用者和作者樣式。圖1顯示了此配置的設定。
已排除
在此配置中，應用的樣式很少；具體排除 的是
所有使用者樣式表的集合，即
使用者樣式表user.css
特定網站樣式表
Opera內建的樣式表 作者下載的樣式表 作者的文件頭部樣式 作者的內聯CSS樣式 已包含
這些是包含 的
此外，在任何時候以及任何配置中
Opera瀏覽器會從偏好設定/高階/字型 對話方塊中應用有限的字型設定 ，就像它們已與瀏覽器預設樣式表的相應選擇器合併一樣。例如，會應用詳細的字體系列和字型大小，正確大小的主體字型、標題、pre標籤等，但每個字型的屬性似乎僅限於
font-family font-size/line-height 偏好設定/網頁 中顯示的字型專案只是此集合的摘錄，因此可以說它也適用。使用者的連結顏色選擇不會應用，但此功能可以獨立選擇。請注意，除了各種文字框外，預設瀏覽器樣式表不包含文件主體上的字型宣告，這些由偏好設定提供。
僅作者樣式配置
頁面樣式表 似乎暗示了對文件頭部內部樣式表的引用，但如下所示，它適用於所有 作者的樣式。
已排除
以下已排除
所有使用者樣式表的集合，即
使用者樣式表user.css
特定網站樣式表
Opera內建的樣式表 已包含
這些是包含 的
作者的內聯HTML屬性 作者的內聯CSS樣式 作者下載的樣式表 作者的文件頭部樣式 瀏覽器的預設樣式表
僅使用者樣式配置
此配置對於測試PC使用者建立的使用者樣式表以及研究或修改Opera內建樣式表集生成的格式很有用。它通常不是正常瀏覽的選擇，因為它可能會生成過於複雜的格式。
此配置排除所有作者樣式，並且僅應用使用者樣式表。此處，術語使用者樣式表 包括任何已安裝的使用者樣式表，以及瀏覽器選單檢視/樣式 上的列表中任何內建樣式表的選擇。使用者樣式表不會發生物理更改，而是這兩個樣式表的邏輯合併，在級聯中表現得好像內建樣式表集中的選擇已新增到末尾 使用者樣式表中。假設，但目前尚不清楚這些內建樣式表的順序是否在其列表中得到維護。
圖3顯示了此配置的設定。
已排除
這些是排除 的
作者的內聯CSS樣式 作者下載的樣式表 作者的文件頭部樣式 已包含
這些是包含的
所有使用者樣式表的集合，即
使用者樣式表user.css
特定網站樣式表
Opera內建的樣式表 作者的內聯HTML屬性 瀏覽器的預設樣式表
作者-使用者組合配置
此配置提供了研究完整級聯行為的最佳機會。這兩個設定的組合允許包含所有五個重要性等級，以及引入瀏覽器的內建樣式。
圖4顯示了此配置的設定。
已排除
只要存在，就不會排除任何樣式源。
已包含
這些是包含 的
作者的內聯HTML屬性 作者的內聯CSS樣式 作者下載的樣式表 作者的文件頭部樣式 瀏覽器的預設樣式表 所有使用者樣式表的集合，即
使用者樣式表user.css
特定網站樣式表
Opera內建的樣式表
特定網站樣式表模式
沒有針對特定網站樣式表使用的單獨模式，因為它只是使用者集的一部分。當選擇我的樣式表 時，以下三個樣式表都處於活動狀態，前提是它們已安裝，並且對於內建樣式表，前提是它們已選中。使用者樣式表集由以下組成
使用者樣式表user.css
特定網站樣式表
Opera內建的樣式表 特定網站 樣式表最好理解為使用者樣式表 的自動應用替代。當開啟之前已識別給瀏覽器的網站時，現有的user.css 樣式表將被特定樣式表替換。當網站更改為沒有特定樣式表的網站時，將再次使用user.css樣式表。
確實，已安裝的特定網站 樣式表永遠不會與標準使用者樣式表 級聯，因為這兩個是彼此的替代方案，但內建樣式表集中的選擇可能會與這兩個中的任何一個級聯。而分離內建樣式表集只需要取消選擇，而無需重新安裝即可分離其他兩個樣式表則變得很麻煩。解決方案可能是將兩者都保留在原位，並註釋掉樣式而不是刪除樣式表本身。
特定網站樣式表將在任何使用者 樣式表可以工作的模式下自動工作，即無論是在作者設定還是使用者設定中，只要選擇了我的樣式表 呈現模式設定。
其他呈現模式
一些剩餘模式的功能一直難以捉摸。我的字型和顏色 和頁面字型和顏色 模式似乎根本不起作用。事實上，它們類似於預設行為，因此它們很可能是多餘的功能。我的連結樣式 模式允許使用者為所有網頁上的超連結選擇顏色，因此在構建樣式表時可能會造成混淆。在這些說明中，它已被取消選擇。
安裝使用者樣式表 - Opera 12.16
一般背景要點
這些介紹性要點解釋並區分使用者集中三種使用者樣式表型別
有兩種 使用者樣式表 可以應用；第一種是普遍應用於所有網站的樣式表，稱為user.css ，並且只有一個；第二種是一組特定網站樣式表，每個樣式表都應用於特定網站。特定網站樣式表可以具有任何合理的名稱，並以css為字尾，除了user.css 。在呈現模式 中選擇了我的樣式表 的任何情況下，特定網站樣式表都會自動應用而不是user.css 。下面提供了部分內容來解釋這兩種樣式表的安裝，但讀者應參考主頁面其他地方的詳細資訊，以瞭解各種呈現模式的使用。
Opera瀏覽器中還有一組內建樣式表。這些樣式表透過檢視/樣式 選單列出，並且所選的樣式表會與使用者樣式表合併。這可能發生在使用者樣式表可以發揮作用的任何模式中。
以下各節將解釋三種使用者樣式表型別的安裝。
建立空白user.css 樣式表
開啟記事本，Windows附件。
開啟另存為對話方塊。
確保儲存目錄是您的文件資料夾。
將儲存型別： 選擇器更改為所有檔案（*.*）。
輸入檔名user.css ，確保刪除任何txt 字尾。
按儲存。 user.css 檔案在安裝之前不必包含任何樣式。以後可以隨時在記事本中編輯檔案以新增樣式。
安裝使用者樣式表user.css
Opera瀏覽器可以設定為根據CSS級聯的全面使用合併作者和使用者樣式，也可以設定為僅作者樣式、僅使用者樣式或根本沒有樣式。這些設定在瀏覽器的呈現模式 部分進行，並且主頁面上附帶了一個下拉框教程來詳細解釋每個選項的作用。
為了使用和研究完整的五級級聯，需要向瀏覽器新增使用者樣式表。本節說明如何安裝使用者樣式表，並同時設定所有五個樣式源可能合併的模式。此配置不區分本地網頁和外部網頁，因此此設定非常適合本地學習和修改其他人建立的頁面的樣式。
安裝特定網站樣式表
站點特定的樣式表最好理解為使用者 樣式表user.css 的自動應用替代。當之前瀏覽器識別過的站點開啟時，現有的user.css 樣式表會被特定的樣式表替換。當站點切換到沒有 特定樣式表的站點時，user.css 樣式表會被再次使用。
這並不是說特定的樣式表會獨自接管所有 格式，而是它以通常的方式進行級聯 。可以肯定地說，安裝的站點特定的樣式表 可以在使用者樣式表 可以工作的任何模式下工作，即無論是在作者 還是使用者 設定中，只要選擇了我的樣式表 演示模式設定。
在Opera中嘗試安裝站點特定的樣式表時會遇到一些問題，但有一種方法是可行的。已經發現唯一可行的方法是在螢幕上已顯示目標站點時使用右鍵單擊 選單。操作步驟如下：
確保已安裝 user.css樣式表 通用 情況。如果沒有這樣的樣式表，請根據主頁其他地方的說明安裝一個，並確保正在使用的演示模式已選擇我的樣式表 。為您的特定站點建立另一個樣式表（使用不同的名稱）。此 樣式表可以使用任何合理的名稱，並以css為字尾。顯示打算用於站點特定樣式的頁面 右鍵單擊選定的頁面 編輯站點首選項... 然後顯示 。這將顯示我的樣式表 地址框。此時，該對話方塊僅適用於顯示的站點。輸入該站點的目標樣式表的路徑 按 確定退出對話方塊 重新載入站點以檢視效果 只要存在允許user.css 樣式表參與級聯的設定，站點特定的樣式表就會生效，切換過程將是自動的。可以為任意數量的不同站點建立任意數量的不同站點特定樣式表。為了避免混淆，務必記住使用者樣式表集可能非常大。
使用者樣式表集由以下部分組成：
使用者樣式表user.css 。只有一個，可能應用於每個站點。站點特定的樣式表 。可能有多個，但僅應用於特定站點。Opera的內建樣式表 。大約有16個可供選擇，它們應用於每個站點。通常，樣式表可以在沒有任何樣式的情況下安裝，因此當站點特定測試正在進行時，user.css 樣式表很可能為空。樣式表中的註釋標記對於臨時刪除導致混淆的樣式很有用。
要刪除站點特定的樣式表 :
在頁面開啟時右鍵單擊它，然後選擇編輯站點首選項... 。
選擇顯示 並刪除我的樣式表 文字框中的任何檔案路徑。
按確定刪除站點特定的樣式表。 如果刪除樣式表後問題仍然沒有解決，使用者應該記住可能存在user.css 樣式表和內建 樣式表（位於使用者 類別下）。此外，如果存在多個user.css 樣式表，可能會導致進一步的混淆。
安裝內建樣式表
這組樣式表可能是安裝和刪除最簡單的。當在Opera的檢視/樣式 選單中選擇內建樣式表時，它們將被新增到使用者集中，並且可以透過取消選擇它們來單獨或集體地刪除它們。為了使這些樣式表和使用者集中的任何成員應用，必須在正在使用的任何模式下選中我的樣式表 框。
由於在任何一個演示模式 列中進行的設定都會產生相同的結果，因此可以設定一列用於正常工作，另一列包含使用者集。但是，由於選擇使用者模式 也會包含任何User.css 和站點特定的樣式表 ，因此需要謹慎操作，以確保它們的包含是預期的。
請注意，當透過主瀏覽器選單選擇使用者模式時，演示模式 的使用者模式 列中的所有選擇都將被應用。實際上，透過選單進行模式選擇允許在兩種模式之間切換，而無需重新啟動瀏覽器，而演示模式 中的類似模式切換是預設設定，並且將在每次重新啟動時重新建立其選擇。
刪除各種使用者樣式表
要臨時或永久刪除使用者樣式表，請取消選中演示模式 的作者列中的我的樣式表 框，然後在每個對話方塊中選擇確定 ，直到退出瀏覽器首選項。請注意，當對除了 使用者樣式表之外的首選項進行更改時，需要關閉瀏覽器並重新載入頁面才能看到更改。
實際上，由於取消選擇我的樣式表 演示模式也會阻止使用內建樣式表和站點特定的樣式表，因此最好考慮在使用者樣式表中使用註釋標記來臨時“刪除”樣式。這樣，就可以刪除一個樣式而不會影響另一個樣式。內建樣式表更容易在檢視/樣式 選單設定中取消選擇。
本節提供了一個示例網頁文件 及其連結的作者樣式表 ，用於測試表格樣式。至少給出了每個文件的文字，使用者需要將其內容複製到自己的檔案中。描述的文字可以在下面的下拉框中找到，分別標識為tables.css 和table styles.htm ，使用這些檔案可以節省那些對主題只有興趣的人的時間。
tables.css
/*說明*/
/*Copy the full contents of this text into Notepad*/
/* and call the file ''tables.css''.*/
/*Place ''tables.css'' and ''table styles.htm'' */
/*in the same folder, for example, your documents folder.*/
/* STYLE-SHEET FOR TABLES: tables.css */
body {
font-family : "Bookman Old Style" , serif ;
font-size : 1 em ;
line-height : 1.6 em ;
color : maroon ;
}
div {
background : linen ;
border : 1 px solid lightgrey ;
padding : 15 px ;
color : rgb ( 22 , 22 , 22 );
}
# century {
font-family : century ;
}
# divtop {
background : beige ;
}
table {
background : white ;
color : #000 ;
border-top : 1 px solid #D3D3D3 ;
border-right : 1 px solid #D3D3D3 ;
border-left : 1 px solid #D3D3D3 ;
border-bottom : 2 px solid grey ;
border-collapse : collapse ;
font-size : .9 em ;
margin : 1 em 1 em 2 em ;
}
td , th {
border-top : 1 px solid #D3D3D3 ;
border-right : none ;
border-left : none ;
border-bottom : none ;
text-align : left ;
vertical-align : middle ;
padding : 10 px ;
}
th {
background : maroon ;
color : #FFF ;
font-weight : 700 ;
}
table . withtext {
max-width : 50 % ;
}
table . withtext td {
vertical-align : top ;
}
table . withtext td : first-of-type {
font-weight : 700 ;
width : 20 % ;
}
table . withtext th {
vertical-align : middle ;
font-weight : 700 ;
background : maroon ;
}
table . colors {
background : peachpuff ;
color : black ;
}
table . rowstripes tr : nth-child ( 2n + 1 ) {
background : papayawhip ;
}
table . rowstripes tr : nth-child ( 2n ) {
background : inherit ;
}
table . withtotals tr : last-of-type {
border-top : 2 px solid black ;
background : salmon !important ;
color : white ;
font-weight : 700 ;
}
# ptop {
padding : 0 15 px 0 15 px ;
font-weight : bold ;
}
p . dropcap :: first-letter { /* selects the first letter of */
float : left ; /* paras with class ''dropcap'' */
font-size : 4 em ;
line-height : 0.8 em ;
padding-top : 4 px ;
padding-right : 4 px ;
padding-left : 3 px ;
font-family : Georgia ;}
. centertext {
text-align : center ;
}
. lefttext {
text-align : left ;
}
. righttext {
text-align : right ;
}
. boxcenter {
margin : 1 em auto 2 em ;
}
. boxleft {
float : left ;
margin : 1 em 1 em 2 em ;
}
. boxright {
float : right ;
margin : 1 em 1 em 2 em ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
color : #000 ;
background : none ;
font-weight : 400 ;
padding-top : .5 em ;
padding-bottom : .18 em ;
border-bottom : 1 px solid #aaa ;
margin : 0 ;
}
h1 {
font-size : 188 % ;
}
h2 {
font-size : 150 % ;
}
h3 , h4 , h5 , h6 {
border-bottom : none ;
font-weight : 700 ;
}
h3 {
font-size : 132 % ;
}
h4 {
font-size : 116 % ;
}
h5 {
font-size : 100 % ;
}
h6 {
font-size : 80 % ;
}
ol {
font-style : italic ;
}
ol . lr {
list-style-type : lower-alpha ;
}
table caption , table . withrowheads td : first-of-type {
font-weight : 700 ;
}
table styles.htm
<!--Copy the full contents of this text into Notepad -->
<!-- and call the file ''table styles.htm''.-->
<!--Place table styles.htm and tables.css in the same folder, -->
<!-- for example, your documents folder.-->
<!DOCTYPE html>
< html >
< head >
< title >
Table Styles
</ title >
< link rel = "stylesheet" href = "Tables.css" type = "text/css"
media = "screen" >
</ head >
< body >
< h2 >
Main h2 heading
</ h2 >
< p id = "ptop" class = "dropcap" >
This paragraph is nested only between the < em > body</ em >
tags, unlike others within < em > div</ em > tags.< br >
Most of its styles are inherited from its parent.
</ p >
< div id = "divtop" >
< p >
This paragraph is nested between < em > div</ em > tags, and
uses inherited and declared properties.< br >
The text is styled for font-family, font-size, color,
padding, and line-height.
</ p >
< table title = "table 1" class =
"colors rowstripes withrowheads withtotals" >
< caption >
This table is styled with CSS, and with classes
declared in the table line...
</ caption >
< tr >
< th >
Units...
</ th >
< th >
Heading A
</ th >
< th >
Heading B
</ th >
< th >
Heading C
</ th >
< th >
Heading D
</ th >
< th >
Heading E
</ th >
< th >
Heading F
</ th >
</ tr >
< tr >
< td >
First Row
</ td >
< td >
1
</ td >
< td >
2
</ td >
< td >
3
</ td >
< td >
4
</ td >
< td >
5
</ td >
< td >
6
</ td >
</ tr >
< tr >
< td >
Second Row
</ td >
< td >
7
</ td >
< td >
8
</ td >
< td >
9
</ td >
< td >
10
</ td >
< td >
11
</ td >
< td >
12
</ td >
</ tr >
< tr >
< td >
First Row
</ td >
< td >
12
</ td >
< td >
13
</ td >
< td >
14
</ td >
< td >
15
</ td >
< td >
16
</ td >
< td >
17
</ td >
</ tr >
< tr >
< td >
Second Row
</ td >
< td >
18
</ td >
< td >
19
</ td >
< td >
20
</ td >
< td >
21
</ td >
< td >
22
</ td >
< td >
23
</ td >
</ tr >
< tr >
< td >
Third Row
</ td >
< td >
24
</ td >
< td >
25
</ td >
< td >
26
</ td >
< td >
27
</ td >
< td >
28
</ td >
< td >
29
</ td >
</ tr >
< tr >
< td >
Totals Row
</ td >
< td >
62
</ td >
< td >
67
</ td >
< td >
72
</ td >
< td >
77
</ td >
< td >
82
</ td >
< td >
87
</ td >
</ tr >
</ table >
</ div >
< div >
< h3 >
Sub h3 heading
</ h3 >
< p >
This paragraph is nested between < em > div</ em > tags
also.< br >
It inherits some styles from < em > div</ em > , and
< em > div</ em > inherits some styles from < em > body</ em > .
</ p >
< p >
This is an ordered list with some styles for font and
label type:
</ p >
< ol class = "lr" >
< li > Pellentesque habitant morbi tristique...
</ li >
< li > Aenean ultricies mi vitae est.
</ li >
< li > Donec non enim in turpis pulvinar facilisis.
</ li >
< li > Donec eu libero sit amet quam egestas semper.
</ li >
< li > Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante.
</ li >
</ ol >
</ div >
</ body >
</ html >
建立、開啟和編輯示例檔案
建立用於測試的檔案
建立table styles.htm 檔案
開啟記事本，Windows附件。
將table syles 下拉框中的所有文字複製到剪貼簿。
將內容貼上到記事本中。
開啟另存為對話方塊。
確保儲存目錄是您的文件資料夾。
將儲存型別： 選擇器更改為所有檔案（*.*）。
輸入檔名table styles.htm ，確保刪除了txt 字尾。
按儲存。 htm 檔案已建立。
建立tables.css 檔案
使用與上述相同的方法，但有以下例外：
將tables.css 下拉框的內容複製到一個新的記事本檔案中。
將檔案儲存為tables.css ，與table styles.htm 位於同一資料夾中。 現在可以使用這兩個檔案來研究樣式表對網頁文件的影響。請注意，可以在網頁文件的頭部部分引用任意數量的此類樣式表，每個樣式表都有一個單獨的link-tag 條目。
建立user.css 檔案
此外，可以像tables.css 示例一樣建立使用者樣式表 。如果這樣做，則必須將其命名為user.css 。它最初不必包含任何樣式，並且可以根據標記為安裝使用者樣式表-Opera 12.16 的下拉框中的說明進行安裝。以後可以在記事本中向其中新增使用者樣式。
開啟和編輯檔案
首先，應注意以下幾點：
儲存和快取
通常，必須先儲存 編輯後的樣式表，然後才能將其應用於頁面。
通常，必須先儲存並重新載入 編輯後的網頁文件，然後才能檢視其更改。要重新載入按下Opera工具欄上的重新載入 按鈕。如果未顯示，可以透過檢視/工具欄/自定義... 配置工具欄。
或者，在源 視窗中按下應用更改 按鈕。
在瀏覽器中重新開啟網頁。
開發人員工具（如Opera的源 編輯器和Opera Dragonfly）還允許檢視文件中的臨時 更改，無需 儲存。
有時需要清除 瀏覽器快取才能看到更改。選擇以下任何一種訪問方法工具/刪除隱私資料... 。清除所有專案，除了刪除整個快取 ，然後按確定 。工具/首選項/高階/歷史記錄 。按下立即清空 ，然後按確定 。工具/首選項/高階/歷史記錄 。設定退出時清空 複選框，然後重新啟動瀏覽器。
更改Opera的首選項 時，通常需要重新啟動瀏覽器。 現在，要顯示離線網頁，只需在Opera中開啟htm 檔案即可。由於作者樣式表tables.css 在文件的頭部部分被引用，因此它將用於格式化頁面。
開啟網頁
可以按如下方式操作
在相關的文件資料夾中，右鍵單擊 htm 檔案，然後選擇開啟方式... / Opera Internet Browser 。
或者，將Opera設定為此檔案型別的預設程式。為此，請右鍵單擊頁面，然後開啟方式.../選擇預設程式... 。
網頁也可以設定為透過書籤或快速撥號 面板開啟。 編輯網頁文件
由於htm 檔案只是一個文字檔案，因此可以直接在記事本中進行編輯。為此，請在文件資料夾中右鍵單擊該檔案，然後開啟方式... / 記事本 。如果以這種方式進行操作，則需要在瀏覽器中再次開啟或重新載入檔案之前儲存該檔案。但是，在Opera中開啟檔案時進行編輯有一些優勢。一方面，可以立即看到更改的效果，並且除非效果正確，否則不必儲存檔案。要在Opera中編輯網頁文件，請按如下操作
開啟網頁，然後右鍵單擊 頁面。選擇源 。
對開啟的編輯視窗中的文字進行任何修改。
進行更改後，按下源 視窗的工具欄按鈕應用更改 。
選擇主頁面選項卡以檢視更改的效果。
要永久儲存更改，請在源 選項卡中按儲存 。 編輯樣式表
與htm 檔案類似，css 檔案只是一個文字檔案，可以在記事本中直接編輯。可以按如下方式操作
在相關的文件資料夾中，右鍵單擊 css 檔案，然後選擇開啟方式... / 記事本 。
如果尚未設定，請考慮將記事本設定為css 檔案的預設程式。
進行更改後，儲存檔案，為了方便起見，將其最小化到工作列。
重新載入網頁以檢視結果。可以使用以下任何方法執行此操作按下Opera工具欄上的重新載入 按鈕。如果未顯示，則可以自定義地址工具欄以將其包含在內。
或者，在原始碼 視窗中，按下應用更改 按鈕，然後選擇主頁面選項卡。
在瀏覽器中重新開啟網頁。
圖1：Opera Dragonfly顯示的主要部分，其中標記了這些註釋中提到的按鈕。 Opera Dragonfly 實用程式是Opera瀏覽器的一部分。它允許使用者研究用於任何網頁的樣式，並可以對本地副本進行互動式樣式更改。它與正在研究的網頁一起佔據螢幕的一部分。
此處無法提供該實用程式的完整描述，但對於那些尋求更多資訊的使用者，請參閱Opera頁面Opera Dragonfly文件
有兩種方法可以開啟程式
從Opera下拉選單中 ；轉到工具/高階/Opera Dragonfly 。透過右鍵單擊任何網頁的一部分 ；然後從右鍵單擊選單中選擇檢查元素 ，將開啟Dragonfly，並在文件程式碼中突出顯示該元素，並在單獨的面板中顯示其所有相關樣式。請注意，當網頁更改時，必須重新啟動Dragonfly以清除先前站點的資料。
Dragonfly的使用常規 設定可從右側按鈕選單 訪問。但是，正在使用的功能 是使用視窗左側 的按鈕選擇的。以下模式設定建議用於樣式研究，並且假定適用於以下大多數要點：在Dragonfly開啟的情況下
在主按鈕選單中選擇文件 。
從文件 子選單中選擇選擇頁面上的元素以檢查它 。
從文件 子選單中選擇突出顯示選定元素 。
從文件 子選單中選擇展開DOM樹 。
在右側面板中選擇樣式 選項卡。 檢視HTML網頁文件及其相關樣式表 .
檢視網頁的HTML程式碼： 如果尚未選擇，請從Dragonfly的主按鈕選單中選擇文件 。文件的程式碼顯示在左側面板中，可以選擇由選定按鈕確定的佈局。然後，單擊 文件的某個元素將選擇它。完成此操作後，將突出顯示該元素的網頁，並且相關的選擇器將移至樣式顯示的頂部。檢視正在使用的樣式表和指令碼： 當樣式顯示在右側面板中時，將顯示每個樣式塊的源，並提供指向樣式表本身的連結。只需點選該連結即可開啟樣式表。或者，使用主按鈕選單上的資源 按鈕訪問所有此類功能。修改網頁文件： 在左側面板中開啟文件後，雙擊 某個元素將開啟它以進行編輯。可以透過這種方式更改文字和結構，並在更改期間立即更新網頁。Opera還允許使用瀏覽器的右鍵單擊選單項原始碼 檢視和儲存網頁文件
研究用於網頁元素的樣式： 對於此處討論的所有功能，首先請確保在文件 子選單中選擇了選擇頁面上的元素以檢查它 和突出顯示選定元素 按鈕。這兩個按鈕允許程式的各個面板與網頁本身之間進行圖形互動。例如，當使用滑鼠單擊螢幕或文件面板的某些部分時，則可以預期以下情況網頁的被單擊元素將被突出顯示 .選定元素的標籤序列將顯示在 Dragonfly的頁尾上。元素的位置在左側面板的文件程式碼中突出顯示 。級聯樣式將顯示在該元素的 右側面板中，其內容包括或訪問以下功能樣式來源、繼承和計算值。
應用於該元素的完整屬性集。
瀏覽器初始值 的新增。
元素的盒子模型佈局。
文件文字和選擇器互動的搜尋功能。
更改活動頁面樣式的功能。 當Dragonfly尚未開啟 時，右鍵單擊頁面元素，然後選擇檢查元素 將啟動類似的操作。
修改活動頁面使用的樣式： 如樣式研究 部分所示選擇按鈕。這些更改將立即在網頁上實施，當然只會影響本地顯示編輯級聯CSS樣式 ：典型操作的選擇包括從級聯中刪除CSS屬性 。在右側面板中選擇樣式 。將滑鼠懸停在每個宣告上時，將顯示每個宣告的複選框。只需清除或選擇複選框即可從樣式級聯中刪除或新增宣告。執行此操作的效果將立即顯示在顯示的網頁上。編輯現有樣式宣告 。同樣，在右側面板中，並在選中樣式 的情況下，雙擊 某個宣告以將其像文字框一樣進行編輯。結果將在網頁上即時顯示，但此功能不適用於使用者客戶端樣式表條目。新增全新的樣式塊 。在右側面板的樣式 選項卡上，滾動到樣式列表的底部。在其中的文字框中輸入樣式表塊，然後按應用 以在網頁上顯示結果。新條目將與級聯集合並，並適當考慮其重要性等級 和特異性 ，並且其源順序 將被視為在級聯集的末尾 應用。當刪除此類新增時，應用 按鈕也可以恢復頁面。修改網頁本身。 最好的方法是右鍵單擊網頁並選擇原始碼 。這將開啟網頁文件以進行編輯。可以使用原始碼頁面的儲存 按鈕將其儲存為本地副本，並且可以使用應用更改 將更改應用於網頁以立即檢視。搜尋網頁功能 。在每種情況下，都會返回一個帶有專案計數的列表。兩個重要的用法包括以下內容在網頁中查詢任何型別的文字 。在右側面板中選擇搜尋 ，然後在出現的按鈕列表中選擇文字 。在文字框中輸入搜尋詞或短語以獲取搜尋結果列表。選擇任何列出的結果將在左側面板的文件程式碼中突出顯示其位置。查詢選擇器目標 列表 ：也就是說，查詢將受給定選擇器影響其樣式的網頁的所有部分。在右側面板中選擇搜尋 ，然後在出現的按鈕列表中選擇選擇器 。在文字框中輸入選擇器名稱，可以是現有 選擇器名稱或建議 名稱，以獲取其樣式的目標元素列表。選擇任何列出的結果將在左側面板的文件程式碼中突出顯示其位置，此外還會在網頁本身上突出顯示受影響的元素。
下面提供了一些簡短的教程。目的是提供簡短的片段來教授主題的基礎知識，而不是進行冗長的論述。其中列出了樣式表選擇器的用法，並解釋了特異性和其他一些內容。
對於那些打算透過更改樣式表和網頁內容來學習 CSS 的人來說，最好發出關於檔案快取的標準提醒。
當瀏覽器首選項（選項）更改時 ，通常需要重新啟動瀏覽器才能生效。當網頁或樣式表更改時 ，除非先清除瀏覽器快取並重新載入頁面，否則不太可能看到預期的更改。如果忽略這一點，可能會導致很多混淆。每個瀏覽器的快取清除方法都不同，但通常在瀏覽器首選項（選項）中都有一個功能。有時下拉選單項可以更快地清除快取，但有時可能需要將選項設定為在關閉時清除快取，然後重新啟動瀏覽器以顯示更改。對於以下 Opera 瀏覽器示例，清空瀏覽器快取最方便的方法是使用下拉選單項工具 / 刪除私人資料…
樣式表選擇器
基本樣式表選擇器用法
標籤選擇器
標籤選擇器是最簡單的選擇器。它們只是正在定義其樣式的 HTML 標籤的文字部分。但總的來說，選擇器之所以被稱為選擇器，是因為它用於選擇 或定位 網頁的某個部分及其樣式。它還可以與其他術語組合，以提供更具選擇性的定位。 它是樣式表示式的最左側部分，直到但不包括第一個花括號。
一個使用段落標籤選擇器的簡單樣式如下所示
p {font-size: 10pt;}
上述樣式可以自動應用於網頁上的所有簡單段落。有時選擇器會被分組以節省輸入；然後可以使相同的樣式應用於整個逗號分隔的組，如下所示 p, div, table, ul {padding: 1em}
當我們打算為頁面上的每個 標籤編寫宣告時，可以使用通用 選擇器，即星號，如下所示 * {font-family; Arial, Sans-serif}
我們還可以有條件地設定段落的樣式。如果樣式僅在段落標籤巢狀在 div 標籤內時才應用，我們可以這樣編寫該選擇器 div p {line-height:1.8em;}
類選擇器
類選擇器是與類關聯的選擇器；也就是說，一整套樣式。要使用它，必須在關聯的標籤內宣告類名。它比簡單的標籤選擇器具有更高的特異性，但低於 ID 選擇器。類可以在整個頁面中根據需要使用多次，並且可以在一個元素中宣告多個類。在樣式表中，我們可以用以下方式定義類； .thetop {font-family: Arial;}
並且要將這些樣式應用於例如文件中的段落標籤，我們可以在文件中編寫如下宣告 <p class="thetop">一些段落文字</p>
當以下兩個類一起在同一元素中宣告時，這兩個單獨定義的類的樣式將被合併 <div class="firstpara headings">文字</div>
如果選擇器 按如下所示編寫，則樣式將僅應用於聲明瞭這兩個類的元素 .firstpara.secondpara{}
ID 選擇器
這些應該在一個頁面中只使用一次，並且在一個元素中只能宣告一個。它們具有最大的特異性，僅次於內聯樣式。一個典型的 id 定義可以在樣式表中編寫如下 #Tailpiece {color:gray;}
並且我們宣告 ID 以在文件中使用，例如； <div id="Tailpiece" >這是文字</div>
上下文選擇器
這些描述了當標籤巢狀在彼此內部時要應用的樣式。在此示例中，選擇器將僅應用於巢狀在 div 標籤內的段落標籤。為此，我們編寫 div p {padding: 1em;}
當文件中的標籤看起來像這樣時，它將被應用 <div><p>這是文字</p></div>
結合上述的一些想法，以下是相同巢狀段落的樣式，但現在一個聲明瞭一個類，另一個聲明瞭一個 ID
div p.firstpara {background:green}
屬性選擇器
這些是選擇器，它們在方括號中具有一個屬性，以條件方式修改其操作。要為標題為“CSS 工作”的所有專案著色，我們可以在樣式表中編寫 [title="CSS Work"] {color: blue}
able 的元素，我們編寫
[title*="able"] {color: red}
alt 、class 、id 、lang 、style 、title 以及 html 屬性，如align 、cellspacing 等。
偽類
這些是調節行為的類，例如選擇頁面上的連結。我們可以編寫 a:active {color:purple}
偽元素
這些是可以訪問段落的“首行”和“末行”等功能的元素，並且允許在頁面中進行額外的控制。例如，它們還允許定位行中的第一個單元格 或每隔一行 。 要使所有段落的第一字母加粗，我們可以編寫
p:first-letter {font-weight:bold}
first of type 偽元素選擇其父元素的第一個 子元素，該子元素與結構匹配。例如，要使所有表格的第一列全部加粗，我們可以將選擇器編寫為
table td:first-of-type{font-weight:bold;}
last of type 偽元素選擇其父元素的最後一個 子元素，該子元素與結構匹配。此選擇器在宣告totals 類的表格的最後一行上方繪製總計線
table.totals tr:last-of-type{border-top:2px solid darkgrey;}
nth child 和nth of type 偽元素可用於透過模式選擇性地定位元素。下面的第一個示例為每隔一行 的每個表格著色
table tr:nth-child(odd) {background: #FFF;}
偶數行 著色。
table tr:nth-child(even){background:linen;}
行著色 的通用形式；本例為從第二行開始的每隔兩行著色
table tr:nth-child(3n+2){background: grey;}
列 著色，可以將兩個偽元素組合如下。此示例為每個表格的每行 中的每個偶數單元格 著色。這兩個部分都可以採用更復雜的引數。
table tr:nth-of-type(n) td:nth-of-type(even) {background:lightpink;}
重要樣式
這些是在使用者、作者或任何其他樣式源中具有高優先順序的宣告。請參閱頁面瞭解詳細資訊：例如 p{font-weight:bold !important;}
選擇器和巢狀 標籤
巢狀元素是指其開始和結束標籤本身被另一組完整標籤包圍的元素。下面的示例將使問題變得清晰。下面的 html 程式碼用於演示。其中包含許多巢狀的標籤集（表示元素）。例如，表格完全巢狀在一對 div 標籤內，所有這些都完全巢狀在一對 body 標籤之間。
巢狀的概念不限於相鄰 的標籤對。也就是說，在上面的示例中，表格也被認為巢狀在 body 標籤內，儘管 div 標籤位於它們之間。在確定哪些選擇器可能應用於文件中的特定標籤時，瀏覽器會考慮標籤所在的巢狀位置。在下面的示例中，假設瀏覽器正在嘗試為第一個標題標籤 h2 查詢相關的巢狀標籤。
圖 1：HTML 片段，用於顯示巢狀的標籤對。
<!-- Sample html code for the nesting example
Go to the examples below for an explanation -->
< body >
< div >
< h2 > First Heading</ h2 >
< p > First paragraph</ p >
< table >
< th > Column 1 Heading</ th >< th > Column 2 Heading</ th >
< tr >
< td > Cell 1 text</ td >< td > Cell 2 text</ td >
</ tr >
</ table >
</ div >
< h2 > Second Heading</ h2 >
< p class = "class1" > Second paragraph</ p >
< ol >
< li id = "id1" > First list item text
< li > Second list item text
</ ol >
</ body >
圖 2：此圖顯示了可能的選擇器作為節點。它遵循圖 1 的摘錄。請注意，在存在宣告的地方，有兩個可能的指定選擇器的路徑，一個用於帶有 宣告的標籤，一個沒有 宣告的標籤。
<html> 的選擇器。任何起作用的選擇器都可以透過連線以目標標籤結尾的選擇器軌跡來建立。生成的集合應該是空格分隔的，但不必包含獲取所需特異性所需的任何更多內容，並且序列中的任何標籤都可以省略。以下示例顯示了可能 為圖 1 的第一個標題標籤編寫的簡單選擇器1. 瑣碎的情況... 樣式表選擇器h2 將以 1 的特異性定位第一個標題。這樣的選擇器也將影響所有其他 h2 標題 .2. 巢狀在 div 標籤內... 樣式表選擇器div h2 也將定位第一個標題，這次的特異性為 2。此選擇器只能影響第一個標題，因為第二個標題未巢狀在任何 div 標籤內 . 3. 巢狀在 body 和 div 標籤內... 樣式表選擇器body div h2 將定位第一個標題，特異性為 3。因為第二個標題未巢狀在 div 內，所以此選擇器只能影響第一個標題。 4. 巢狀在 body 標籤內... 樣式表選擇器body h2 將以 2 的特異性定位第一個標題。因為這兩個標題都巢狀在 body 中，所以它會影響這兩個標題。
<body>
<h2>第一個標題</h2>
</body>
在目標標籤中新增類 和id 宣告 可以實現更精確的樣式定位，從而避免可能出現的任何混淆。這樣做也大大增加了指定選擇器的數量。下面的部分提供了一個包含此類宣告的示例。為了便於學習，它列出了一些
可能 在典型段落標籤中遇到的選擇器格式，儘管並非所有這些都是最佳選擇。
帶有類和 ID 的選擇器
圖 3：帶有宣告的示例的 HTML 片段。
< body id = "topid" >
< p > textA</ p >
< div >
< p id = "someid" class = "class1 class2" style = "color:blue;" > textB</ p >
</ div >
</ body >
圖 4：此圖將可能的選擇器顯示為節點。它遵循圖 3 的摘錄。請注意，在存在多個宣告的情況下，可以將它們組合以生成更復雜的選擇器。大多數這些選擇器在實踐中都不會使用。
圖 3 顯示了一個相當常見的標籤排列，其中一個段落巢狀在一個分割槽標籤集中，並且所有這些都被假定在網頁文件的 body 標籤內。此外，請注意段落標籤中存在宣告 ；一個id 、兩個類 和一個內聯樣式 。分割槽標籤在其內部聲明瞭一個id 。新增這些宣告允許第二個段落使用大量不同的選擇器，儘管從理論上的 64 種變化中，只有大約 20 種會真正使用。這兩個 段落，而其他樣式只會影響其中一個。參考圖 3。可以使用以下任何或所有選擇器來列出兩個段落中第二個 段落（帶有所有宣告的那個）的樣式。對於第一個 段落標籤也將受影響的情況，提供了說明。
p
通用段落選擇器。也影響第一個段落。特異性=1。
div p
用於分割槽標籤內的段落。特異性=2。
body p
用於 body 標籤內的段落，其中可選地 存在一些標籤。也影響第一個段落。特異性=至少 2。
body * p
用於 body 標籤內的段落，其中必須 存在一些標籤。也影響第一個段落。特異性=2。
body div p
用於分割槽標籤內的段落，以及這些分割槽標籤本身在 body 標籤內。特異性=3。
.class1
對於包含宣告 class= "class1" 的任何元素。特異性=10
.class2
對於包含宣告 class= "class2" 的任何元素。特異性=10
p.class1
對於包含宣告 class= "class1" 的段落。特異性=11
p.class2
對於包含宣告 class= "class2" 的段落。特異性=11
.class1.class2
對於具有宣告 class= "class1 class2" 的任何元素，兩者同時存在。特異性=20
p.class1.class2
對於具有宣告 class= "class1 class2" 的段落，兩者同時存在。特異性=21
div p.class1
對於巢狀在分割槽標籤內的、具有宣告 class="class1" 的段落。特異性=12
div p.class2
對於巢狀在分割槽標籤內的、具有宣告 class="class2" 的段落。特異性=12
div p.class1.class2
對於巢狀在分割槽標籤內的、具有宣告 class="class1 class2" 的段落。特異性=22
body div p.class1
對於巢狀在分割槽標籤內，而分割槽標籤本身巢狀在 body 標籤內的段落，並且段落具有宣告 class= "class1"。特異性=13。
body div p.class2
對於巢狀在分割槽標籤內，而分割槽標籤本身巢狀在 body 標籤內的段落，並且段落具有宣告 class= "class2"。特異性=13。
body div p.class1.class2
對於巢狀在分割槽標籤內，而分割槽標籤本身巢狀在 body 標籤內的段落，並且段落具有宣告 class= "class1 class2"。特異性=23。
body p.class1
對於巢狀在 body 標籤內的段落，無論中間是否有標籤，並且段落也具有宣告 class= "class1"。特異性=12。
body p.class2
對於巢狀在 body 標籤內的段落，無論中間是否有標籤，並且段落也具有宣告 class= "class2"。特異性=12。
body p.class1.class2
對於巢狀在 body 標籤內的段落，無論中間是否有標籤，並且段落也具有宣告 class= "class1 class2"。特異性=22。
#someid
對於具有宣告 id= "someid" 的任何元素。每個頁面只能宣告一次，並且一個元素只能列出一個。特異性=100
#topid p
對於巢狀在具有宣告 id= "topid" 的任何元素內的段落。可選地，這兩個元素之間可能存在一個標籤。（請注意，更改最後一個術語允許許多選擇器和定義）。在這種情況下影響兩個段落。特異性=至少 101
#topid * p
對於巢狀在具有宣告 id= "topid" 的任何元素內的段落。這兩個元素之間必須存在一個標籤。（請注意，更改最後一個術語允許許多選擇器和定義）。此處僅影響第二個段落。特異性=101
*
能夠顯示新增的樣式的每個元素。影響兩個段落。特異性 =0
段落標籤內的內聯樣式
當段落包含樣式宣告時。特異性=1000
如何計算特異性
樣式宣告特異性
特異性是指宣告缺乏普遍性的程度；它們應用於頁面上的標籤的程度，而不是它們應用於一般標籤的程度。決定此類問題的方法已經發展到相當大的程度。
使用的方法計算一個表示特異性的加權和。計算特異性的方法如下
對於任何給定的樣式表條目，檢查其選擇器，例如“div.p”。選擇器有時很簡單，只有一個元素，或者像這樣，複雜，有多個元素。透過按如下方式新增到總計中，為其特異性構建一個值
對於通用選擇器 (*) 或繼承值，將零新增到特異性總計中。 對於內聯樣式，將 1000 新增到總計中。 這些僅在文件中找到。對於提到的每個 ID 選擇器，將 100 新增到總計中。 對於每個類、偽類或屬性，將 10 新增到總計中 .對於每個簡單標籤元素和偽元素，將 1 新增到總計中。 在任何一個級別內 ，競爭樣式宣告中最高的特異性值導致它代表該級別在整體層疊中。（參見主頁面內的圖形）。
特異性 - 計算示例
p { } 總計=1，因為選擇器只有一個簡單標籤元素。
div p { } 總計=2，因為有兩個標籤元素 (2)。
p.topsection { } 總計=11，因為有一個標籤元素 (1)，加上一個類 (10)。
#toppara { } 總計=100，因為有一個 ID 選擇器 (100)
div table p#green { } 總計=103，因為有三個標籤選擇器 (3)，加上一個 ID (100)。
style="float:left;" 總計=1000，因為存在內聯樣式 (1000)
a:hover { } 總計=11，因為有一個標籤元素 (1)，加上一個偽類 (10)。
p:first-line { } 總計=2，因為有一個標籤元素 (1)，加上一個偽元素(1)。
p[title] { } 總計=11，因為有一個標籤元素 (1)，加上一個屬性(10)。
樣式繼承
樣式繼承
樣式繼承 是指在沒有為子 元素指定合適的樣式時，使用父 元素的樣式。樣式繼承 發生在層疊 之後，在可能的情況下填充缺失的屬性值，並且當無法做到這一點時，透過應用初始值 （CSS 屬性本身的預設值）。請注意以下幾點
父 元素子 元素的標籤）的任何元素。繼承（如果存在）發生在父元素到子元素之間 ，並且可以傳遞到子元素成為下一個元素的父元素的任何巢狀深度。之前建立的層疊 值的計算 值是繼承的 ，而不是屬性本身。因為層疊值 不再具有任何與之關聯的重要性等級 或特異性 ，所以這些因素也不會影響繼承 。如果子元素為其指定了相關樣式 ，則父元素無法透過繼承將樣式傳遞給它。即使 HTML 屬性也可以阻止繼承 ，如果它作為子元素中的相關樣式存在。發生這種情況是因為屬性被賦予等效的 CSS 格式以在層疊中起作用。它們在瀏覽器樣式表中這樣做。CSS 屬性的初始值 不參與層疊。在 層疊之後，如果沒有指定樣式，則嘗試透過繼承 解決問題，然後如果仍然無法解決，則使用在CSS 屬性定義表 中找到的初始值 。可能採用初始值的原因包括未指定屬性，並且在任何情況下都無法繼承。 屬性值存在，但其值設定為initial 。 假定使用 HTML5 標準的<!DOCTYPE html>。 這些說明將適用於其頂行條目與此處匹配的網頁文件。對於某些其他doctype ，屬性值的繼承可能完全失敗。下面的示例有助於解釋基本要點。
繼承作為預設 操作的一部分進行，在 層疊值 已解決之後 進行。這個假設使得編寫示例變得困難。因此，讀者應該假設以下示例中顯示的樣式已透過層疊 被確定為對這些元素有效。
簡單繼承
<!-- Figure 1 -->
< html >
< body style = "font-size:16px; line-height:1.5em;" >
< div >
< p > This is the test paragraph</ p >
</ div >
</ body >
</ html >
段落 的字型大小和行高將與body 標籤相同。在這種情況下，div 標籤繼承 自body 標籤，因為 div 沒有指定此類屬性。段落 由於同樣的原因繼承 自div 。
當在給定級別指定時，相對的line-height 始終計算為同一元素計算出的font-size的倍數，但在line-height繼承的情況下，則使用其父元素的計算出的line-height值。下面的示例說明了這一點。相對的font-size 始終計算為父元素計算出的font-size的倍數。
行高將應用為儘可能接近其計算出的24px的值（16px x 1.5）。
使用相對值的繼承
<!-- Figure 2 -->
< html >
< body style = "font-size:16px; line-height:1.5em;" >
< div style = "font-size:1.25em; line-height: 1.6em;" >
< p style = "font-size:1.5em;" > /* inherits calculated line-height value as 32px */
This is the test paragraph
</ p >
</ div >
</ body >
</ html >
段落的line-height從div元素繼承，因為它本身沒有這樣的樣式，但繼承的不是1.6em，而是div元素現有的計算出的line-height值。
然後段落的font-size為30px，line-height變為32px（16px x 1.25 x 1.6 = 32px）。
初始值的使用
<!-- Figure 4 -->
<!-- Assume that the browser default font-size is 16px -->
< html >
< body style = "font-size:1.5em;" >
< div style = "font-family:Garamond; font-size:1.5em;" >
< p > This is the test paragraph</ p >
</ div >
</ body >
</ html >
參考圖4。在這個示例中，段落的文字將以Garamond字型顯示，font-size為36px。div級別嘗試繼承font-size的特定值失敗，因為div 或body 標籤都沒有包含font-size測量值。但是，瀏覽器預設選項設定的初始值 為16px，body標籤採用此值使其計算出的值為24px。依次，div標籤繼承24px，然後將其自身計算為36px。段落從div標籤繼承Garamond值和36px。
繼承值的系統推導
圖5：確定繼承值的方法。 對於網頁使用者來說，估計繼承值很複雜，但在樣式完全指定的情況下很少需要。對於瀏覽器，這個問題需要一個更有條理的過程。
參考圖5瞭解此過程的策略圖表。在級聯執行完成之後，繼承執行從文件樹的最外層標籤開始，向內朝向目標標籤進行。可能包含樣式的最外層標籤是html 標籤，下一個是body標籤，依此類推，並且可能需要這些標籤中的任何一個透過繼承來貢獻樣式。
回想一下，只有當子元素本身沒有該屬性的級聯樣式時，繼承 才能從父元素 傳播到子元素 。當沒有這樣的樣式但仍然無法繼承時，則改為採用該屬性的初始值 。例如，這可能發生在HTML元素中，該元素在樣式表或頁面中都沒有宣告font-size。將使用font-size的初始值，甚至可能被巢狀元素繼承。所有CSS屬性都具有作為預設值的初始值 ，作為瀏覽器設計過程的一部分寫入屬性定義表中。
使用這樣的模型，在迴圈的任何一次迭代期間都會分配級聯 、繼承 或初始 值。在實際情況下，不會只有一次執行，而是會有多次執行，不僅到最深的目標，還包括所有側向執行。也不僅僅是一個感興趣的CSS屬性，而是所有可能應用於該元素的屬性。也許最能理解所做工作範圍的場景是，想象一下在每次迭代時同時考慮幾十個屬性，然後進行幾次更多的傳遞以獲取其餘屬性。
錯誤、註釋和空白
樣式表錯誤
當樣式表發現錯誤時，它傾向於忽略發現錯誤的功能。
如果選擇器 是非法的 ：如果其中某些字元不受CSS標準允許，則可能會發生這種情況。如果發生這種情況，則與之關聯的宣告塊中的所有樣式都將被忽略。解析將繼續進行到下一個有效的選擇器。如果宣告塊 格式錯誤 ：例如，可能缺少開括號。發生這種情況時，將忽略整個宣告塊。解析將繼續進行到下一個有效的選擇器。如果找到非法的屬性 ：例如，可能拼寫錯誤。將忽略整個宣告。解析將繼續進行到同一宣告塊中的下一個有效宣告或下一個選擇器。如果存在非法的值 ：與屬性情況一樣，將忽略整個宣告，解析將繼續進行到同一宣告塊中的下一個有效宣告或下一個選擇器。如果宣告塊中最後一個宣告缺少分號 ：樣式不受影響。如果宣告塊中任何其他宣告缺少分號 ：將忽略缺少分號的樣式及其後面的樣式。解析將繼續進行到這兩個樣式之後的下一個有效宣告或下一個選擇器。
內聯樣式錯誤
內聯樣式的解析方式與樣式表相同，因此兩個衝突樣式中的第二個樣式適用。問題主要出現在括號丟失時。
從塊末尾刪除括號： 這會導致段落完全消失！ 這可以透過使用主頁面示例中第一段的內聯樣式來演示。刪除前導括號 ：這會導致更奇怪的行為 - 應用了兩個宣告中的第一個宣告，但沒有應用第二個宣告。如果存在兩個內聯樣式塊： 第二個樣式塊將被忽略。除了末尾之外 的宣告塊中缺少分號 ：最後一個宣告末尾 缺少分號 ： 對樣式沒有影響。
樣式表中的註釋
可以按如下方式將註釋新增到樣式表中
/* This is my style-sheet user.css
These are comments and they are ignored by the parser.
Notice that the outside bounding characters are forward slashes,
and that there are asterisks on the inside of each */
p{
font-size: 30px; /* this is also a valid comment */
}
/* comment characters can also be used to temporarily disable css styles for testing */
HTML文件頁面中的註釋
HTML的註釋與CSS樣式表的註釋不同。使用以下方法將註釋新增到HTML中
<!-- This is an HTML comment and it is ignored by the parser. -->
<!-- Notice the form of the leading and end symbols -->
CSS和HTML中的空白
樣式表中的空白在很大程度上被忽略，因此可以為易於閱讀而對佈局進行間距。以下是一些比較明顯的要點。
空白可以圍繞 屬性、值、選擇器、宣告塊和整個樣式規則。
屬性、值和選擇器中的各個單詞不應使用空格或換行符打斷 。
單個樣式宣告中不允許換行符，儘管在完整宣告之間換行是預期的。 宣告不應使用換行符打斷。當採用整潔的佈局時，很少需要這樣做。
URL路徑
當在網頁文件的head部分引用樣式表時，可以做出某些假設
如果沒有給出除檔名之外的其他路徑，瀏覽器可以假設樣式表位於與網頁文件相同的資料夾中。
如果給出了完整路徑，在Opera的情況下，資料夾名稱中允許使用空格。如果瀏覽器對空格有異議，則用%20 替換空格即可解決。
可以為本地計算機上的樣式表提供本地路徑。
關於@import
可以透過為頁面head部分中的每個樣式表建立單獨的連結引用，將任意數量的樣式表新增到網頁中。使用@import指令，可以將其他樣式表新增到連結的樣式表本身。
也就是說，文件head部分列出的任何樣式表本身都可以匯入更多 樣式表。在實踐中，這意味著在連結 樣式表的頂部為每個其他樣式表放置一個單獨的@import 指令。例如：這三個額外的樣式表將與提及它們的樣式表合併
@ import "first.css" ;
@ import "second.css" ;
@ import url ( 'http://help.opera.com/css/styles.css' ) ;
/* This is main.css, the sheet referenced in the web-page's head section */
body {
font-size : 1 em ;
}
/* etc... */
注意以下幾點
匯入指令上方不能有任何鍵入內容，但允許空行。
Opera中括號是可選的，但某些瀏覽器（如Internet Explorer）可能需要它們。
每個匯入指令後面的分號是必不可少的。
樣式表將在列出它們的樣式表“之後”按順序執行。
沒有路徑的條目將被假定位於與網頁文件相同的資料夾中。
可以選擇使用url 格式匯入已知的樣式表。請參閱上面的第三個示例，並注意它使用的是單 引號。
HTML屬性
HTML屬性
預設樣式
在引入CSS樣式表之前，網頁元素的格式化是使用所謂的HTML屬性 執行的。這些是基本的樣式規則，並且每個HTML元素的規則集都不同。在沒有任何作者和使用者CSS樣式的情況下，網頁的格式化由以下內容組合處理：
瀏覽器的預設CSS樣式表（或內建樣式集）。
可能仍然適用的任何HTML屬性繼承或CSS繼承。
瀏覽器首選項（選項）中的設定。
HTML元素的屬性預設值。
有意寫入HTML標籤中的HTML屬性值。 格式STYLE= 、ID= 和CLASS= 本身就是HTML屬性，允許將CSS樣式分配給HTML標籤。也就是說，當我們將內聯樣式寫入HTML標籤或宣告id或類時，我們使用HTML屬性來執行此操作。
儘管以上列表只提到了一個 CSS 源（瀏覽器的預設樣式表），但方便起見，可以認為這些專案中的大多數都構成了預設瀏覽器集。事實上，一些開發者工具，例如 Opera Dragonfly，將新增的 HTML 屬性的等效 CSS 屬性列出，就好像它們起源於瀏覽器的預設樣式表一樣。例如，如果存在一個屬性條目align=center ，則隱含地認為它是在預設樣式表中寫成text-align:center 。此外，相同的工具將瀏覽器首選項設定中的字型詳細資訊列出，就好像它們也起源於瀏覽器預設樣式表中的 CSS 程式碼一樣。大多數情況下，這不會對理解造成任何問題，但在出現混淆時，最好牢記這一點。
屬性繼承
屬性值以及 CSS 值可以透過繼承 傳播到子級。例如，任何父級標籤中的align=center 將影響遠低於其級別的段落，假設該段落本身沒有這種樣式。
屬性優先順序
由於 HTML 屬性和 CSS 樣式可能仍然一起出現在網頁中，因此最好對它們在使用中的相對優先順序進行說明。當 CSS 值應用於同一元素上的相同樣式時，它會覆蓋簡單的 HTML 屬性值。事實上，只有在沒有表達任何 CSS 樣式時，HTML 屬性才能應用其格式。
由於這些優先順序，開發者工具（如 Opera Dragonfly）將屬性視為瀏覽器預設樣式表的一部分可能是錯誤的。顯然，即使是預設瀏覽器的 CSS 樣式也應該覆蓋屬性。在無法訪問瀏覽器預設樣式表的情況下，很難測試這些優先順序，但幸運的是，可能出現混淆的情況越來越少。
屬性廢棄
直到最近，一些 HTML 屬性比 CSS 更容易應用，但越來越多地引入 CSS 樣式來填補空白。例如，使用 HTML 屬性表示式align=center 將塊級元素對齊到頁面中心，現在可以使用 CSS 宣告margin:auto 來完成，並且最新版本的 CSS 現在允許方便地合併表格單元格。對於那些沒有 訪問樣式表（維基使用者）並且需要為表格單元格應用填充的人來說，似乎沒有替代表格級 HTML 屬性cellpadding=length 的方法，或者無限地向每個單元格新增填充。隨著每個新版本的 HTML，各種屬性都逐漸被廢棄，例如，屬性align 在 HTML5 中不可用。
儘管 CSS 級聯僅適用於 CSS 樣式的解析，但除非也考慮這些額外的預設源，否則使用者將無法獲得完整的理解。HTML 屬性及其元素預設值的列表可以在 HTML 程式碼本身的文字中找到，並且會發現它們在 HTML 版本之間有所不同。
