css + css3技術總結報告

sky_Bosco發表於2018-02-02
CSSS3

前言：前段時間寫了幾篇自己工作中總結的技術文章，感覺在分享自己技術經驗的同時，也同時完善了自己的不足。這感覺挺好的。怪不得當老師的都有種深深的滿足感。今天這篇文章主要是分享下自己對目前的css3技術上的學習心得。有不對的地方歡迎指出。大家共同提高！閒話不多說，begin！

js Bin：http://jsbin.com/?html,output

目錄：

  1. css優先順序 
  2. 元素選擇符
  3. 關係選擇符
  4. 屬性選擇符
  5. CSS Pseudo-Classes Selectors（偽類選擇符）
  6. Pseudo-Element Selectors 偽物件選擇符
  7. 語法及規則
  8. 取值與單位
  9. 顏色取色
  10. 計算函式
  11. 漸變
  12. 技巧與經驗
  13. 附錄

-----------------------------------------------------------------------------------------------


1、css優先順序

     可能工作中你會用到很多CSS框架。比如bootstrap layui element muse-ui iview jqueryui 等吧。那麼當你開發頁面的 時候，總有對當前ui不滿足的地方。這時候你就可能要改人家封裝好的css檔案嘍。當時有時候你可能新增了你自己的css。但是頁面渲染出來後。為毛無效或則部分有效？這就要考慮css優先順序的問題了。人家優先順序高，當然會覆蓋你的css效果嘍。so  首先我們們還是要學好css優先順序。

內聯（style=""） > 內聯樣式表（<style></style>）> 外聯樣式表（<link>） > 瀏覽器預設複製程式碼

 但是如果你在css 後加 ！important   那麼這個css 會覆蓋其他的css 。也可以說當前css優先順序最高！

來一張網上的權重圖：

css + css3技術總結報告

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ssh test</title>
<meta name="author" content="" />
<style>
div#test span { color: green }  
span { color: blue }  
div span { color:red  }   
</style>
</head>
<body>

<div id="test">   
  <span>Text</span>  
</div>

</div>
</body>
</html>
      複製程式碼

效果如下：

css + css3技術總結報告

解釋：瀏覽器CSS匹配不是從左到右進行查詢，而是從右到左進行查詢。比如div#test span { color: green } 
，瀏覽器的查詢順序如下：先查詢html中所有class='red'的span元素，找到後，再查詢其父輩元素中是否有p元素，再判斷p的父元素中是否有id為main的div元素，如果都存在則匹配上。

好處：瀏覽器從右到左進行查詢的好處是為了儘早過濾掉一些無關的樣式規則和元素

//

css + css3技術總結報告

解釋：!important會提升優先順序，可以說是優先順序最高。

注：如果要覆蓋一個!important，可以用另一個!important覆蓋它。

//

css + css3技術總結報告

解釋：如果定義了三個class，最後生效的是樣式表中最後定義的（也就是說瀏覽器最後渲染的），而不是class中最後定義的。

//

css + css3技術總結報告

解釋：以標籤選擇器 、標籤選擇器這種後代選擇器的形式來定義樣式，最終顯示的樣式是最後定義的樣式。

//

css + css3技術總結報告

css + css3技術總結報告

解釋：偽類選擇器覆蓋了上面的渲染效果


總結

  • 樣式表的元素選擇器選擇越精確，則其中的樣式優先順序越高。則越是最後渲染效果。
  • 對於相同權重的選擇器的樣式，越靠後的優先順序越高。
  • 使用!important會覆蓋前面所有的css宣告。

//

2、元素選擇符

通配選擇符 (*)

 說明：

  • 通配選擇符
  • 通常不建議使用通配選擇符，因為它會遍歷並命中文件中所有的元素，出於效能考慮，需酌情使用

  1. IE6及更早瀏覽器並不支援通配選擇符(*)，而是將它忽略了，所以也變相的能看到效果。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>通配選擇符 (*)_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
* {
  color: #f00;
}
</style>
</head>
<body>
<h1>標題</h1>
<p>正文內容</p>
</body>
</html>
      
複製程式碼

型別選擇符(E)

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>型別選擇符 (E)_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
  font-size: 20px;
}
p {
  font-size: 13px;
}
</style>
</head>
<body>
<h1>標題</h1>
<p>正文內容</p>
</body>
</html>
      
複製程式碼

ID選擇符(E#id)

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>id選擇符 (E#myid)_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#subtitle {
  font-size: 20px;
}
p#content {
  font-size: 13px;
}
</style>
</head>
<body>
<h1 id="subtitle">標題</h1>
<p id="content">正文內容</p>
</body>
</html>
      
複製程式碼

類選擇符(E.class)

定義多個類：.a {
	color: #f00;
}
.b {
	font-weight: 700;
}
<div class="a b">給某個div元素定義.a和.b兩個類</div>注意，id選擇符不能在同個元素上定義多個，比如id="a b"就是錯誤的寫法複製程式碼

類選擇符高階用法：多類選擇符.a.b {
	color: #f00;
}
<div class="a b">多類選擇符使用方法</div>此例命中同時擁有.a和.b兩個類的元素。需要注意的是IE6並不支援多類選擇符，如：.a.b{}將會被視為：.b{}複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>class選擇符 (E.myclass)_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.title {
  font-size: 20px;
}
p.content {
  font-size: 13px;
}
.content.note {
  font-size: 30px;
}
</style>
</head>
<body>
<h1 class="title">標題</h1>
<p class="content">正文內容</p>
<p class="content note">多類選擇符的使用</p>
</body>
</html>
      
複製程式碼

3、關係選擇符

包含選擇符(E F)

說明：選擇所有被E元素包含的F元素。與子選擇符不同的是，包含選擇符將會命中所有符合條件的後代，包括兒子，孫子，孫子的孫子...
<style>
	/* 包含選擇符(E F) */
	.demo div { border:1px solid #f00; }
	/* 子選擇符(E>F) */
	.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>此例，如果使用.demo div，那麼 0, 1, 2, 3 都有有邊框；如果使用 .demo > div，那麼只有 0 有邊框，即只有子元素會被命中；

總結：.demo div 匹配到子 孫 所有後臺
      .demo > div 只能匹配到子
複製程式碼


子選擇符(E>F)

說明：選擇所有作為E元素的子元素F。是子元素 不包含孫元素與包含選擇符不同的是，子選擇符只能命中子元素，而不能命中孫輩。示例：.demo > div {
	position: relative;
}

<div class="demo">
	<div class="a">
		<div class="b">子選擇符</div>
	</div>
</div>此例只有 .a 會被命中，因為它是 .demo 的子元素；複製程式碼

相鄰選擇符(E+F)

說明：選擇緊貼在E元素之後F元素。不包含E 元素  在文件流中從上（html）到下開始找 與兄弟選擇符不同的是，相鄰選擇符只會命中符合條件的相鄰的兄弟元素。VS. E+F：<style>
	/* 相鄰選擇符(E+F) */
	p+p{color:#f00;}
	/* 兄弟選擇符(E~F) */
	p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>這是一個標題</h3>
<p>p3</p>
<h3>這是一個標題</h3>
<p>p4</p>
<p>p5</p>此例，如果使用p + p{color:#f00;}，那麼p2, p5將會變成紅色；如果使用p ~ p{color:#f00;}，那麼p2,p3,p4,p5將會變成紅色；複製程式碼

兄弟選擇符(E~F)

同上複製程式碼

4、屬性選擇符

E[att]

說明：選擇具有att屬性的E元素。例如：<style>
img[alt] {
	margin: 10px;
}
</style>

<img src="圖片url" alt="" />
<img src="圖片url" />
<img src="圖片url" alt="" />
此例，將會命中第一、 三張圖片，因為匹配到了alt屬性複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>屬性選擇符 E[att]_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
a[class] {
  color: #f00;
}
</style>
</head>
<body>
<ul>
  <li><a href="?" class="external">外部連結</a></li>
  <li><a href="?">內部連結</a></li>
  <li><a href="?" class="external">外部連結</a></li>
  <li><a href="?">內部連結</a></li>
</ul>
</body>
</html>
      
複製程式碼

E[att="val"]

說明：選擇具有att屬性且屬性值等於val的E元素。例如：<style>
input[type="text"] {
	border: 2px solid #000;
}
</style>

<input type="text" />
<input type="submit" />此例，將會命中第一張input，因為匹配到了alt屬性，並且屬性值為text複製程式碼

E[att~="val"]

說明：選擇具有att屬性且其中一個等於val的E元素（包含只有一個值且該值等於val的情況）。例如：<style>
div[class~="a"] {
	border: 2px solid #000;
}
</style>

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>此例，將會命中1, 3兩個div，因為匹配到了class屬性，且屬性值中有一個值為a複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>屬性選擇符 E[att~="val"]_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
a[class~="external"] {
  color: #f00;
}
</style>
</head>
<body>
<ul>
  <li><a href="?" class="external txt">外部連結</a></li>
  <li><a href="?" class="txt">內部連結</a></li>
  <li><a href="?" class="external txt">外部連結</a></li>
  <li><a href="?" class="txt external">外部連結</a></li>
  <li><a href="?" class="txt">內部連結</a></li>
</ul>
</body>
</html>
      
複製程式碼

E[att^="val"]

說明：選擇具有att屬性且屬性值為以val開頭的字串的E元素。例如：<style>
div[class^="a"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>此例，將會命中1, 2兩個div，因為匹配到了class屬性，且屬性值以a開頭複製程式碼

E[att$="val"]

說明：選擇具有att屬性且屬性值為以val結尾的字串的E元素。例如：<style>
div[class$="c"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>此例，將會命中1, 3兩個div，因為匹配到了class屬性，且屬性值以c結尾複製程式碼

E[att*="val"]

說明：選擇具有att屬性且屬性值為包含val的字串的E元素。例如：<style>
div[class*="b"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>此例，將會命中所有div，因為匹配到了class屬性，且屬性值中都包含了b複製程式碼

E[att|="val"]

說明：選擇具有att屬性且屬性值為以val開頭並用連線符"-"分隔的字串的E元素，如果屬性值僅為val，也將被選擇。例如：<style>
div[class|="a"] {
	border: 2px solid #000;
}
</style>

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>此例，將會命中第一個div，因為匹配到了class屬性，且屬性值以緊跟著"-"的a開頭複製程式碼


5、CSS Pseudo-Classes Selectors（偽類選擇符）

超連結 a     :link  :visited : hove : active  即用喜歡(love)和討厭(hate)兩個詞來概括   順序不能變

a:link {} 設定超連結a在未被訪問前的樣式。
a:visited {} 設定超連結a在其連結地址已被訪問過時的樣式。
a:hover {}   設定元素在其滑鼠懸停時的樣式。
a:active {} 設定元素在被使用者啟用（在滑鼠點選與釋放之間發生的事件）時的樣式。複製程式碼

//

E:focus

說明：
設定物件在成為輸入焦點（該物件的onfocus事件發生）時的樣式。

  • webkit核心瀏覽器會預設給:focus狀態的元素加上outline的樣式。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>使用者行為偽類選擇符 E:focus_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
  font-size: 16px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
input:focus {
  background: #f6f6f6;
  color: #f60;
  border: 1px solid #f60;
  outline: none;
}
</style>
</head>
<body>
<h1>請聚焦到以下輸入框</h1>
<form action="#">
  <ul>
    <li><input value="姓名" /></li>
    <li><input value="單位" /></li>
    <li><input value="年齡" /></li>
    <li><input value="職業" /></li>
  </ul>
</form>
</body>
</html>
      
複製程式碼

E:lang(fr)

說明：匹配使用特殊語言的E元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>語言偽類選擇符 E:lang(fr)_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:lang(zh-cmn-Hans) {
  color: #f00;
}
p:lang(en) {
  color: #090;
}
</style>
</head>
<body>
<p lang="zh-cmn-Hans">大段測試文字</p>
<p lang="en">english</p>
</body>
</html>
      
複製程式碼

E:not(s)        css3

說明：匹配不含有s選擇符的元素E。有了這個選擇符，那麼你將可以很好的處理類似這樣的場景：假定有個列表，每個列表項都有一條底邊線，但是最後一項不需要底邊線示例：.demo li:not(:last-child) {
	border-bottom: 1px solid #ddd;
}上述程式碼的意思是：給該列表中除最後一項外的所有列表項加一條底邊線複製程式碼

E:root   css3

說明：匹配E元素在文件的根元素。在HTML中，根元素永遠是HTML根據這個特性，可以做IE8的Hack示例：.test {
	color: black;
	color: yellow\0;
	*color: blue;
	_color: red;
}
html:root .test {
	color: purple\0;
}
<body>
<ul class="test">
  <li>列表項一</li>
  <li>列表項二</li>
  <li>列表項三</li>
</ul>
</body>
上述程式碼：非IE文字將為black，IE9及以上為purple，IE8為yellow，IE7為blue，IE6為red複製程式碼


//重點來了

E:first-child

說明：匹配父元素的第一個子元素E。要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素這裡可能存在誤解：示例程式碼：<ul>
	<li>列表項一</li>
	<li>列表項二</li>
	<li>列表項三</li>
	<li>列表項四</li>
</ul>在上述程式碼中，如果我們要設定第一個li的樣式，那麼程式碼應該寫成li:first-child{sRules}，而不是ul:first-child{sRules}。複製程式碼

來看這樣一段程式碼：示例程式碼：p:first-child{color:#f00;}

<div>
	<p>我是一個p</p>
</div>這段程式碼你能看到p元素被命中變成了紅色假設將程式碼簡單地修改一下：示例程式碼：p:first-child{color:#f00;}

<div>
	<h2>我是一個標題</h2>
	<p>我是一個p</p>
</div>只是在p前面加了一個h2標籤，你會發現選擇器失效了，沒有命中p，why?複製程式碼

解釋：E:first-child選擇符，E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子元素。與之類似的偽類還有E:last-child，只不過情況正好相反，需要它是最後一個子元素。

幾乎同上複製程式碼

E:only-child    css3

說明：匹配父元素僅有的一個子元素E。要使該屬性生效，E元素必須是某個元素的唯一一個子元素，E的父元素最高是body，即E可以是body的子元素複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結構性偽類選擇符 E:only-child_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
  font-size: 16px;
}
li:only-child {
  color: #f00;
}
</style>
</head>
<body>
<h1>只有唯一一個子元素</h1>
<ul>
  <li>結構性偽類選擇符 E:only-child</li>
</ul>
<h1>有多個子元素</h1>
<ul>
  <li>結構性偽類選擇符 E:only-child</li>
  <li>結構性偽類選擇符 E:only-child</li>
  <li>結構性偽類選擇符 E:only-child</li>
</ul>
</body>
</html>
      
複製程式碼

效果如下：css + css3技術總結報告

E:nth-child(n)            css3

說明：匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效。要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素該選擇符允許使用一個乘法因子(n)來作為換算方式，比如我們想選中所有的偶數子元素E，那麼選擇符可以寫成：E:nth-child(2n)使用E:nth-child(n)實現奇偶：示例程式碼：<style>
li:nth-child(2n){color:#f00;} /* 偶數 */
li:nth-child(2n+1){color:#000;} /* 奇數 */
</style>

<ul>
	<li>列表項一</li>
	<li>列表項二</li>
	<li>列表項三</li>
	<li>列表項四</li>
</ul>因為(n)代表一個乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)換算出來會是偶數，而(2n+1)換算出來會是奇數複製程式碼

該選擇符允許使用一些關鍵字，比如：odd, even使用odd, even實現奇偶：<style>
li:nth-child(even){color:#f00;} /* 偶數 */
li:nth-child(odd){color:#000;} /* 奇數 */
</style>

<ul>
	<li>列表項一</li>
	<li>列表項二</li>
	<li>列表項三</li>
	<li>列表項四</li>
</ul>關鍵字odd代表奇數，even代表偶數複製程式碼

注意：

<div>
	<p>第1個p</p>
	<p>第2個p</p>
	<span>第1個span</span>
	<p>第3個p</p>
	<span>第2個span</span>
	<p>第4個p</p>
	<p>第5個p</p>
</div>
p:nth-child(3){color:#f00;}

這是會命中第3個p麼？如果你這麼認為那就錯了，這條選擇符就不會命中任何一個元素。
p:nth-child(4){color:#f00;}這時你以為會命中第4個p，但其實命中的卻是第3個p，因為它是第4個子元素複製程式碼

解釋：E:nth-child(n)會選擇父元素的第n個子元素E，如果第n個子元素不是E，則是無效選擇符，但n會遞增。n 從1 開始 而不是從0。

假設不確定第1個子元素是否為E，但是又想命中第1個E，應該這樣寫：
p:first-of-type{color:#f00;}或者這樣寫：
p:nth-of-type(1){color:#f00;}複製程式碼


E:nth-last-child(n)  css3

有一點需要注意的是：HTML示例程式碼：<div>
	<p>第1個p</p>
	<p>第2個p</p>
	<span>第1個span</span>
	<p>第3個p</p>
	<span>第2個span</span>
</div>如上HTML，假設要命中倒數第一個p(即正數第3個p)，那麼CSS選擇符應該是：p:nth-last-child(2){color:#f00;}而不是：p:nth-last-child(1){color:#f00;}因為倒數第1個p，其實是倒數第2個子元素。基於選擇符從右到左解析，首先要找到第1個子元素，然後再去檢查該子元素是否為p，如果不是p，則n遞增，繼續查詢假設不確定倒數第1個子元素是否為E，但是又想命中倒數第1個E，應該這樣寫：p:last-of-type{color:#f00;}或者這樣寫：p:nth-last-of-type(1){color:#f00;}複製程式碼


E:first-of-type  css3

說明：
匹配同型別中的第一個同級兄弟元素E。

  • 該選擇符總是能命中父元素的第1個為E的子元素，不論第1個子元素是否為E

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結構性偽類選擇符 E:first-of-type_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:first-of-type {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <div>我是一個div元素</div>
  <p>我是一個p元素</p>
  <p>我是一個p元素</p>
</div>
</body>
</html>
      
複製程式碼

E:last-of-type            css3

說明：匹配同型別中的最後一個同級兄弟元素E。該選擇符總是能命中父元素的倒數第1個為E的子元素，不論倒數第1個子元素是否為E
複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結構性偽類選擇符 E:last-of-type_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:last-of-type {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <div>我是一個div元素</div>
  <p>我是一個p元素</p>
  <p>我是一個p元素</p>
</div>
</body>
</html>
      
複製程式碼

E:only-of-type         css3

說明：
匹配同型別中的唯一的一個同級兄弟元素E。同級元素如果有兩個 則失效  同 :only-child

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結構性偽類選擇符 E:only-of-type_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:only-of-type {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <p>結構性偽類選擇符 E:only-of-type</p>
</div>
</body>
</html>
      
複製程式碼

E:nth-of-type(n)          css3

有一點需要注意的是：HTML示例程式碼：<div>
	<p>第1個p</p>
	<p>第2個p</p>
	<span>第1個span</span>
	<p>第3個p</p>
	<span>第2個span</span>
</div>如上HTML，假設要命中第一個span：span:nth-of-type(1){color:#f00;}如果使用E:nth-child(n)：span:nth-child(3){color:#f00;}複製程式碼

E:nth-last-of-type(n)           css3

說明：匹配同型別中的倒數第n個同級兄弟元素E。複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結構性偽類選擇符 E:nth-last-of-type(n)_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:nth-last-of-type(1) {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <p>我是一個p元素</p>
  <div>我是一個div元素</div>
  <p>我是一個p元素</p>
  <p>我是一個p元素</p>
  <span>我是一個span元素</span>
</div>
</body>
</html>
      
      
複製程式碼

E:checked       css3

說明：匹配使用者介面上處於選中狀態的元素E。(用於input type為radio與checkbox時)複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>使用者介面(UI)元素狀態偽類選擇符 E:checked_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
input:checked + span {
  background: #f00;
}
input:checked + span:after {
  content: " 我被選中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
  <legend>選中下面的項試試</legend>
  <ul>
    <li><label><input type="radio" name="colour-group" value="0" /><span>藍色</span></label></li>
    <li><label><input type="radio" name="colour-group" value="1" /><span>紅色</span></label></li>
    <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
  </ul>
</fieldset>
<fieldset>
  <legend>選中下面的項試試</legend>
  <ul>
    <li><label><input type="checkbox" name="colour-group2" value="0" /><span>藍色</span></label></li>
    <li><label><input type="checkbox" name="colour-group2" value="1" /><span>紅色</span></label></li>
    <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
  </ul>
</fieldset>
</form>
</body>
</html>
      
複製程式碼

E:enabled         css3

說明：匹配使用者介面上處於可用狀態的元素E。複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>使用者介面(UI)元素狀態偽類選擇符 E:enabled_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
li {
  padding: 3px;
}
input[type="text"]:enabled {
  border: 1px solid #090;
  background: #fff;
  color: #000;
}
input[type="text"]:disabled {
  border: 1px solid #ccc;
  background: #eee;
  color: #ccc;
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
  <legend>E:enabled與E:disabled</legend>
  <ul>
    <li><input type="text" value="可用狀態" /></li>
    <li><input type="text" value="可用狀態" /></li>
    <li><input type="text" value="禁用狀態" disabled="disabled" /></li>
    <li><input type="text" value="禁用狀態" disabled="disabled" /></li>
  </ul>
</fieldset>
</form>
</body>
</html>
      
複製程式碼

E:disabled             css3

同上複製程式碼

//重點結束

E:empty           css3

說明：匹配沒有任何子元素（包括text節點）的元素E。複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結構性偽類選擇符 E:empty_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:empty {
  height: 25px;
  border: 1px solid #ddd;
  background: #eee;
}
</style>
</head>
<body>
<div class="test">
  <p>結構性偽類選擇符 E:empty</p>
  <p><!--我是一個空節點p，請注意我與其它非空節點p的外觀有什麼不一樣--></p>
  <p>結構性偽類選擇符 E:empty</p>
</div>
</body>
</html>
      
複製程式碼


E:target             css3

說明：匹配相關URL指向的E元素。解釋：URL後面跟錨點#，指向文件內某個具體的元素。這個被連結的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素。示例程式碼：#demo:target{color:#f00;}

<div id="demo">
	<p>E:target偽類使用方法</p>
</div>假設上述程式碼在頁面 a.html 中，那麼當訪問 a.html#demo 時，這個div元素將會被:target命中複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>目標偽類選擇符 E:target_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test .hd{padding:10px 0;}
.test .nav{position:fixed;right:10px;left: 540px;}
.test .nav a{display:block;margin: 10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}
.test .bd h2{border-bottom:1px solid #ddd;}
  
.test .bd .panel:target{border-color:#f60;}
.test .bd .panel:target h2{color:red;}
  
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<div class="test">
  <div class="hd nav">
    <a href="#panel1">前往區塊1</a>
    <a href="#panel2">前往區塊2</a>
    <a href="#panel3">前往區塊3</a>
    <a href="#panel4">前往區塊4</a>
    <a href="#panel5">前往區塊5</a>
  </div>
  <div class="bd">
    <div id="panel1" class="panel">
      <h2>區塊1</h2>
      <div><p>區塊1內容</p><p>區塊1內容</p><p>區塊1內容</p></div>
    </div>
    <div id="panel2" class="panel">
      <h2>區塊2</h2>
      <div><p>區塊2內容</p><p>區塊2內容</p><p>區塊2內容</p></div>
    </div>
    <div id="panel3" class="panel">
      <h2>區塊3</h2>
      <div><p>區塊3內容</p><p>區塊3內容</p><p>區塊3內容</p></div>
    </div>
    <div id="panel4" class="panel">
      <h2>區塊4</h2>
      <div><p>區塊4內容</p><p>區塊4內容</p><p>區塊4內容</p></div>
    </div>
    <div id="panel5" class="panel">
      <h2>區塊5</h2>
      <div><p>區塊5內容</p><p>區塊5內容</p><p>區塊5內容</p></div>
    </div>
  </div>
</div>
</body>
</html>
      
複製程式碼

6、Pseudo-Element Selectors 偽物件選擇符

E:first-letter            css3

說明：設定物件內的第一個字元的樣式。此偽物件僅作用於塊物件。內聯物件要使用該偽物件，必須先將其設定為塊級物件。該偽類常被用來配合font-size屬性和float屬性製作首字下沉效果。IE6在使用該選擇符時有個顯式的BUG：選擇符與包含規則的花括號之間不能緊挨著，需留有空格或換行。同時還存在該BUG的選擇符包括：E:first-lineCSS3將偽物件選擇符(Pseudo-Element Selectors)前面的單個冒號(:)修改為雙冒號(::)用以區別偽類選擇符(Pseudo-Classes Selectors)，但以前的寫法仍然有效。即E:first-letter可轉化為E::first-letter複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>E::first-letter_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
</head>
<body>
<h1>雜誌常用的首字下沉效果</h1>
<p>今天，陽光明媚，晴空萬里，非常適合戶外活動，如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。</p>
</body>
</html>
   複製程式碼

效果如下：

css + css3技術總結報告

E:first-line               css3

說明：設定物件內的第一行的樣式。此偽物件僅作用於塊物件。內聯物件要使用該偽物件，必須先將其設定為塊級物件。IE6在使用該選擇符時有個顯式的BUG：選擇符與包含規則的花括號之間不能緊挨著，需留有空格或換行。同時還存在該BUG的選擇符包括：E:first-letterCSS3將偽物件選擇符(Pseudo-Element Selectors)前面的單個冒號(:)修改為雙冒號(::)用以區別偽類選擇符(Pseudo-Classes Selectors)，但以前的寫法仍然有效。即E:first-line可轉化為E::first-lineE:first-line選擇符不能緊挨著規則集大括號，需留有空格或換行。本質上並不支援偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支援了E::first-line。複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>E::first-line_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-line {color:#090;}
p::first-line {color:#090;}
</style>
</head>
<body>
<h1>第一行文字的顏色與其它不同</h1>
<p>今天，陽光明媚，晴空萬里，非常適合戶外活動，如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。</p>
</body>
</html>
      
複製程式碼

E:before              css3

說明：設定在物件前（依據物件樹的邏輯結構）發生的內容。用來和content屬性一起使用，並且必須定義content屬性CSS3將偽物件選擇符(Pseudo-Element Selectors)前面的單個冒號(:)修改為雙冒號(::)用以區別偽類選擇符(Pseudo-Classes Selectors)，但以前的寫法仍然有效。即E:before可轉化為E::before複製程式碼

css + css3技術總結報告

本質上並不支援偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支援了E::before。不支援設定屬性position, float, list-style-*和一些display值，Firefox3.5開始取消這些限制。IE10在使用偽元素動畫有一個問題：例如：.test:hover {}
.test:hover::before { /* 這時animation和transition才生效 */ }需要使用一個空的:hover來啟用複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>E::after_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p{position:relative;color:#f00;font-size:14px;font-size:0\9;*font-size:14px;}
p::before{position:absolute;left:0;background:#fff;color:#000;content:"你的瀏覽器只支援E:after";font-size:14px;}
p::before{position:absolute;left:0;background:#fff;color:#000;content:"你的瀏覽器支援E:after和E::after";font-size:14px;}
</style>
</head>
<body>
<p>Sorry, 你的瀏覽器不支援E:after和E::after</p>
</body>
</html>
      
      
複製程式碼

效果：

css + css3技術總結報告

注意： p::before 新增的文字覆蓋了原先的  

E:after           css3

同上複製程式碼


7、語法及規則

說明：（前端框架支援最少都是ie9。。。 ie6以下的更不用考慮嘍
 這個可以不用瞭解！）提升指定樣式規則的應用優先權。IE6及以下瀏覽器有個比較顯式的支援問題存在，!important在同一條規則集裡不生效。請看下述程式碼：示例程式碼：div {
	color: #f00 !important;
	color: #000;
}在上述程式碼中，IE6及以下瀏覽器div的文字顏色為#000，!important並沒有覆蓋後面的規則；其它瀏覽器下div的文字顏色為#f00IE6及以下瀏覽器要使!important生效，可用以下程式碼：示例程式碼：div {
	color: #f00 !important;
}
div {
	color: #000;
}在上述程式碼中，IE6及以下瀏覽器中div的文字顏色表現與其它瀏覽器一致，都為#f00複製程式碼


@import    css3

css + css3技術總結報告

說明：指定匯入的外部樣式表及目標媒體。該規則必須在樣式表頭部最先宣告。並且其後的分號是必需的，如果省略了此分號，外部樣式表將無法正確匯入，並會生成錯誤資訊。IE使用@import無法引入超過35條的樣式表。使用url(url)和直接使用url需要注意的地方：示例程式碼：@import url("global.css");
@import url(global.css);
@import "global.css";以上3種方式都有效。當使用url(url)的方式時，包住路徑的引號可有可無；當直接使用url時，包住路徑的引號必須保留。指定媒體查詢：示例程式碼：@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@import_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@import url("style.css") screen, print;
.test{
color:green;
}
</style>
</head>
<body>
<div class="test">
fdd
</div>
</body>
</html>
      
如果css  .test{color:green;} 放在@import 前面 則@import 不生效！複製程式碼

@charset

說明：在外部樣式表檔案內使用。指定該樣式表使用的字元編碼。該規則後面的分號是必需的，如果省略了此分號，會生成錯誤資訊。在外部css檔案中寫法如下：示例程式碼：@charset "utf-8";
body { sRules }
div { sRules }
...複製程式碼


@media

說明：指定樣式表規則用於指定的媒體型別和查詢條件。IE8及以下只能實現CSS2中的部分，即只可以設定媒體型別。媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。示例程式碼：@media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>複製程式碼

列舉幾種使用方式：@media all and (width:1024px){
	body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@media_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test,
.test2 {
  display: none;
}
/* 本條為CSS2部分，IE8及以下只支援本條 */
@media screen {
  body{ color: #f00; }
}
/* 下列為CSS3部分 */
@media screen and (min-width: 960px) {
  body{ background: #999; }
}
@media screen and (device-width: 1024px) {
  .test { display: block; }
}
@media screen and (width: 1024px) {
  .test2 { display: block; }
}
</style>
</head>
<body>
<div>Media Queries媒體查詢</div>
<div class="test">如果你的顯示器水平解析度為1024px的話將能看到本條規則的效果（取決於輸出裝置螢幕解析度的大小，不隨包括瀏覽器在內的窗體大小而改變）</div>
<div class="test2">如果視口寬度為1024px的話將能看到本條規則的效果（隨包括瀏覽器在內的窗體大小而改變）</div>
</body>
</html>
      
複製程式碼

@font-face

語法：

@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

示例：使用一個全瀏覽器相容的自定義字型
程式碼如下：@font-face {
	font-family: 'diyfont';
	src: url('diyfont.eot'); /* IE9+ */
	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('diyfont.woff') format('woff'), /* chrome、firefox */
		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}你需要同時提供4種格式的字型複製程式碼

css + css3技術總結報告

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@font-face_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@font-face {
  font-family: 'iconfont';
  src: url('http://at.alicdn.com/t/font_1397098551_95441.eot');
  src: url('http://at.alicdn.com/t/font_1397098551_95441.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_1397098552_0142624.woff') format('woff'),
  url('http://at.alicdn.com/t/font_1397098551_8732882.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_1397098552_0586202.svg#iconfont') format('svg');
}
body {
  font-family: 'iconfont';
  font-style: normal;
  font-size: 32px;
  line-height: 2;
  letter-spacing: .25em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
㐳㐴㐵㐶傌㐸㑶㐺㐻㐼偑㐾㐿㑀㑁㑂㑃㑄㑅㑆㑳倲㑉㑊㑋㑌㑍㑎㑏
㑐㑑㑒㑓㑯㑕㑖㑗㑘㑙㑚㑛㑜㐲傌㐸㑶㐺㐻㐼偑㐾㐿㑀㑁㑂㑋㑌㑍㑎
㑏㑐㑑㑒㑓㑯㑕㑖㑗㑘㑙㑚㑛㑜㑝㑞㑟㑠㑡㑢㑣㑤㑥㑦㑧㓾㓿㔀㔁㔂㔃
</body>
</html>
      
複製程式碼

@keyframes

示例程式碼：@keyframes testanimations {
	from { opacity: 1; }
	to { opacity: 0; }
}其中testanimations是該動畫的名字，該動畫表示某個東西將逐漸消失。
如果複雜的動畫，可以混合<percentage>去設定某個時間段內的任意時間點的樣式：示例程式碼：@keyframes testanimations {
	from { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20); }
	80% { transform: translate(80px, 0); }
	to { transform: translate(100px, 20px); }
}當然，也可以不使用關鍵字from和to，而都使用<percentage>：示例程式碼：@keyframes testanimations{
	0% { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20px); }
	80% { transform: translate(80px, 0); }
	100% { transform: translate(100px, 20px); }
}注意，這裡的0%不能簡寫成0，0是非標準語法（雖然被某些瀏覽器所支援）。複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
  -webkit-animation:staff 3s linear;
  animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:linear-gradient(top,#fff,#F6D66E);line-height:20;
  -webkit-animation:ball 3s linear;
  animation:ball 3s linear;
}
@-webkit-keyframes ball{
  0%{-webkit-transform:translate(0,0);}
  5%{-webkit-transform:translate(-90px,-100px);}
  18%{-webkit-transform:translate(0,-350px);}
  35%{-webkit-transform:translate(200px,0);}
  46%{-webkit-transform:translate(380px,-160px);}
  60%{-webkit-transform:translate(250px,-350px);}
  78%{-webkit-transform:translate(60px,0);}
  100%{-webkit-transform:translate(0,0);}
}
@keyframes ball{
  0%{transform:translate(0,0);}
  5%{transform:translate(-90px,-100px);}
  18%{transform:translate(0,-350px);}
  35%{transform:translate(200px,0);}
  46%{transform:translate(380px,-160px);}
  60%{transform:translate(250px,-350px);}
  78%{transform:translate(60px,0);}
  100%{transform:translate(0,0);}
}
@-webkit-keyframes staff{
  0%{-webkit-transform:translate(0,0);}
  6%{-webkit-transform:translate(260px,0);}
  20%{-webkit-transform:translate(300px,0);}
  30%{-webkit-transform:translate(300px,0);}
  40%{-webkit-transform:translate(200px,0);}
  65%{-webkit-transform:translate(40px,0);}
  79%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(0,0);}
}
@keyframes staff{
  0%{transform:translate(0,0);}
  6%{transform:translate(260px,0);}
  20%{transform:translate(300px,0);}
  30%{transform:translate(300px,0);}
  40%{transform:translate(200px,0);}
  65%{transform:translate(40px,0);}
  79%{transform:translate(0,0);}
  100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
  <span id="ball">彈球</span>
  <span id="staff">滑桿</span>
</div>
</body>
</html>
      
複製程式碼

@supports

css + css3技術總結報告

說明：檢測是否支援某CSS特性定義支援和不支援flex標準寫法的瀏覽器分別使用不同的規則：示例程式碼：@supports ( display: flex ) {
	body {
		display: flex;
	}
	#aside {
		width: 210px;
	}
	#main {
		flex: auto;
	}
}

@supports not ( display: flex ) {
	#aside {
		float: left;
		width: 210px;
	}
	#main {
		overflow: hidden;
		*zoom: 1;
	}
}我們可以通過類似這樣的寫法來給不同的終端使用差異化的方案。你也可以寫多重規則來進行過濾：示例程式碼：@supports ( box-shadow: 2px 2px ) or
          ( -moz-box-shadow: 2px 2px ) or
          ( -webkit-box-shadow: 2px 2px ) {
	.demo {
		-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
		-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
		box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
	}
}

複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@supports_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@supports ( display: flex ) {
    body {
        display: flex;
    }
    #aside {
        width: 210px;
    }
    #main {
        flex: auto;
    }
}

@supports not ( display: flex ) {
    #aside {
        float: left;
        width: 210px;
    }
    #main {
        overflow: hidden;
        *zoom: 1;
    }
}
</style>
</head>
<body>
<div id="aside">aside</div>
<div id="main">main</div>
</body>
</html>
      
複製程式碼

8、取值與單位

長度單位包括包括：相對單位和絕對單位。相對長度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin絕對長度單位包括有： 

cm, mm, q, in, pt, pc, px複製程式碼

px 

說明：
相對長度單位。畫素（Pixels）。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px示例程式碼：div{font-size:12px;} p{text-indent:24px;}

em 

說明：
相對長度單位。相對於當前物件內文字的字型尺寸。 是相對於當前的物件 不是跟元素html 。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的(html)預設字型尺寸。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>em_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 20px;line-height: 1em;height:3em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
</style>
</head>
<body>
<h1>假定當前預設字型尺寸是14px，n em即為14px字型尺寸的n倍：</h1>
<ul>
  <li class="size1">
    <strong>1em</strong>:
    <p>1em大小的文字</p>
  </li>
  <li class="size2">
    <strong>2em</strong>:
    <p>2em大小的文字</p>
  </li>
  <li class="size3">
    <strong>3em</strong>:
    <p>3em大小的文字</p>
  </li>
</ul>
</body>
</html>
      
      
複製程式碼


rem    ie9+

說明：
相對長度單位。相對於根元素(即html元素) font-size計算值的倍數

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>rem_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
html,
h1 {
  font-size: 12px;
}
p {
  font-size: 2rem;
}
</style>
</head>
<body>
<h1>下面的文字將是html定義的字型大小的2倍：</h1>
<p>我是html定義的12px的2倍，字型大小為24px</p>
</body>
</html>
      
複製程式碼


vw       viewPort  width       ie9+

說明：
相對於視口的寬度。視口被均分為100單位的vw
示例程式碼：

h1 { font-size: 8vw; }

如果視口的寬度是200mm，那麼上述程式碼中h1元素的字號將為16mm，即(8x200)/100

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vw_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
  font-size: 5vw;
}
</style>
</head>
<body>
<p>相對於viewport寬度大小的文字</p>
</body>
</html>
      
複製程式碼

vh    ie9+

說明：
相對於視口的高度。視口被均分為100單位的vh
示例程式碼：

h1 { font-size: 8vh; }

如果視口的高度是200mm，那麼上述程式碼中h1元素的字號將為16mm，即(8x200)/100


vmax   

css + css3技術總結報告

說明：
相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax
示例程式碼：

h1 { font-size: 8vmax; }

如果視口的寬度是300mm，高度是200mm，那麼上述程式碼中h1元素的字號將為24mm，即(8x300)/100，因為寬度比高度要大，所以計算的時候相對於寬度。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vmax_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
  font-size: 5vmax;
}
</style>
</head>
<body>
<p>相對於viewport的寬度或高度中較大的那個然後計算文字大小。</p>
</body>
</html>
      
複製程式碼


vmin

css + css3技術總結報告

說明：相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin示例程式碼：h1 {
	font-size: 8vm;
	font-size: 8vmin;
}如果視口的寬度是300mm，高度是200mm，那麼上述程式碼中h1元素的字號將為16mm，即(8x200)/100，因為高度比寬度要小，所以計算的時候相對於高度。複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vmin_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
  font-size: 12px;  /*IE6-8*/
  font-size: 5vm;    /*IE9*/
  font-size: 5vmin;  /*其他瀏覽器*/
}
</style>
</head>
<body>
<p>相對於viewport的寬度或高度中較小的那個然後計算文字大小。</p>
</body>
</html>
      
複製程式碼


其他的佈局中 如flex  grid 有自己的單位  其他文章中有描述！


9、顏色取色

平常用的一般包括 

  1. 用顏色關鍵字來指定顏色
  2. hex
  3. RGB
  4. RGBA
  5. HSL
  6. HSLA

hex 說明：
#RRGGBB 或 #RGB
取值：
RR：
紅色值。十六進位制正整數
GG：
綠色值。十六進位制正整數
BB：
藍色值。十六進位制正整數複製程式碼

RGB(R,G,B)取值：R：紅色值。正整數 | 百分數G：綠色值。正整數 | 百分數B：藍色值。正整數 | 百分數複製程式碼

RGBA(R,G,B,A)取值：R：紅色值。正整數 | 百分數G：綠色值。正整數 | 百分數B：藍色值。正整數 | 百分數A：Alpha透明度。取值0~1之間。複製程式碼

HSL(H,S,L)取值：H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360S：Saturation(飽和度)。取值為：0.0% - 100.0%L：Lightness(亮度)。取值為：0.0% - 100.0%
//
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>HSL_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
  background-color: hsl(360, 50%, 50%);
}
</style>
</head>
<body>
<div class="test">能看到此行背景說明你的瀏覽器支援HSL色彩記法</div>
</body>
</html>
      

複製程式碼

HSLA(H,S,L,A)取值：H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360S：Saturation(飽和度)。取值為：0.0% - 100.0%L：Lightness(亮度)。取值為：0.0% - 100.0%A：Alpha透明度。取值0~1之間。//
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>HSL_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
  background-color: hsla(360, 50%, 50%, .5);
}
</style>
</head>
<body>
<div class="test">能看到此行背景說明你的瀏覽器支援HSLA色彩記法</div>
</body>
</html>
     
複製程式碼


10、計算函式

calc()

說明：用於動態計算長度值。需要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px)；任何長度值都可以使用calc()函式進行計算；calc()函式支援 "+", "-", "*", "/" 運算；calc()函式使用標準的數學運算優先順序規則；複製程式碼

css + css3技術總結報告


11、漸變

gradient

語法：<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()說明：<gradient> 允許使用簡單的語法實現顏色漸變，以便UA在渲染頁面自動生成影象。漸變在一個擁有尺寸的盒子中被生成，被稱之為漸變盒，但是漸變本身並沒有內在的尺寸，也就說如果在一個沒有尺寸的容器上定義漸變，將無法被呈現。<gradient> 可以應用在所有接受影象的屬性上示例：background-image: linear-gradient(white, gray);
list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);複製程式碼


linear-gradient

示例程式碼：

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);複製程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: linear-gradient(#fff, #333);
}
.test2 {
  background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
  background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
  background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
  background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>
</html>
      
複製程式碼

radial-gradient

一段程式碼示例 不多說了

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>radial-gradient()_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: radial-gradient(circle at center, #f00, #ff0, #080);
}
.test2 {
  background: radial-gradient(circle closest-side, #f00, #ff0, #080);
}
.test3 {
  background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
}
.test4 {
  background: radial-gradient(at top right, #f00, #ff0, #080);
}
.test5 {
  background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
}
.test6 {
  background:
        radial-gradient(farthest-side at top right, #f00, #ff0, #080, transparent),
        radial-gradient(60px at top left, #f00, #ff0, #080);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6"></div>
</body>
</html>
      
複製程式碼

repeating-linear-gradient()

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>repeating-linear-gradient()_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
}
.test2 {
  background: repeating-linear-gradient(to right, #f00, #ff0 10%, #f00 15%);
}
.test3 {
  background: repeating-linear-gradient(45deg, #f00, #ff0 10%, #f00 15%);
}
.test4 {
  background: repeating-linear-gradient(to bottom left, #f00, #ff0 10%, #f00 15%);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
      
複製程式碼

repeating-radial-gradient()

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>repeating-radial-gradient()_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%);
}
.test2 {
  background: repeating-radial-gradient(at top left, #f00, #ff0 10%, #080 15%, #ff0 20%, #f00 25%);
}
.test3 {
  background: repeating-radial-gradient(circle closest-corner at 20px 50px, #f00, #ff0 10%, #080 20%, #ff0 30%, #f00 40%);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
</body>
</html>
      
複製程式碼


12、技巧與經驗

如何清除圖片下方出現幾畫素的空白間隙？
方法1：img{display:block;}
方法2：img{vertical-align:top;}
除了top值，還可以設定為text-top | middle | bottom | text-bottom，甚至特定的
<length>和<percentage>值都可以
方法3：#test{font-size:0;line-height:0;}#test
為img的父元素

如何讓文字垂直對齊文字輸入框？
方法：input{vertical-align:middle;}

如何讓單行文字在容器內垂直居中？
方法：#test{height:25px;line-height:25px;}
只需設定文字的行高等於容器的高度即可

如何讓超連結訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果？
方法：a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}按L-V-H-A的順序設定超連結樣式即可，
可速記為LoVe（喜歡）HAte（討厭）

為什麼Standard mode下IE無法設定滾動條的顏色？
方法：html{
	scrollbar-3dlight-color:#999;
	scrollbar-darkshadow-color:#999;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#eee;
	scrollbar-arrow-color:#000;
	scrollbar-face-color:#ddd;
	scrollbar-track-color:#eee;
	scrollbar-base-color:#ddd;
}將原來設定在body上的滾動條顏色樣式定義到html標籤選擇符上即可

如何使文字溢位邊界不換行強制在一行內顯示？
方法：#test{width:150px;white-space:nowrap;}
設定容器的寬度和white-space為nowrap即可，
其效果類似<nobr>標籤

如何使文字溢位邊界顯示為省略號？
方法（此方法Firefox5.0尚不支援）：
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
首先需設定將文字強制在一行內顯示，然後將溢位的文字通過overflow:hidden截斷，
並以text-overflow:ellipsis方式將截斷的文字顯示為省略號。

如何使連續的長字串自動換行？
方法：#test{width:150px;word-wrap:break-word;}word-wrap的
break-word值允許單詞內換行

如何清除浮動？方法1：#test{clear:both;}
#test為浮動元素的下一個兄弟元素
方法2：
#test{display:block;zoom:1;overflow:hidden;}
#test為浮動元素的父元素。zoom:1也可以替換為固定的width或height
方法3：
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}#test為浮動元素的父元素如何定義滑鼠指標的游標形狀為手型併相容所有瀏覽器？方法：#test{cursor:pointer;}若將cursor設定為hand，將只有IE和Opera支援，且hand為非標準屬性值如何讓已知高度的容器在頁面中水平垂直居中？方法：#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？方法：#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父節點，p是img的父節點。

如何設定span的寬度和高度（即如何設定內聯元素的寬高）？
方法：span{display:block;width:200px;height:100px;}要使內聯元素可以設定寬高，
只需將其定義為塊級或者內聯塊級元素即可。所以方法非常多樣，
既可以設定display屬性，
也可以設定float屬性，或者position屬性等等。

如何給一個元素定義多個不同的css規則？方法：.a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}
<div class="a b">測試1</div>
<div class="a c">測試2</div>多個規則之間使用空格分開，並且只有class能同時使用多個規則
，id不可以如何讓某個元素充滿整個頁面？方法：html,body{height:100%;margin:0;}
#test{height:100%;}

如何讓某個元素距離視窗上右下左4邊各10畫素？
方法：html,body{height:100%;margin:0;}
html{_padding:10px;}
#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;
_height:100%;}如何去掉超連結的虛線框？方法：a{outline:none;}IE7及更早瀏覽器由於不支援
outline屬性，需要通過js的blur()方法來實現，如<a onfocus="
this.blur();"

如何容器透明，內容不透明？
方法1：.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的內容</div>原理是容器層與內容層並級，容器層設定透明度，內容層通過負margin或者position絕對定位等
方式覆蓋到容器層上
方法2：.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;
filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}

<div class="outer">
	<div class="inner">我是不透明的內容</div>
</div>高階瀏覽器直接使用rgba顏色值實現；
IE瀏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果如何讓整個頁面水平居中？方法：body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}
定義body的text-align值為center將使得IE5.5也能實現居中為什麼容器的背景色沒顯示出來？

為什麼容器無法自適應內容高度？
方法：通常出現這樣的情況都是由於沒有清除浮動而引起的，所以Debug時應第一時間想到是否有
未清除浮動的地方如何做1畫素細邊框的table？
方法1：#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
<table id="test">
	<tr><th>姓名</th><td>Joy Du</td></tr>
	<tr><th>年齡</th><td>26</td></tr>
</table>方法2：#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}


如何區別display:none與visibility:hidden？方法：相同的是display:none與visibility:hidden都可以用來隱藏某個元素； 
不同的是display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只
是隱藏了內容而已，其佔位空間仍然保留。

如何設定IE下的iframe背景透明？
方法：設定iframe元素的標籤屬性allowtransparency="allowtransparency"然後設定iframe內部頁
面的body背景色為transparent。 不過由此會引發IE下一些其它問題，
如：設定透明後的iframe將不能遮住select複製程式碼

1附錄：

媒體型別 Media Types

媒體型別版本相容性描述
auralCSS2不推薦使用Opera用於語音和音樂合成器
brailleCSS2Opera用於觸覺反饋裝置
handheldCSS2Chrome,Safari,Opera用於小型或手持裝置
printCSS2所有瀏覽器用於印表機
projectionCSS2Opera用於投影影象，如幻燈片
screenCSS2所有瀏覽器用於計算機顯示器
ttyCSS2Opera用於使用固定間距字元格的裝置。如電傳打字機和終端
tvCSS2Opera用於電視類裝置
embossedCSS2Opera用於凸點字元（盲文）印刷裝置
speechCSS2Opera用於語音型別
allCSS2所有瀏覽器用於所有媒體裝置型別


相關文章