CSS 指層疊樣式表 (Cascading Style Sheets)。樣式定義怎樣顯示 HTML 元素。它通常存儲在樣式表中，把樣式加入到 HTML 4.0 中，解決内容與表現分離的問題。
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言。全部的樣式會依據以下的規則層疊于一個新的虛拟樣式表中。其中數字 4 擁有最高的優先權。
浏覽器預設設定
外部樣式表
内部樣式表（位于 <head> 标簽内部）
内聯樣式（在 HTML 元素内部）
是以，内聯樣式（在 HTML 元素内部）擁有最高的優先權，這意味着它将優先于以下的樣式聲明：<head> 标簽中的樣式聲明，外部樣式表中的樣式聲明，或者浏覽器中的樣式聲明（預設值）。
CSS 規則由兩個基本的部分構成：選擇器，以及一條或多條聲明。
選擇器一般是您須要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設定的樣式屬性（style attribute）。
每一個屬性有一個值。屬性和值被冒号分開。
以下這行代碼的作用是将 h1 元素内的文字顔色定義為紅色。同一時候将字型大小設定為 14 像素。
在這個樣例中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
以下的示意圖為您展示了上面這段代碼的結構：
提示：請使用花括号來包圍聲明。
你能夠對選擇器進行分組，這樣，被分組的選擇器就能夠分享同樣的聲明。用逗号将須要分組的選擇器分開。在以下的樣例中，我們對全部的标題元素進行了分組。
全部的标題元素都是綠色的。
依據 CSS，子元素從父元素繼承屬性。可是它并不總是按此方式工作。看看以下這條規則：
依據上面這條規則，網站的 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 元素變為斜體字，而不是通常的粗體字。能夠這樣定義一個派生選擇器：
請注意标記為 <strong> 的藍色代碼的上下文關系：
在上面的樣例中，僅僅有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特别的 class 或 id，代碼更加簡潔。
id 選擇器能夠為标有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 "#" 來定義。
須要注意的是：每一個id僅僅能在同一html文檔出現一次。
在 CSS 中。類選擇器以一個點号顯示：
在上面的樣例中，全部擁有 center 類的 HTML 元素均為居中。
在以下的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味着兩者都将遵守 ".center" 選擇器中的規則。
注意：類名的第一個字元不能使用數字！
它無法在 Mozilla 或 Firefox 中起作用。
要靈活運用各種類型CSS的使用，以及結合。
當讀到一個樣式表時，浏覽器會依據它來格式化 HTML 文檔。插入樣式表的方法有三種：
當樣式須要應用于非常多頁面時。外部樣式表将是理想的選擇。在使用外部樣式表的情況下，你能夠通過改變一個檔案來改變整個網站的外觀。每一個頁面使用 <link> 标簽連結到樣式表。<link> 标簽在（文檔的）頭部：
浏覽器會從檔案 mystyle.css 中讀到樣式聲明，并依據它來格式文檔。
外部樣式表能夠在不論什麼文本編輯器中進行編輯。檔案不能包括不論什麼的 html 标簽。樣式表應該以 .css 擴充名進行儲存。以下是一個樣式表檔案的樣例：
不要在屬性值與機關之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，可是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
當單個文檔須要特殊的樣式時，就應該使用内部樣式表。你能夠使用 <style> 标簽在文檔頭部定義内部樣式表，就像這樣:
由于要将表現和内容混雜在一起，内聯樣式會損失掉樣式表的很多優勢。請慎用這樣的方法，例如當樣式僅須要在一個元素上應用一次時。
要使用内聯樣式。你須要在相關的标簽内使用樣式（style）屬性。Style 屬性能夠包括不論什麼 CSS 屬性。本例展示怎樣改變段落的顔色和左外邊距：
假設某些屬性在不同的樣式表中被同樣的選擇器定義。那麼屬性值将從更詳細的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
而内部樣式表擁有針對 h3 選擇器的兩個屬性：
假如擁有内部樣式表的這個頁面同一時候與外部樣式表連結。那麼 h3 得到的樣式是：
即顔色屬性将被繼承于外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被内部樣式表中的規則代替。
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)