CSS （Cascading Style Sheets）
簡介：
多重樣式將層疊為一個
樣式表允許以多種方式規(guī)定樣式信息堂鲤。樣式可以規(guī)定在單個的 HTML 元素中亿傅，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中瘟栖。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表葵擎。
層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢半哟？
一般而言酬滤，所有的樣式會根據下面的規(guī)則層疊于一個新的虛擬樣式表中
1、 瀏覽器缺省設置
2镜沽、 外部樣式表
3敏晤、 內部樣式表（位于 <head> 標簽內部）
4、 內聯(lián)樣式（在 HTML 元素內部）
因此缅茉，內聯(lián)樣式（在 HTML 元素內部）擁有最高的優(yōu)先權，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標簽中的樣式聲明男摧，外部樣式表中的樣式聲明蔬墩，或者瀏覽器中的樣式聲明（缺省值）译打。
CSS語法
CSS 規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明拇颅。
屬性（property）是您希望設置的樣式屬性（style attribute）奏司。每個屬性有一個值。屬性和值被冒號分開樟插。
selector {property: value}
示例：
p { color: #ff0000; }
p { color: #f00; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
注意事項
1韵洋、 記得寫引號
如果值為若干單詞，則要給值加引號：
p {font-family:"sans serif";}
2黄锤、多重聲明
你應該在每行只描述一個屬性搪缨，這樣可以增強樣式定義的可讀性，就像這樣：
p {
text-align: center;
color: black;
font-family: arial;
}
3鸵熟、空格和大小寫
大多數樣式表包含不止一條規(guī)則副编，而大多數規(guī)則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
CSS 對大小寫不敏感流强。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話痹届，class 和 id 名稱對大小寫是敏感的。
CSS高級語法
1打月、選擇器分組
你可以對選擇器進行分組队腐，這樣，被分組的選擇器就可以分享相同的聲明奏篙。用逗號將需要分組的選擇器分開香到。
在下面的例子中，我們對所有的標題元素進行了分組报破。所有的標題元素都是綠色的悠就。
h1,h2,h3,h4,h5,h6 {
color: green;
}
2、繼承
根據 CSS充易，子元素從父元素繼承屬性梗脾。但是它并不總是按此方式工作。
如果你不希望 "Verdana, sans-serif" 字體被所有的子元素繼承盹靴，又該怎么做呢炸茧？比方說，你希望段落的字體是 Times稿静。沒問題梭冠。創(chuàng)建一個針對 p 的特殊規(guī)則，這樣它就會擺脫父元素的規(guī)則：
body {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
CSS 派生選擇器
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式改备。通過合理地使用派生選擇器控漠，我們可以使 HTML 代碼變得更加整潔。
比方說，你希望列表中的 strong 元素變?yōu)樾斌w字盐捷，而不是通常的粗體字偶翅，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
請注意標記為 <strong> 的藍色代碼的上下文關系：
<p><strong>我是粗體字，不是斜體字碉渡，因為我不在列表當中聚谁，所以這個規(guī)則對我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因為 strong 元素位于 li 元素內滞诺。</strong></li>
<li>我是正常的字體形导。</li>
</ol>
在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字习霹，無需為 strong 元素定義特別的 class 或 id朵耕，代碼更加簡潔。
CSS id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式序愚。
id 選擇器以 "#" 來定義憔披。
1、 下面的兩個 id 選擇器爸吮，第一個可以定義元素的顏色為紅色芬膝，第二個定義元素的顏色為綠色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色形娇，而 id 屬性為 green 的 p 元素顯示為綠色锰霜。
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色桐早。</p>
2癣缅、id選擇器和派生選擇器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在這里，與頁面中的其他 p 元素明顯不同的是哄酝，sidebar 內的 p 元素得到了特殊的處理友存，同時，與頁面中其他所有 h2 元素明顯不同的是陶衅，sidebar 中的 h2 元素也得到了不同的特殊處理屡立。
3、單獨的選擇器
id 選擇器即使不被用來創(chuàng)建派生選擇器搀军，它也可以獨立發(fā)揮作用：
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
根據這條規(guī)則膨俐，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding罩句，內部空白）
CSS 類選擇器
1焚刺、在 CSS 中，類選擇器以一個點號顯示：
.center {text-align: center}
在上面的例子中门烂，所有擁有 center 類的 HTML 元素均為居中乳愉。
在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規(guī)則匾委。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
2拖叙、class 也可被用作派生選擇器：
.fancy td {
color: #f60;
background: #666;
}
在上面這個例子中氓润，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字赂乐。（名為 fancy 的更大的元素可能是一個表格或者一個 div）
3、元素也可以基于它們的類而被選擇：
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中咖气，類名為 fancy 的表格單元將是帶有灰色背景的橙色挨措。
<td class="fancy">
你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標注的單元格都會是帶有灰色背景的橙色崩溪。那些沒有被分配名為 fancy 的類的單元格不會受這條規(guī)則的影響浅役。
CSS屬性選擇器
對帶有指定屬性的 HTML 元素設置樣式。
1伶唯、屬性選擇器
下面的例子為帶有 title 屬性的所有元素設置樣式：
[title]
{
color:red;
}
2觉既、屬性和值選擇器
下面的例子為 title="W3School" 的所有元素設置樣式：
[title=W3School]
{
border:5px solid blue;
}
屬性和值選擇器 - 多個值
下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值：
[title~=hello] { color:red; }
下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式乳幸。適用于由連字符分隔的屬性值：
[lang|=en] { color:red; }
示例：
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素瞪讼。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素粹断。 |
| [attribute l=value] | 用于選取帶有以指定值開頭的屬性值的元素符欠，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素瓶埋。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素希柿。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
CSS形勢
外部樣式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
內部樣式表：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
內聯(lián)樣式：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>