標籤：
CSS簡介CSS stands for Cascading Style Sheets
CSS意思就是層疊樣式表。
Styles define how to display HTML elements
樣式定義了HTML元素怎樣去顯示。
Styles are normally stored in Style Sheets
樣式一般儲存在樣式表中。
Styles were added to HTML 4.0 to solve a problem
樣式添加到HTML4.0中用來解決問題。
External Style Sheets can save you a lot of work
利用外部樣式表可以提高你的工作效率。
External Style Sheets are stored in CSS files
外部樣式表儲存在CSS檔案中。
With CSS, your HTML documents can be displayed using different output styles
使用CSS，你的HTML文檔可以用不同的樣式輸出來顯示。
HTML標籤起初被設計成為定義文檔的內容。通過使用像<h1>，<p>，<table>這樣的標籤，他們應該表達的是“這是一個標題”,“這是一個段落”,“這是一張表格“，而布局該由瀏覽器來處理並非使用格式化標籤。
為瞭解決這個難題，W3C （ World Wide Web Consortium ）這個非贏利的，建立標準的組織，為HTML4.0增加了樣式。
所有主流瀏覽器都支援樣式表。樣式表定義元素怎樣去顯示。外部樣式表能夠讓你改變所有出現在你WEB中頁面的外觀和布局，而僅僅通過編輯一個單獨的CSS文檔。(原理就是一動多變)
CSS是一個在設計領域中的突破，因為它允許開發人員一下就能控制多個WEB頁的樣式和布局。作為一名WEB開發人員你可以為每個HTML元素和應用他的每個頁面定義一個你想要的樣式來實現全面的改變，簡單的改變樣式，所有與之相關的元素都會自動更新。
樣式表允許樣式資訊用多種方式來定義。樣式可以在一單獨的HTML元素中指定，在<head>元素中或在一外部CSS檔案中，甚至多個外部樣式表能集中在一個單一的HTML文檔中。
問題：當多於一種的樣式指定一HTML元素時使用怎樣的樣式呢？
答：
一般說來所有樣式有下面的規則(第四個最有優先性)：
<head> tag) <head>標籤內)所以寫在HTML元素中的樣式有最高的優先權(寫在HTML元素內的)，它會替代其他形式的樣式。
CSS文法The CSS syntax is made up of three parts: a selector, a property and a value.
CSS的文法由三部分組成：一個選取器，一個屬性和一個值，例如：
selector {property: value}選取器是你希望去定義的HTML元素/標籤，每個屬性可以有一個值，屬性和值由冒號區分開外面用大括弧括起來。
body {color: black}如果值為多個單詞則用雙引號括起來。
p {font-family: "sans serif"}注意：如果你想指定多個屬性，你就必須將每個屬性用分號隔開，下面的例子就示範了怎樣定義置中紅色文欄位落。
p {text-align:center;color:red}為了讓樣式定義更有可讀性，你可以像這樣分行描述屬性。
p { text-align: center; color: black; font-family: arial}你可以將選取器組合，用逗號分隔每個選取器。下面的例子將所有的標題元素組合起來，它們的顏色都變為綠色。
h1,h2,h3,h4,h5,h6 { color: green }用選取器類你可以將同一類型的HTML元素定義出不同的樣式。比如你想在你的文檔中有兩種不同樣式的段落：一種是靠右對齊，另外是置中的。這就告訴你該怎麼用樣式來做到這點。
p.right {text-align: right}p.center {text-align: center}你必須在你的HTML文檔中使用類屬性（才能顯示出效果）。
<p class="right"> This paragraph will be right-aligned. </p><p class="center"> This paragraph will be center-aligned. </p>注意：每個HTML元素只能有一個類屬性，下面的例子是不符合規範的：
<p class="right" class="center"> This is a paragraph. </p>你也可以省略標籤名稱直接去定義，這樣就可以在所有的HTML元素中使用了。下面的例子就能讓所有HTML中所有帶class=”center”的元素文字置中：
.center {text-align: center}下面的代碼中H1和P元素都有class=”center”。這就意味著這兩個元素都將遵循選取器”center”的規則。
<h1 class="center"> This heading will be center-aligned </h1><p class="center"> This paragraph will also be center-aligned. </p>注意：請不要用以數字開頭為名稱的類，在Mozilla/Firefox中不能正常運作。
The id Selector(id選取器)使用id選取器你可以為不同的HTML元素定義相同的樣式。下面的樣式規則對任何一個帶有id屬性值為”green”的元素都是匹配的。
#green {color: green}上面的規則將匹配h1和p元素。
<h1 id="green">Some text</h1><p id="green">Some text</p>但是，id最好還是唯一的，就如同人的社會安全號碼一樣，每一個人都有一個唯一的社會安全號碼，對應的每一個html元素都有一個唯一的id。
下面的樣式規則將匹配任何一個帶有id屬性值為”green”的p元素。
p#green {color: green}上面的規則與h1元素不匹配（也就是說不會產生樣式效果）。
<h1 id="green">Some text</h1>和class一樣，id的名稱的開頭也不要使用數字，不然就無法在Mozilla/Firefox中正常運作了。
CSS注釋你可以在CSS中加入解釋代碼用的注釋，這樣可以方便你以後重新編輯代碼。瀏覽器會忽略注釋，注釋一般以”/*“開頭”*/“做結尾，像這樣：
/* This is a comment */p { text-align: center; /* This is another comment */ color: black; font-family: arial}怎樣插入樣式表？
當瀏覽器閱讀樣式表，它會依據它（樣式表）來格式化文檔。有三種方法可以插入樣式表：
使用外部樣式表是使樣式應用於多張網頁的理想方法。通過這個方法你只需改動一個檔案就能改變整個網站的外觀。使用<link>標籤讓每個頁面都串連到樣式表。<link>標籤在head地區使用。
<link rel="stylesheet" type="text/css" href="test.css">瀏覽器將從test.css檔案中讀取樣式定義資訊，並依據它來格式化文檔。
外部樣式表可以用任何一個文字編輯器來書寫。檔案不應該包含任何的html標籤，並儲存為一個尾碼為.css的檔案。下面是一個樣式表檔案的內容：
hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}注意：請不要在屬性值和其單位間加上空格！如果你用”margin-left: 20 px“來代替”margin-left: 20px“的話，這也許在IE6中能正常工作，但在Mozilla/Firefox或Netscape中就無法正常顯示了。
內嵌樣式表一份內嵌樣式表應該在當有單獨文檔有特殊樣式的時候使用。使用<style>標籤在head地區內定義樣式，像這樣：
<head> <style type="text/css"> hr {color: red} .center {text-align: center;color: red} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style></head>瀏覽器將立即讀取樣式定義，並依據它來格式化文檔。
注意：瀏覽器一般會忽略未知的標籤。這就意味著老的瀏覽器不能支援樣式，會忽略<style>標籤，但<style>裡的內容會顯示在頁面上。在HTML注釋元素中隱藏它可以來避免這類情況在老的瀏覽器中發生。
<head> <style type="text/css"> <!-- hr {color: red} .center {text-align: center;color: red} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style></head>使用行內樣式就失去了樣式表的優勢而將內容和形式相混淆了。一般這類方法在個別元素需要改變樣式的時候使用。
在相關的標籤上用style屬性來加入行內樣式。樣式屬性可以包含任何CSS屬性。例子中將展示怎樣給一個段落加上左間距並將顏色改為red。
<p style="color: red; 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顏色是繼承了外部樣式表而文字對齊和文字大小被內嵌的樣式表所替換。
關於超連結的幾個樣式有html代碼如下：
<p><a href="http://www.163.com">This is a link</a></p>a:link {color: green}——表示一開始連結所呈現的文字是綠色的。 a:hover {color: black}——表示游標懸停在連結上，連結變為黑色。 a:active {color: blue}——表示點選連結，滑鼠還沒鬆開，連結變為藍色。 a:visited {color: yellow}——表示連結已經被點擊後，連結變為黃色。
CSS基礎學習
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
