跳轉到內容

層疊樣式表/繼承規則

Edit links
來自華夏公益教科書

摘要

術語“CSS 層疊”指的是決策過程，即 web 瀏覽器內部的軟體，它決定將許多層疊樣式表 (CSS) 樣式中的哪一個應用於網頁的每個部分。這很複雜，因為樣式是在許多地方編寫的。存在錯誤、衝突和重複，更不用說瀏覽器、使用者和作者權利的層次結構了。儘管如此，瀏覽器的軟體必須決定對頁面上的每個格式使用哪種樣式，並且即使沒有提供任何有用的樣式，也必須構建一個合理的頁面。

本頁提供了一個基本層疊過程的概述和詳細示例，雖然它能夠在過程中傳授詳細的知識，但並非專門用於教授網頁製作或樣式表製作。

Web 檔案基礎

[編輯 | 編輯原始碼]

在描述層疊的工作原理之前，它基本上只是瀏覽器功能的一個“部分”，最好回憶一下瀏覽器環境的基本特徵。

  • 網頁是使用具有.htm字尾的特定文字檔案開啟的結果。 該檔案可以使用簡單的文字編輯器編寫。它駐留在作為伺服器的遠端計算機上，但也可以駐留在本地個人計算機 (PC) 的某個資料夾中。當它的地址提供給瀏覽器時，該檔案將下載到瀏覽器快取，即 PC 上的臨時儲存位置。.htm 檔案有時被稱為web 文件。
  • web 文件中有一些標記，有助於格式化它， web 瀏覽器的作用就是應用樣式。web 文件包含一對標記，稱為標記，它們圍繞著要格式化的文字。這些標記透過說明要使用哪種頁面結構來間接標識格式；例如，列表(<li></li>)、主要標題(<h2></h2>)、子標題(<h3></h3>)、普通段落(<p></p>)，或者可能是表格單元格(<td></td>) 。頁面中所有這些不同的元素都可以具有不同的格式。
  • 這些標記是HTML語言的一部分，超文字標記語言，儘管可以使用其他語言。web 頁面中的標記名稱，例如<p>中的p，在樣式表中列出，單獨或與其他術語一起列出，正是這些樣式表選擇器列出了預期的格式的描述。也就是說，瀏覽器可以找到正確的樣式表選擇器來格式化元素，因為它們的名稱可以預測地相似。文件元素被稱為該選擇器樣式的預期目標。列出這些格式的檔案型別稱為層疊樣式表 (CSS)。
  • 樣式表只是一個具有.css字尾的文字檔案，可以使用簡單的文字編輯器編寫。作者樣式表通常位於與 web 文件本身相同的資料夾中，無論它在哪裡。無論如何，樣式表的名稱和地址由 web 文件中的一個條目提供，因此它在文件本身之後不久便會下載到瀏覽器快取中。實際上，那裡可能列出了幾個樣式表，每個樣式表都會被匯入並處理其樣式，然後才會進行下一個操作，依此類推。
  • PC 使用者也可以更改樣式。但他的使用者樣式表駐留在本地計算機上。瀏覽器將此表與所有其他樣式合併，因此兩組樣式都可能影響頁面的某些部分。當然，使用者樣式僅影響本地顯示，而不會被其他人看到。
  • 還有其他地方可以找到樣式。它們有時會寫入 web 文件的頭部部分，以及頁面標記中的內聯樣式。瀏覽器也有自己的樣式表，即使用者客戶端表，在其他樣式表丟失時提供基本佈局。有時，瀏覽器的預設設定和內建樣式表也會影響結果。瀏覽器會將所有這些來源的樣式合併。
  • 作者樣式由三個來源組成。 這些是；直接寫入 web 文件頭部部分的樣式，頭部部分引用的連結樣式表，以及頁面主要內容中的內聯樣式。有時，這些連結樣式表中的列表本身可以匯入更多樣式表。
  • 有些樣式可能比其他樣式具有更高的重要性。 在任何樣式位置中編寫的樣式，包括文件本身上的樣式，都可以具有特殊的!important標記，以將其與普通樣式區分開來。這些標記允許作者或使用者覆蓋普通樣式。此功能在測試中特別有用，或者用於在其他樣式上斷言內建瀏覽器樣式。還有!important和普通樣式中的不同級別，由它們發現的位置決定，即它們所謂的來源（稍後介紹）。
  • 有些樣式比其他樣式具有更高的特異性。 樣式表選擇器缺乏普遍性或具有狹窄定義的程度稱為特異性。例如，文件中的一些段落可能只是文件主體的一部分，並且它們的段落樣式適用於一般情況。其他一些可能需要特殊格式，因為它們是位於表格單元格內的段落。瀏覽器可以檢測到這種更具體的標記佈局，並優先考慮最匹配它的選擇器。特異性在層疊的決策過程中很重要，它的規則已經發展到相當大的程度（稍後介紹）。
  • 樣式表格式具有一些共同特徵。。圖 1 顯示了樣式表中可能存在的典型樣式塊佈局。在其中，選擇器是一組樣式宣告的主要標籤，每個樣式宣告都包含一個屬性和一個值。在示例中，樣式表的選擇器稱為div ul，它有兩個樣式宣告；一個用於line-height的屬性具有1.8em的值；另一個用於background的屬性具有darkgreen的值。可能選擇器的數量並不限於單個標記名稱，因為在示例中，這些可以複合以表示一組標記在另一組標記內的巢狀。在示例中，此選擇器將其樣式應用於巢狀在 div 標籤對內的每個無序列表，但不應用於它找到的其他無序列表示例。引入類和ID可以為選擇器使用增加更大的特異性。
  • Web 標準和規範由全球資訊網聯盟 (W3C) 和其他人管理。對於 CSS 樣式，新的標準會定期作為建議釋出。這些標準在瀏覽器的測試版中進行測試，並收集到發現的不一致和缺陷。最終將釋出新的建議。各種 W3C 教程和規範可以在下面的參見連結中找到。

層疊概述

[編輯 | 編輯原始碼]
圖 1：CSS 術語，用於描述典型的樣式表條目，即樣式規則。它描述了格式
用於巢狀在劃分塊元素標籤對內的任何無序列表。
花括號之間的宣告分組稱為宣告塊。

本節提供了層疊過程的直觀描述，而不是詳細描述。對於那些已經瞭解這些內容的人來說，最好直接跳到部分詳細的層疊示例，在那裡他們可能會更喜歡這項工作。無論如何，對於那些需要學習或提醒自己有關選擇器和特異性的人來說，教程已在部分CSS 教程中提供。對於那些希望瞭解有關 HTML 更多內容的人來說，有一個廣泛的外部參考可在W3 Schools HTML中找到，而對於 CSS，則可在W3 Schools CSS中找到。

為了繼續，瀏覽器會逐個標籤地遍歷網頁，以確定它們的樣式。為此，它首先要識別標籤所在的巢狀或文件樹的一部分。這有助於瀏覽器檢查它找到的選擇器的有效性。然後，它會搜尋所有樣式來源，包括樣式表和文件本身，以查詢可能影響所討論標籤的選擇器，同樣，要記住標籤佈局。如果選擇器適用，則會按發現順序列出其樣式屬性，結果是適用於該特定標籤的屬性長列表。該列表中可能包含許多這樣的宣告樣式，也可能沒有，具體取決於各種編寫者的工作，很明顯，大多數可能已為該標籤宣告的屬性仍然缺失。

樣式宣告可以有特殊的標記，以使它們比普通宣告具有更高的優先順序，它們使用!important關鍵字來標識。它們被稱為重要宣告。在排序其列表時，瀏覽器會將!important宣告與任何普通宣告隔離開來。然後，瀏覽器會識別圖 2 中的五個重要性等級或重要性層級，其中等級 1的優先順序最低，等級 5的優先順序最高。

圖 2：CSS Level 2 的級聯重要性等級
等級 1 瀏覽器預設樣式
在使用者代理 (UA) 樣式表中或一些等效的實現中列出的樣式。
等級 2 使用者普通樣式宣告
使用者樣式表中沒有!important 標記的那些樣式。來自特定於網站和內建樣式表的普通宣告也可以合併到這裡。
等級 3 作者普通樣式宣告
作者集合中沒有!important 標記的那些樣式。
它們包括來自文件頭部、連結的樣式表和內聯樣式的樣式。
等級 4 作者!important 樣式宣告
作者集合中有!important 標記的那些樣式。
它們包括來自文件頭部、連結的樣式表和內聯樣式的樣式。
等級 5 使用者!important 樣式宣告
使用者樣式表中有!important 標記的那些樣式。
來自特定於網站和內建樣式表的!important 宣告也可以合併到這裡。

列表上的每個屬性條目都標記著五個重要性等級之一，具體取決於選擇器的來源以及它是否為普通或重要宣告。這些專案還標記著它們的特異性，這些特異性是反映其應用範圍有多窄的加權值。每個來源位置都做了標記，該標記會標識發現的位置及其在樣式表中的位置。

然後，對資料集進行排序，以對所有類似的屬性進行分組，然後在找到的任何類似集合內（例如，十個不同的字型大小建議），進一步對它們進行排序，以獲得最高的重要性。對於這些排序後的任何密切競爭的集合，再次按最高特異性對它們進行排序，以最終隔離列表中每個不同屬性的值。如果兩個宣告仍然匹配，則最後一個決定性的排序是來源位置，它們是在其中找到的；也就是說，最後考慮用於列出的那個將勝出。圖 3 的圖形描繪了級聯樣式在解析單個段落標籤格式時所涉及的級聯，其詳細資訊與後面部分中的詳細示例相同。

在確定了哪些格式適用於特定標籤後，瀏覽器會對頁面上的每個標籤重複此過程，然後使用其渲染引擎應用所有格式。

需要注意的重要一點是，在建立其屬性列表時，瀏覽器始終按從網頁頂部到底部以及從它遇到的每個樣式表頂部到底部的遍歷順序精確地建立列表。它還會在新增列表時遵循在網頁標題中找到的樣式序列。這種方法對瀏覽器解決來源順序是決定性因素的衝突具有影響。請再次記住，所有這些列表活動都針對頁面上的每個標籤對進行。


級聯之後

[編輯 | 編輯原始碼]

級聯執行完畢後，最初的宣告樣式集將被縮減為一個級聯樣式集，但許多屬性最初並未宣告。為了使瀏覽器正常執行，必須為每個被認為對該元素格式化必不可少的屬性提供單個值。瀏覽器會使用其預設操作填補這些大的空缺。對於每個缺少的必不可少屬性，它首先嚐試從父元素（即，從圍繞它的標籤）繼承合適的值；如果由於某種原因無法這樣做，則瀏覽器會分配一個初始值。屬性初始值是在設計時在屬性定義列表中預設的。應用這些預設值的結果是建立了一個全面的指定值集，其中包括每個標籤需要考慮的每個屬性。

下一階段是從指定值建立計算值，方法是考慮例如任何已引用的相對大小。例如，1em 的字型大小需要透過將其與某個參考點相關聯來轉換為畫素值。對集合進行一些進一步的調整後，會生成使用值，這些值會在渲染頁面時進行嘗試。這些值可能會進一步調整以適應佈局中的約束或對字型大小進行舍入，此時它們被稱為實際值。

級聯的詳細資訊

[編輯 | 編輯原始碼]
圖 3. CSS 樣式級聯。請注意，使用者樣式宣告具有最高優先順序，前提是它們帶有 !important 標記。另請注意，優先順序較低的來源
可以對結果產生影響，但前提是優先順序較高的來源尚未為該屬性指定。

為了更詳細地瞭解級聯過程，下面準備了一個示例部分。在其中，可以研究源樣式表本身和用於示例的文件。假設瀏覽器正在嘗試解析文件中第一個段落標籤的樣式。應用於該標籤的樣式表宣告以綠色突出顯示，以幫助讀者跟蹤過程。

所有為此巢狀選擇的選擇屬性、它們的重要性等級、特異性和在來源中的位置都已輸入到此頁面的一個可排序表格中。讀者只需跟蹤各種列表並使用表格上的按鈕對其進行排序，即可瞭解解析這些選擇的過程。


示例的樣式來源

[編輯 | 編輯原始碼]
用於測試的本地網頁
<!-- This is the web-page, the document htm file used for local testing, and the declarations that are associated with the first document paragraph are marked in green. -->

<!DOCTYPE html>
<html>
<head>

<title>My HTML Test Document</title>
  
<style type="text/css">
p {
<span style="background:palegreen;">font-size:2em;
font-family:courier;</span>
}
.toppara{<span style="background:palegreen;">
background:green;
border:1px solid lightgrey;</span>
}
</style>
<link rel="stylesheet" href="Main.css" type="text/css" media="screen">
</head>
<body>
    <div>
       <p <span style="background:palegreen;">id="para1" class="Tahoma mostparas toppara" </span> style="<span style="background:palegreen;">font-family:arial;padding:1.5em;</span>">
This is the top (first) paragraph and is styled as 30px Black Bold Normal Text in Tahoma with the browser's 1em 0 margins.   There is a beige background, a styled border, and 1.5em of text padding.</p>
    </div>
       <p id="para2" style="color:red;">This is the second paragraph and is styled as 30px Red Bold Italic Text in Garamond with the default browser 1em 0 margins. There is a white background and 10px of padding.</p>

</body>
</html>



用於測試的使用者樣式表
/* This is User.css, and the declarations that are associated with the first document paragraph are marked in #ffffcc.*/


p{
font-size: 30px !important;
}

.Tahoma{
font-family: Tahoma !important;
}


#para1{
font-family: Times;
color: blue; 
font-style: italic;
font-weight: normal;
}


#para2{
font-size:10pt;
color:white;
font-style:italic;
}

div{}



用於測試的作者樣式表
/* This is Main.css, and the declarations that are associated with the first document paragraph are marked in #ffffcc.*/


#para1.Tahoma{
font-family:Calibri !important;
color:black !important;
font-style:normal !important;
}

p{
font-family:Garamond;  
font-size:20px;
font-weight:bold;
background:white;
padding:10px;
}

.mostparas{
background:beige;
}



Opera 10 瀏覽器樣式表
/* This is the Opera browser's Client Style-sheet.   It is used when styles are not otherwise specified, and so has the lowest importance. The declarations that are associated with the first document paragraph, (just the ''p'' in this case), are marked in #ffffcc.*/

/*   Note that this CSS style-sheet is correct for Opera 10, and although the intention is unlikely to have much changed for later Opera versions, no data has been found for these; not CSS sheets or listings that describe their equivalent behavior.*/


/* Copyright 2010 Opera Software */

a {
	color: #00C;
	text-decoration: underline;
}

a:visited {
	color: #800080;
}

abbr {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

address {
	display: block;
	font-style: italic;
	padding-left: 2px;
	padding-right: 2px;
}

area {
	display: none;
}

audio {
	display: none;
}

audio[controls] {
	display: inline;
}

b {
	font-weight: bold;
}

base {
	display: none;
}

bdo {
	direction: rtl;
	unicode-bidi: bidi-override;
}

blockquote {
	display: block;
	margin: 1em 10px 1em 40px;
}

[dir=rtl] blockquote {
	margin: 1em 10px 1em 40px;
}

body {
	display: block;
	margin: 8px;
}

button {
	border-width: 2px;
	color: #000;
	display: inline-block;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px 8px;
	text-align: center;
	text-indent: 0;
	white-space: nowrap;
}

caption {
	display: table-caption;
	text-align: center;
}

cite {
	font-style: italic;
}

code {
	font-family: use-lang-def;
	font-size: 0.81em;
}

col {
	display: table-column;
}

colgroup {
	display: table-column-group;
}

datalist {
	display: none;
}

dd {
	margin: 0 0 0 40px;
}

[dir=rtl] dd {
	margin: 0 40px 0 0;
}

del {
	text-decoration: line-through;
}

dfn {
	font-style: italic;
}

div {
	display: block;
}

dl {
	display: block;
	margin: 1em 0;
}

dt {
	display: block;
}

em {
	font-style: italic;
}

fieldset {
	border-style: groove;
	border-width: 2px;
	display: block;
	margin-left: 2px;
	margin-right: 2px;
	padding: 0.33em 0.67em 0.75em;
}

form {
	display: block;
}

h1 {
	display: block;
	font-size: 2em;
	font-weight: bold;
	margin: 0.67em 0;
}

h2 {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0.83em 0;
}

h3 {
	display: block;
	font-size: 1.17em;
	font-weight: bold;
	margin: 1em 0;
}

h4 {
	display: block;
	font-weight: bold;
	margin: 1em 0;
}

h5 {
	display: block;
	font-size: 0.83em;
	font-weight: bold;
	margin: 1.67em 0;
}

h6 {
	display: block;
	font-size: 0.67em;
	font-weight: bold;
	margin: 2.33em 0;
}

head {
	display: none;
}

hr {
	border-style: inset;
	border-width: 1px;
	box-sizing: content-box;
	display: block;
	height: 0;
	margin: 10px 0;
	text-align: center;
}

html {
	display: block;
}

i {
	font-style: italic;
}

iframe {
	border-style: inset;
	border-width: 2px;
}

input {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
	text-transform: none;
}

ins {
	text-decoration: underline;
}

kbd {
	font-family: use-lang-def;
	font-size: 0.81em;
}

keygen {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
}

legend {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
}

li {
	display: list-item;
}

link {
	display: none;
}

menu {
	display: block;
	margin: 1em 0 1em 40px;
	padding-left: 2px;
	padding-right: 2px;
}

[dir=rtl] menu {
	margin: 1em 40px 1em 0;
}

meta {
	display: none;
}

noscript {
	display: none;
}

ol {
	padding: 0 40px 0 0;
}

optgroup {
	text-indent: 0;
}

option {
	text-indent: 0;
}

p {
	display: block;
	margin: 1em 0;
}

pre {
	display: block;
	font-family: use-lang-def;
	font-size: 0.81em;
	margin: 1em 0;
	white-space: pre;
}

q {
	quotes: "\"" "\"" "'" "'";
}

samp {
	font-family: use-lang-def;
	font-size: 0.81em;
}

script {
	display: none;
}

select {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
}

strong {
	font-weight: bold;
}

style {
	display: none;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

table {
	border-spacing: 2px;
	display: table;
	text-indent: 0;
}

tbody {
	display: table-row-group;
	vertical-align: middle;
}

td {
	display: table-cell;
	padding: 1px;
	vertical-align: inherit;
}

textarea {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	padding: 1px;
	text-align: default;
	text-indent: 0;
	text-transform: none;
}

tfoot {
	display: table-footer-group;
	vertical-align: middle;
}

th {
	display: table-cell;
	font-weight: bold;
	padding: 1px;
	vertical-align: inherit;
}

thead {
	display: table-header-group;
	vertical-align: middle;
}

title {
	display: none;
}

tr {
	display: table-row;
	vertical-align: inherit;
}

ul {
	display: block;
	list-style-position: outside;
	list-style-type: disc;
	margin: 1em 0;
	padding: 0 0 0 40px;
}

[dir=rtl] ul {
	padding: 0 40px 0 0;
}

var {
	font-style: italic;
}

video {
	display: inline;
}


級聯排序表

[編輯 | 編輯原始碼]

下面的表 1 列出了適用於示例文件中第一個段落標籤的所有屬性，並且它們按找到它們的從上到下順序進行排列。

  • 首先，使用者樣式表user.css 按從上到下順序排列。（1:1 到 1:6；六個屬性作為第一個要考慮的來源）。
  • 然後是頭部樣式，因為它們位於文件中高於樣式錶鏈接的位置。（2:1 到 2:4）。
  • 接下來是作者樣式表main.css；（這些被標記為 2:5 到 2:13）。
  • 然後，將兩個內聯樣式新增為專案（2:14 到 2:15）。
  • 瀏覽器的客戶端樣式表也有貢獻，因此最後添加了這些樣式（3:1 和 3:2）。

可以在表 1 中看到這 23 個專案。

要解決這些眾多競爭樣式中的哪些將最終用於第一個段落，可以使用一個模擬級聯行為的排序模型。它的作用是對專案進行排序

  • 首先按屬性名稱
  • 然後按重要性
  • 然後按特異性，分四個步驟
  • 然後，不必要地，按來源順序

表 1 以自然來源順序開啟，讀者可以對其進行排序，以檢視每個步驟如何影響級聯。

排序成功完成後，將選擇這些專案，就好像它們構成一個集合一樣

p{
 background:beige;
 border:1px solid lightgrey;
 color: black;
 display: block;
 font-family: Tahoma;
 font-size: 30px;
 font-style: normal;
 font-weight: bold;
 margin: 1em 0;
 padding:1.5em; 
}

要將列出的樣式集合排序為合格的幾個，首先按屬性列的箭頭進行排序，不按Shift鍵，然後從左到右對剩餘的可排序列進行排序，以相同的方式但按住Shift鍵。這會將選擇項帶到其不同屬性集的底部或頂部，具體取決於使用者是按升序還是降序排序。為了幫助初次使用，將選擇項將以藍色標記.

表 1：可排序表格，用於解析示例段落標籤的 CSS 級聯
宣告   權重
特異性
屬性 值 選擇器 重要性 樣式
屬性		 ID
選擇器		 類
選擇器		 元素
選擇器		 來源
順序
font-size 30px p (排名 5) 使用者重要 0 0 0 1 1:1
font-family Tahoma .Tahoma (排名 5) 使用者重要 0 0 1 0 1:2
font-family Times #para1 (排名 2) 使用者普通 0 1 0 0 1:3
color blue #para1 (排名 2) 使用者普通 0 1 0 0 1:4
font-style italic #para1 (排名 2) 使用者普通 0 1 0 0 1:5
font-weight normal #para1 (排名 2) 使用者普通 0 1 0 0 1:6
font-size 2em p (排名 3) 作者普通 0 0 0 1 2:1
font-family Courier p (排名 3) 作者普通 0 0 0 1 2:2
background green .toppara (排名 3) 作者普通 0 0 1 0 2:3
border 1px solid lightgrey .toppara (排名 3) 作者普通 0 0 1 0 2:4
font-family Calibri #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:5
color black #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:6
font-style normal #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:7
font-family Garamond p (排名 3) 作者普通 0 0 0 1 2:8
font-size 20px p (排名 3) 作者普通 0 0 0 1 2:9
font-weight bold p (排名 3) 作者普通 0 0 0 1 2:10
background white p (排名 3) 作者普通 0 0 0 1 2:11
padding 10px p (排名 3) 作者普通 0 0 0 1 2:12
background beige .mostparas (排名 3) 作者普通 0 0 1 0 2:13
font-family arial p inline (排名 3) 作者普通 1 0 0 0 2:14
padding 1.5em p inline (排名 3) 作者普通 1 0 0 0 2:15
Display Block p (排名 1) 瀏覽器客戶端 0 0 0 1 3:1
Margin 1em 0 p (排名 1) 瀏覽器客戶端 0 0 0 1 3:2


一些結論

[編輯 | 編輯原始碼]
  • 請注意，在正確排序的表格中，大多數示例都是根據它們的排名順序選擇的，換句話說，就是它們的重要性。
  • 然而，背景屬性不是透過重要性或特異性來解析的，因為這些屬性在背景屬性集中對於每個屬性都是相同的。它們僅透過源順序進行選擇，也就是說，它們在列表中的順序。
  • 另一方面，填充屬性的兩個列表具有相同的重要性，但在特異性方面有所不同。來自內聯樣式的屬性在此基礎上被選中。
  • 請注意，在上述層次結構中，帶有!important關鍵字標記的使用者樣式具有所有樣式中最高的優先順序，並且它們只能透過省略來失敗。也就是說，可以使用其他樣式，但前提是未在那裡指定格式。一般來說，選擇代表級聯中源級別的樣式只能在排名高於它的重要性源未設定自己的值時，才能對最終結果產生影響。圖 3 中的圖形以比排序表格更直觀的方式顯示了這一點，但它顯示的是同一個示例。
  • 關於此選擇過程，一個不太明顯的地方是，帶有!important標記的宣告不需要高特異性就能生效。也就是說，儘管!important宣告在它們自己的源排名中根據特異性進行排序，但完全有可能一個特異性較低的宣告將被選中來代表它的排名。然後，由於排名來源的優先順序，低特異性專案可以勝過特異性高得多但優先順序低得多的專案。這為!important宣告提供了非常廣泛的範圍，由於它們確實如此，因此在使用中儘可能縮小它們的範圍至關重要。例如，作者樣式表中一個高特異性的普通宣告
     div table tr td p {color:red}   /* for a paragraph in a cell of a row of a table in a division block */
    仍然可以被一個低特異性宣告覆蓋
    p{color:green !important}       /* for a paragraph wheresoever found on the page */
    除了影響特定示例之外，此後一個宣告還會對所有帶有普通優先順序的段落宣告產生影響。
  • 從可能過少的​​資料泛化來看，可以說，宣告的排名位置賦予它們越高的重要性，就越需要注意縮小它們的範圍，如果它們不希望在範圍內變得過於霸道。

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"> Some paragraph text </p>


當以下兩個類在同一個元素中一起宣告時，兩個單獨定義的類的樣式將被合併
<div class="firstpara headings">The text</div>


如果選擇器按如下所示編寫，則樣式將僅應用於同時聲明瞭兩個類的元素
.firstpara.secondpara{}


ID 選擇器
這些 ID 在一個頁面中只應使用一次，並且在一個元素中只能宣告一個。它們具有最高的特異性，僅次於內聯樣式。一個典型的 ID 定義可以在樣式表中寫成
#Tailpiece {color:gray;}


在文件中使用 ID 進行宣告，例如：
<div id="Tailpiece" >This is the text </div>


上下文選擇器
它們描述了當標籤相互巢狀時要應用的樣式。在此示例中，選擇器將僅應用於巢狀在 division 標籤內的段落標籤。為此，我們編寫
div p {padding: 1em;}


當文件中的標籤看起來像這樣時，它將被應用
<div><p>The is the text</p></div>


組合以上一些想法，以下是相同巢狀段落的樣式，但現在一個聲明瞭類，另一個聲明瞭 ID

div p.firstpara {background:green}
div p#tailpiece {font-size:30pt}


屬性選擇器
這些選擇器在方括號中包含一個屬性，以條件方式修改它們的動作。要對所有標題為“CSS Work”的專案進行顏色設定，我們可以在樣式表中編寫
[title="CSS Work"] {color: blue}


要選擇任何在 title 屬性的值中包含子字串“able”的元素，我們編寫

[title*="able"] {color: red}


其他屬性可能包括alt、class、id、lang、style、title 以及 html 屬性，如align、cellspacing 等。


偽類
這些是調節行為的類，比如選擇頁面上的連結。我們可以寫
a:active {color:purple}


偽元素
這些是能夠訪問諸如段落的“first-line”和“last-line”等功能的元素，並且允許對頁面進行額外的控制。例如，它們還允許對第一行中的第一個單元格或每行偶數或奇數行進行定位。

要使所有段落的第一個字母變為粗體，我們可以編寫

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 程式碼用於演示。其中包含許多巢狀的標籤集（代表元素）。例如，表格完全巢狀在一對 division 標籤內，所有這些都完全巢狀在一對 body 標籤之間。

巢狀的概念不僅限於相鄰的標籤對。也就是說，在上面的示例中，表格也被認為巢狀在 body 標籤內，儘管 division 標籤位於它們之間。在確定哪些選擇器可能適用於文件中的特定標籤時，瀏覽器會考慮標籤所在的巢狀位置。在下面的示例中，假設瀏覽器正在嘗試為第一個標題標籤 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 的片段。注意，在存在宣告的地方，有兩種可能的路線可以指定選擇器，一種是用於帶宣告的標籤，另一種是用於不帶宣告的標籤。

通常，透過實踐，網頁構建者可以透過簡單的檢查來檢視標籤集內部的關係，但在這裡，將列出並解釋巢狀的標籤對。在上面的片段中，巢狀在 division 內的 h2 標籤有四個可能的巢狀，這意味著有四種可能的寫法來編寫包含該標籤的選擇器。也就是說，單獨或至少設定在某個地方完整的標籤對之間。

在圖 2 中可以看到所有可能應用於圖 1 片段的選擇器，除了那些包含通用選擇器和省略的根元素<html> 的選擇器。任何有效的選擇器都可以透過連線以目標標籤結尾的選擇器軌跡來建立。生成的集合應該是用空格分隔的，但不需要包含更多內容來獲得所需的特異性，並且序列中的任何標籤都可以省略。下面的示例顯示了可能為圖 1 的第一個標題標籤編寫的簡單選擇器

這四種情況是

1. 瑣碎的情況... 標籤本身...選擇器h2 本身將包含相關的樣式列表，並且此通用選擇器也會影響第二個標題。

<h2>First Heading</h2>

2. 巢狀在 div 標籤內...選擇器div h2 將包含相關的樣式列表，並且由於第二個標題未巢狀在 division 內，因此此選擇器僅影響第一個標題。

<div>
        <h2>First Heading</h2>
</div>

3. 巢狀在 body 和 div 標籤內...選擇器body div h2 將包含相關的樣式列表，並且由於第二個標題未巢狀在 division 內，因此此選擇器僅影響第一個標題。 <body> <div> <h2>First Heading</h2> </div> </body>

4. 巢狀在 body 標籤內... 注意，即使忽略了中間標籤，這也算作巢狀。選擇器 body h2 也將包含相關樣式列表，因為這兩個標題都巢狀在 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 顯示了一個相當常見的標籤排列，其中一個段落巢狀在分隔標籤集中，並且所有這些都被假定為在 Web 文件的 body 標籤內。此外，請注意段落標籤中有宣告；一個id、兩個類和一個內聯樣式。分隔標籤已在其內聲明瞭一個id。新增這些宣告允許在第二個段落可用選擇器中產生大量變體，儘管從理論上的 64 種變體中，只有大約 20 種會真正被使用。

還要注意，還有另一個段落標籤，但它屬於不同的巢狀結構。它只是巢狀在 body 標籤內，並且與分隔標籤對沒有關聯。當為段落編寫樣式時，某些樣式會影響這兩個段落，而另一些樣式只會影響其中一個。

參考圖 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


計算特指性

[編輯 | 編輯原始碼]

樣式宣告特指性

[編輯 | 編輯原始碼]

特指性是指宣告缺乏普遍性的程度；它們適用於頁面上的標籤而不是適用於一般標籤的程度。決定此類問題的 method 已得到相當大的發展。

使用的 method 計算一個加權總和來表示特指性。計算特指性的方法如下

對於任何給定的樣式表條目，檢查其選擇器，例如，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。
  • <!DOCTYPE html> 假設為 HTML5 標準。這些說明適用於其頂行條目與此處匹配的網頁文件。對於某些其他文件型別，屬性值的繼承可能完全失敗。

下面的示例有助於解釋基本要點。

繼承作為預設操作的一部分進行，在級聯值已解析之後。這種假設使編寫示例變得困難。因此，讀者應該假設在下面的示例中顯示的樣式已透過級聯解析為對這些元素有效。

簡單繼承
<!-- Figure 1 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div>   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>


參考圖 1。在上面的情況下，段落的字型大小和行高將與body標籤相同。在這種情況下，div標籤從body標籤繼承，因為 div 沒有指定此類屬性。段落由於相同的原因而從div繼承。

在給定級別指定時，相對行高始終計算為同一元素的計算字型大小的倍數，但在繼承行高的情況下，會使用其父元素的行高計算值。下一個示例說明了這一點。相對字型大小始終計算為父元素的計算字型大小的倍數。

行高將應用為儘可能接近其計算的 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>


參考圖 2。在這個稍微複雜的情況下，div 的計算字型大小為 20px，基於此，段落的字型大小計算為 30px，（16px x 1.25 X 1.5 = 30px）

段落的行高從 div 元素繼承，因為它沒有自己的這種樣式，但繼承的不是 1.6em，而是它在 div 中存在的行高的計算值。

段落的字型大小然後為 30px，行高變為 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 字型，字型大小為 36px。div 級別嘗試繼承字型大小的特定值失敗，因為div或body標籤都沒有字型大小測量值。但是，初始值（由瀏覽器的預設選項設定）為 16px，body 標籤採用此值使其計算值為 24px。反過來，div 標籤繼承 24px，然後將其自身計算為 36px。段落從 div 標籤繼承 Garamond 值和 36px。



繼承值的系統推導
圖 5：確定繼承值的系統方法。

對於網頁使用者來說，估計繼承值很複雜，但在完全指定樣式的情況下很少需要。對於瀏覽器來說，這件事需要一個更系統的方法。

參考圖 5，瞭解此過程的策略圖表。級聯執行結束後，繼承執行從文件樹的最外層標籤開始，向內移動到目標標籤。可能包含樣式的最外層標籤是html標籤，下一個是body標籤，依此類推，可能需要其中任何一個標籤透過繼承提供樣式。

回想一下，繼承只能從父元素傳播到子元素，如果子元素本身沒有該屬性的級聯樣式。當沒有這樣的樣式但仍然無法繼承時，則改為取該屬性的初始值。例如，這可能發生在沒有在樣式表或頁面中宣告字型大小的 HTML 元素中。將使用字型大小的初始值，甚至可能被巢狀元素繼承。所有 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 路徑

當在網頁文件的頭部部分引用樣式表時，可以做出一些假設

  • 如果沒有給出除檔名以外的路徑，瀏覽器可以假設樣式表將位於與網頁文件本身相同的資料夾中。
  • 如果給出了完整路徑，在 Opera 的情況下，資料夾名中允許使用空格。如果瀏覽器對空格有異議，則用%20替換空格可以解決問題。
  • 可以為本地計算機上的樣式表提供本地路徑。


關於 @import

透過為頁面頭部部分中的每個樣式表建立單獨的連結引用，可以將任意數量的樣式表新增到網頁中。使用 @import 指令，可以將其他樣式表新增到已連結的樣式表本身。

也就是說，文件頭部部分中列出的任何樣式表都可以匯入其他樣式表。在實踐中，這意味著在已連結樣式表的頂部為每個其他樣式表放置一個單獨的@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:1em;
}

/*    etc...   */

注意以下事項

  • 匯入指令上方不能有任何鍵入內容，但允許使用空行。
  • 括號對於 Opera 是可選的，但某些瀏覽器（如 Internet Explorer）可能需要它們。
  • 每個匯入指令後的分號是必不可少的。
  • 樣式表將在它們所列出的表“之後”按順序執行。
  • 沒有路徑的條目將被假定位於與網頁文件本身相同的資料夾中。
  • 可以選擇使用url格式匯入已知的樣式表。請參閱上面的第三個示例，並注意它使用的是單引號。


HTML 屬性

[編輯 | 編輯原始碼]
HTML 屬性


HTML 屬性

 

預設樣式

在引入 CSS 樣式表之前，網頁元素的格式化是透過所謂的HTML 屬性來實現的。這些是基本的樣式規則，並且每個 HTML 元素的集合都不同。在沒有作者和使用者 CSS 樣式的情況下，網頁的格式化由以下因素共同決定：

  • 瀏覽器的預設 CSS 樣式表（或內建樣式集）。
  • 任何可能仍然適用的 HTML 屬性繼承或 CSS 繼承。
  • 瀏覽器偏好設定（選項）。
  • HTML 元素的屬性預設值。
  • 故意寫入 HTML 標籤中的 HTML 屬性值。

格式STYLE=、ID=和CLASS=本身是 HTML 屬性，允許將 CSS 樣式分配給 HTML 標籤。也就是說，當我們在 HTML 標籤中寫入內聯樣式，或宣告 id 或 class 時，我們使用 HTML 屬性來執行此操作。

雖然上面的列表只提到了一個 CSS 源（瀏覽器的預設樣式表），但將這些專案中的大多數視為預設瀏覽器集的組成部分是比較方便的。事實上，一些開發工具（如 Opera Dragonfly）會將新增的 HTML 屬性的等效 CSS 屬性列出，就好像它們起源於瀏覽器的預設樣式表一樣。例如，在有屬性條目align=center的地方，它被隱含地寫成預設樣式表中的text-align:center。此外，同一個工具還會將瀏覽器偏好設定中的字型詳細資訊列出，就好像它們也起源於瀏覽器預設樣式表中的 CSS 程式碼一樣。大多數情況下，這不會對理解造成任何問題，但如果存在混淆，最好牢記這一點。

屬性繼承

屬性值和 CSS 值可以透過繼承傳播到子級。例如，任何父級標籤中的align=center將影響遠遠低於其的段落，假設該段落本身沒有這種樣式。

屬性優先順序

由於 HTML 屬性和 CSS 樣式可能仍然一起出現在網頁中，因此最好討論它們在使用中的相對優先順序。當 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 版本之間有所不同。


另見

[編輯 | 編輯原始碼]
檢索自 "https://wikibook.tw/w/index.php?title=Cascading_Style_Sheets/Inheritance_Rules&oldid=4413665"
華夏公益教科書