跳轉到內容

層疊樣式表/繼承規則

Edit links
來自華夏公益教科書，開放書籍，開放世界
< 層疊樣式表
(重定向自 CSS 層疊)

概述

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

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

網頁檔案基礎

[編輯 | 編輯原始碼]

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

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

層疊概述

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

本節提供的是對級聯過程的直觀描述，而不是詳細描述。對於已經理解這些內容的人來說，最好直接跳到詳細級聯示例部分，那裡的內容可能更符合他們的口味。無論如何，對於需要學習或提醒自己選擇器和特異性的人來說，本節CSS 教程提供了教程。對於想要深入瞭解 HTML 的人來說，可以參考W3Schools HTML，這是一個廣泛的外部參考；對於 CSS，可以參考W3Schools CSS。

繼續，瀏覽器會逐個標籤遍歷網頁，以確定它們的樣式。為此，它首先會識別巢狀，即標籤所在的文件樹的一部分。這有助於瀏覽器檢查它找到的選擇器的有效性。然後，它會搜尋所有樣式來源，包括樣式表和文件本身，尋找可能影響目標標籤的選擇器，同樣，還要考慮到標籤佈局。如果選擇器適用，其樣式屬性將按發現順序列出，最終將生成一個適用於該特定標籤的長屬性列表。列表中可能包含許多已宣告的樣式，也可能一個都沒有，具體取決於不同作者的工作情況，很明顯，大多數可能為該標籤宣告的屬性仍然不存在。

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

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

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

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

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

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


級聯後

[edit | edit source]

級聯完成後，原始已宣告樣式集將縮減為級聯樣式集，但許多屬性在第一步中根本沒有宣告。為了使瀏覽器正常工作，必須為每個被視為必不可少的元素格式屬性提供一個值。瀏覽器透過預設操作來填補這些巨大的空缺。對於每個缺失的必要屬性，它首先嚐試從父元素（即圍繞它的標籤）繼承一個合適的值；如果由於某種原因無法實現，瀏覽器會分配一個初始值。屬性初始值在設計時預設在屬性定義列表中。應用這些預設值的結果是為每個正在考慮的標籤生成一組完整的指定值，其中包含每個所需的屬性。

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

級聯詳情

[edit | edit source]
圖 3. CSS 樣式級聯。請注意，只要使用者樣式宣告帶有 !Important 標記，它們就具有最高優先順序。還要注意，優先順序較低的來源
可以影響結果，但前提是優先順序較高的來源沒有為該屬性指定值。

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

該巢狀的所有選定屬性，包括它們的優先順序、特異性和在來源中的位置，都已輸入到此頁面上的可排序表格中。讀者只需關注各種列表，並使用表格上的按鈕對其進行排序，即可看到解決這些選擇的過程。


示例的樣式來源

[edit | edit source]
用於測試的本地網頁
<!-- 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;
}


級聯排序表格

[edit | edit source]

下表 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）。

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

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

  • 首先按屬性名稱排序
  • 然後按重要性排序
  • 然後按特異性排序，分為四個步驟
  • 然後，無須排序來源順序

表 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
選擇器		 類
選擇器		 元素
選擇器		 來源
順序
字型大小 30px p (排名 5) 使用者重要 0 0 0 1 1:1
字體系列 Tahoma .Tahoma (排名 5) 使用者重要 0 0 1 0 1:2
字體系列 Times #para1 (排名 2) 使用者普通 0 1 0 0 1:3
顏色 藍色 #para1 (排名 2) 使用者普通 0 1 0 0 1:4
字型樣式 斜體 #para1 (排名 2) 使用者普通 0 1 0 0 1:5
字型粗細 普通 #para1 (排名 2) 使用者普通 0 1 0 0 1:6
字型大小 2em p (排名 3) 作者普通 0 0 0 1 2:1
字體系列 Courier p (排名 3) 作者普通 0 0 0 1 2:2
背景 綠色 .toppara (排名 3) 作者普通 0 0 1 0 2:3
邊框 1px 實線 淡灰色 .toppara (排名 3) 作者普通 0 0 1 0 2:4
字體系列 Calibri #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:5
顏色 黑色 #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:6
字型樣式 普通 #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:7
字體系列 Garamond p (排名 3) 作者普通 0 0 0 1 2:8
字型大小 20px p (排名 3) 作者普通 0 0 0 1 2:9
字型粗細 粗體 p (排名 3) 作者普通 0 0 0 1 2:10
背景 白色 p (排名 3) 作者普通 0 0 0 1 2:11
填充 10px p (排名 3) 作者普通 0 0 0 1 2:12
背景 米色 .mostparas (排名 3) 作者普通 0 0 1 0 2:13
字體系列 arial p 內聯 (排名 3) 作者普通 1 0 0 0 2:14
填充 1.5em p 內聯 (排名 3) 作者普通 1 0 0 0 2:15
顯示 塊級 p (排名 1) 瀏覽器客戶端 0 0 0 1 3:1
邊距 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 選擇器低。類可以在整個頁面中使用任意多次，並且可以在一個元素中宣告多個類。在樣式表中，我們可以使用 say 定義類；
.thetop {font-family: Arial;}


要將這些樣式應用於文件中的段落標籤，例如，我們可以在文件中編寫以下宣告
<p class="thetop"> Some paragraph text </p>


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


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


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


我們在文件中宣告 ID 以用於 say；
<div id="Tailpiece" >This is the text </div>


上下文選擇器
這些描述了當標籤相互巢狀時要應用的樣式。在此示例中，選擇器將僅應用於巢狀在分隔標籤內的段落標籤。為此，我們編寫
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}


要選擇任何標題屬性值中包含子字串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 程式碼用於演示。 其中包含許多巢狀的標籤集（代表元素）。 例如，表格完全巢狀在一對除法標籤內，所有這些完全巢狀在一對主體標籤之間。

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

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

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

四種情況是

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

<h2>First Heading</h2>

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

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

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

4. 巢狀在 body 標籤內... 注意，即使忽略了中間標籤，這也被認為是巢狀。選擇器body h2也將包含相關的樣式列表，並且由於兩個標題都巢狀在 body 中，因此它會影響它們兩者。 <body> <h2>First Heading</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 顯示了一個相當常見的標籤排列，其中一個段落巢狀在一個除法標籤集中，所有這些都假定位於網頁文件的主體標籤內。 此外，請注意，段落標籤內有宣告；一個id，兩個類和一個內聯樣式。 除法標籤在其中聲明瞭一個id。 新增這些宣告允許對第二個段落的可用選擇器進行大量變體，儘管從理論上的 64 種變體來看，只有大約 20 種會經常使用。

還請注意，還有另一個段落標籤，但它屬於不同的巢狀。 它只是巢狀在主體標籤內，與除法標籤對沒有任何聯絡。 當為段落編寫樣式時，某些樣式會影響這兩個段落，而另一些樣式只會影響其中一個。

請參閱圖 3。 以下任何或所有選擇器都可以用來列出兩個段落中的第二個段落的樣式，即包含所有宣告的那個。 對於第一個段落標籤也會受到影響的情況，提供了說明。

p
一個通用的段落選擇器。 也影響第一個段落。 特異性 = 1。
div p
用於除法標籤內的段落。 特異性 = 2。
body p
用於主體標籤內的段落，其中可選地存在一些標籤（如果有）。 也影響第一個段落。 特異性 = 至少 2。
body * p
用於主體標籤內的段落，其中必然存在一些標籤（如果有）。 也影響第一個段落。 特異性 = 2。
body div p
用於除法標籤內的段落，以及本身位於主體標籤內的除法標籤。 特異性 = 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" 的段落，該段落巢狀在 division 標籤中。特異性=12
div p.class2
對於一個包含宣告 class="class2" 的段落，該段落巢狀在 division 標籤中。特異性=12
div p.class1.class2
對於一個包含宣告 class="class1 class2" 的段落，該段落巢狀在 division 標籤中。特異性=22
body div p.class1
對於一個巢狀在 division 標籤中的段落，division 標籤本身巢狀在 body 標籤中，並且段落包含宣告 class= “class1”。特異性=13。
body div p.class2
對於一個巢狀在 division 標籤中的段落，division 標籤本身巢狀在 body 標籤中，並且段落包含宣告 class= “class2”。特異性=13。
body div p.class1.class2
對於一個巢狀在 division 標籤中的段落，division 標籤本身巢狀在 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” 的元素。在一個頁面上只能宣告一次，並且一個元素只能列出一個 ID。特異性=100
#topid p
對於一個巢狀在任何包含宣告 id= “topid” 的元素中的段落。可選地，這兩個元素之間可能存在一個標籤。（注意，改變最後一個詞語可以允許許多選擇器和定義）。在本例中影響這兩個段落。特異性=至少 101
#topid * p
對於一個巢狀在任何包含宣告 id= “topid” 的元素中的段落。必須存在這兩個元素之間的標籤。（注意，改變最後一個詞語可以允許許多選擇器和定義）。在本例中隻影響第二個段落。特異性=101
*
能夠顯示新增的樣式的每個元素。影響兩個段落。特異性 = 0
段落標籤中的內聯樣式
包含樣式宣告的段落。特異性=1000


計算特異性

[edit | edit source]

樣式宣告特異性

[edit | edit source]

特異性指的是宣告缺乏通用性的程度；它應用於頁面上的某個標籤的程度，而不是應用於通用標籤的程度。確定特異性方法的開發已相當完善。

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

對於任何給定的樣式表條目，檢查它的選擇器，例如，div.p。選擇器有時很簡單，只有一個元素，或者像這樣，很複雜，有多個元素。透過以下方式為其特異性構建一個值，並將其新增到總計中

  • 對於通用選擇器 (*) 或繼承的值，將零新增到特異性總計中。
  • 對於內聯樣式，將 1000 新增到總計中。這些樣式只存在於文件中。
  • 對於每個提到的 ID 選擇器，將 100 新增到總計中。
  • 對於每個類、偽類或屬性，將 10 新增到總計中。.
  • 對於每個簡單的標籤元素和偽元素，將 1 新增到總計中。

在同一級別內，競爭樣式宣告中特異性最高的值將代表該級別在整體級聯中的地位。（參見主頁面中的圖形）。

特異性 - 計算示例

[edit | edit source]
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)。

樣式繼承

[edit | edit source]
樣式繼承
樣式繼承

樣式繼承是指在沒有為子元素指定合適的樣式時，使用來自父元素的樣式。樣式繼承發生在級聯之後，儘可能地填充缺失的屬性值，如果無法做到，則透過應用初始值來實現，即 CSS 屬性本身的預設值。請注意以下幾點

  • 父元素是指任何其標籤完全包含另一組標籤的元素，即所謂的子元素的標籤。
  • 繼承發生在從父元素到子元素，如果有的話，可以傳遞到巢狀的任何深度，其中一個元素的子元素成為下一個元素的父元素。
  • 先前建立的級聯值的計算值會被繼承，而不是屬性本身。由於級聯值不再具有與其相關的任何重要性等級或特異性，因此這些因素對繼承也沒有任何影響。
  • 如果子元素有為其指定的相關樣式，那麼父元素不能透過繼承將樣式傳遞給它。
  • 即使 HTML 屬性也可以阻止繼承，如果它作為子元素中的相關樣式存在。這是因為屬性被賦予等效的 CSS 格式以便在級聯中發揮作用。它們在瀏覽器的樣式表中這樣做。
  • CSS 屬性的初始值不參與級聯。在級聯之後，如果未指定任何樣式，則嘗試透過繼承來解決問題，如果仍然不可行，則使用CSS 屬性定義表中找到的初始值。初始值可能被採用的原因包括
    • 未指定該屬性，並且在任何情況下都無法繼承。
    • 屬性值存在，但其值設定為initial。
  • <!DOCTYPE html> 針對 HTML5 標準，這是預設假設。這些注意事項將適用於其頂行條目與這裡一致的網頁文件。對於某些其他doctype，屬性值的繼承可能完全失敗。

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

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

簡單繼承
<!-- 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 路徑

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

  • 如果沒有給出除檔名以外的路徑，瀏覽器可以假設樣式表位於與 Web 文件相同的資料夾中。
  • 如果給出了完整路徑，在 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）可能需要它們。
  • 每個匯入指令後面的分號是必不可少的。
  • 樣式表將按順序“在”它們所列出的表之後執行。
  • 沒有路徑的條目將被假設位於與 Web 文件相同的資料夾中。
  • 可以選擇使用url 格式來匯入已知的樣式表。請參閱上面的第三個示例，注意它帶有單引號。


HTML 屬性

[編輯 | 編輯原始碼]
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 值應用於同一元素上的相同樣式時，CSS 值會取代簡單的 HTML 屬性值。事實上，只有在沒有表達任何 CSS 樣式的情況下，HTML 屬性才能應用其格式。

由於這些優先順序，像 Opera Dragonfly 這樣的開發人員工具將屬性視為瀏覽器預設樣式表的一部分可能是錯誤的。顯然，即使是預設瀏覽器的 CSS 樣式也應該覆蓋屬性。在沒有訪問瀏覽器預設表的條件下，這些優先順序很難測試，但幸運的是，可能出現混淆的情況越來越少。

屬性廢棄

直到最近，一些 HTML 屬性比 CSS 更容易應用，但越來越多的 CSS 樣式被引入以填補空白。例如，使用 HTML 屬性表示式align=center 將塊元素對齊到頁面的中心，現在可以使用 CSS 宣告margin:auto 來完成，並且最近的 CSS 版本現在允許方便地合併表格單元格。對於那些沒有 訪問樣式表（Wiki 使用者）並且需要為表格單元格應用填充的人來說，似乎除了表格級 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"
華夏公益教科書