css指層疊樣式表(cascading style sheets)
樣式定義如何顯示html元素，樣式通常存儲在樣式表裡。把樣式添加到html4.0中，是為了解決内容與表現分離的問題。外部樣式表可以極大提高工作效率，外部樣式表存儲在css檔案裡，多個樣式定義可層疊為一。
html标簽原本被設計為用于定義文檔内容，由于netscape和ie不斷将新的html标簽和屬性（比如字型和顔色屬性）添加到html規範中，建立文檔内容清晰地獨立于文檔表現層的站點變得越來越困難。為解決該問題，w3c在html4.0之外創造出樣式。所有主流浏覽器均支援層疊樣式表。
當同一個html元素定義不止一個樣式時，會優先使用小編号的樣式：
1.内聯樣式(html元素内部)
2.内部樣式表(位于<head>标簽内部)
3.外部樣式表
4.浏覽器預設設定
css規則由2部分組成：選擇器以及一條或多條聲明。選擇器通常是需要改變樣式的html元素，而聲明由一個屬性和一個值組成：selector {property:value},比如以下代碼将h1元素内文字定義為紅色，同時字型大小設定為14象素：
h1 {color:red;font-size:14px;}
是否包含空格不會影響css在浏覽器的效果，css也是大小寫不敏感的。不過存在一個例外：如果涉及到與html文檔一起工作的話，class和id名稱對大小寫是敏感的。
選擇器的分組。你可以對選擇器分組，被分組的選擇器共享相同的聲明：
h1,h2,h3,h4 {
color:green;
}
根據css，子元素從父元素繼承屬性，但實際不總是如此：
body {
font-family:verdana,sans-serif;
根據上條規則，站點的body元素使用特定字型。通過css繼承，子元素将繼承最進階元素（本例中為body）所擁有的屬性，這些子元素諸如p,td,ul,ol,li,dl,dt;這樣所有body子元素都應該顯示body設定的字型，子元素的子元素也一樣，并且在大多數現代浏覽器中，也确實如此。但某些浏覽器不支援繼承，而且忽略應用于body元素的規則；ie直到ie6還存在相關問題：在表格内字型樣式會被忽略。
如果不希望子元素繼承父元素屬性，可以單獨為子元素建立一個特殊規則即可：
body {
font-family: verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
p {
font-family: times, "times new roman", serif;
派生選擇器允許你根據上下文關系來确定某個标簽的樣式；比如你隻希望清單中的strong元素變為斜體字，而不是通常的粗體字，可以如下定義派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
在上面例子中，隻有li中的strong元素會發生改變。
id選擇器可以為标有特定id的html元素指定特定的樣式，id選擇器以”#“來定義。
#red {color:red;}
#green {color:green;}
下面是如何應用上述樣式：
<p id="red">xxx</p>
<p id="green">xxx</p>
在現代布局中，id選擇器常用來建立派生選擇器：
#sidebar p{
font-sytle:italic;
text-align:right;
以上樣式隻會應用于出現在id是sidebar元素的段落。
即使id隻能在文檔中出現一次，但id選擇器作為派生選擇器也可以被使用多次：
#sidebar p {...}
#sidebar h2 {...}
id選擇器可以獨立發揮作用：
#sidebar{
border: 1px dotted #000;
padding:10px;
老版本的ie浏覽器會忽略該規則，除非你特别定義這個選擇器所屬的元素：
div#sidebar {...}
在css中，類選擇器以一個點号顯示：
.center {text-align:center}
在上面例子中，所有擁有center類的html元素均居中顯示。類名第一個字元不能使用數字，它在firefox中不起作用。
和id一樣，class也可以被用作派生選擇器：
.fancy td {...}
以上代碼表示類名為fancy更大元素内部的表格單元的樣式資訊。
元素也可以基于它們的類而被選擇：
td.fancy {...}
表示類名為fancy的表格單元的樣式資訊：<td class="fancy"></td>
可以為擁有指定屬性的html元素設定樣式，而不僅限于class和id屬性。（隻有在規定了!doctype時，ie7和ie8才支援屬性選擇器，更低的ie版本不支援。）
下面代碼為帶有title屬性以及title屬性為hello的所有元素設定樣式：
[title]
{
color:red;
}
[title=hello]
color:5px solid blue;
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=w3school]
border:5px solid blue;
</style>
</head>
<body>
<h1>可以應用樣式：</h1>
<img title="w3school" src="/i/w3school_logo_white.gif" />
<br />
<a title="w3school" href="http://w3school.com.cn">w3school</a>
<hr />
<h1>無法應用樣式：</h1>
<p title="greeting">hi!</p>
<a class="w3school" href="http://w3school.com.cn">w3school</a>
</body>
</html>
下面代碼為包含指定值（不必嚴格比對）的title屬性所有單元設定樣式,适合于空格分隔的屬性值：
[title~=hello]{color:red;}
下面代碼為帶有包含指定值得lang屬性的所有元素設定樣式，适用于連字元分隔的屬性值:
[lang|=en]{color:red;}
屬性選擇器在為不帶有class或id的表單設定樣式時特别有用：
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;
下表列出了其他的比對模式：
選擇器 描述
[attribute] 用于選取帶有指定屬性的元素。
[attribute=value] 用于選取帶有指定屬性和值的元素。
[attribute~=value] 用于選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 比對屬性值以指定值開頭的每個元素。
[attribute$=value] 比對屬性值以指定值結尾的每個元素。
[attribute*=value] 比對屬性值中包含指定值的每個元素。
應用樣式表的3種方法：
1 外部樣式表。
<link rel="stylesheet" type="text/css" href="xxx.css" />
外部樣式表可以在任何文本編輯器中編輯，其中不能包含任何html标簽，字尾應該是.css.
2 内部樣式表。
hr {...}
p {...}
body {...}
3 内聯樣式。
<p style="color:sienna;margin-left:20px">
this is a box
</p>
css背景。css運作應用純色作為背景，也允許适用背景圖像。css在這方面的能力遠在html之上。
p {background-color:gray;} #将元素背景設定為灰色
p {background-color:rap;padding:20px;} #如上，不過背景色像外略有延伸（增加一些内邊距）
body {background-image:url;} #設定背景圖像
也可以為屬于某個類的某個元素設定背景圖像：
p.flower {...}
a.hello {...}
理論上，設定可以向textures和select等替換元素的背景應用圖像，不過不是所有浏覽器都能很好的處理這種情況。另外background-image不能繼承。事實上，所有背景屬性都不能繼承。
背景重複。如果在頁面上對背景圖像進行平鋪，可以使用background-repeat屬性。
背景定位。可以用background-position屬性改變圖像在背景中的位置。
背景關聯。可以用background-attachment屬性防止背景滾動（聲明圖像為fixed）。
css 文本屬性
屬性 描述
color 設定文本顔色
direction 設定文本方向。
line-height 設定行高。
letter-spacing 設定字元間距。
text-align 對齊元素中的文本。
text-decoration 向文本添加修飾。
text-indent 縮進元素中文本的首行。
text-shadow 設定文本陰影。css2 包含該屬性，但是 css2.1 沒有保留該屬性。
text-transform 控制元素中的字母。
unicode-bidi 設定文本方向。
white-space 設定元素中空白的處理方式。
word-spacing 設定字間距。
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)