標籤：style http color 使用 strong 檔案
CSS 指層疊樣式表 (Cascading Style Sheets)。樣式定義如何顯示 HTML 元素。它通常儲存在樣式表中，把樣式添加到 HTML 4.0 中，解決內容與表現分離的問題。當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（預設值）。
CSS 規則由兩個主要的部分構成：選取器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選取器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字型大小設定為 14 像素。
在這個例子中，h1 是選取器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的為您展示了上面這段代碼的結構：
提示：請使用花括弧來包圍聲明。
你可以對選取器進行分組，這樣，被分組的選取器就可以分享相同的聲明。用逗號將需要分組的選取器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 { color: green; }根據 CSS，子項目從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：
body { font-family: Verdana, sans-serif; }
根據上面這條規則，網站的 body 元素將使用 Verdana 字型（假如訪問者的系統中存在該字型的話）。
通過 CSS 繼承，子項目將繼承最進階元素（在本例中是 body）所擁有的屬性（這些子項目諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子項目都應該顯示 Verdana 字型，子項目的子項目也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。
但是在那個瀏覽器大戰的血腥年代裡，這種情況就未必會發生，那時候對標準的支援並不是企業的優先選擇。比方說，Netscape 4 就不支援繼承，它不僅忽略繼承，而且也忽略應用於 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字型樣式會被忽略。我們又該如何是好呢？
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，通過這種方式來應用規則的選取器被稱為上下文選取器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱為派生選取器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選取器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選取器，我們可以使 HTML 程式碼變得更加整潔。
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選取器：
li strong { font-style: italic; font-weight: normal; }請注意標記為 <strong> 的藍色代碼的上下文關係：
<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>
在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。
id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選取器以 "#" 來定義。
需要注意的是：每一個id只能在同一html文檔出現一次。
在 CSS 中，類別選取器以一個點號顯示：
.center {text-align: center}在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。
在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。
<h1class="center">This heading will be center-aligned</h1><pclass="center">This paragraph will also be center-aligned.</p>
注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
要靈活運用各種類型CSS的使用，以及結合。
當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：
外部樣式表當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個網站的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文檔的）頭部：
<head><linkrel="stylesheet" type="text/css" href="mystyle.css" /></head>
瀏覽器會從檔案 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。
外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。下面是一個樣式表檔案的例子：
hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
內部樣式表當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:
<head>內聯樣式<style type="text/css">hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>多重樣式
如果某些屬性在不同的樣式表中被同樣的選取器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選取器的三個屬性：
h3 { color: red; text-align: left; font-size: 8pt; }
而內部樣式表擁有針對 h3 選取器的兩個屬性：
h3 { text-align: right; font-size: 20pt; }
假如擁有內部樣式表的這個頁面同時與外部樣式表連結，那麼 h3 得到的樣式是：
color:red; text-align:right; font-size:20pt;
即顏色屬性將被繼承於外部樣式表，而文字流向（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
