CSS

CSS3介紹

CSS3 是最新的 CSS 標準。爲了提高開發速度，也爲了方便各主流瀏覽器根據需要漸進式支持，css3按模塊化進行了全新設計，這些模塊可以獨立發佈和這實現，也爲日後css的擴展奠定了基礎。
其中最重要的 CSS3 模塊包括：

屬性選擇器

舊的屬性選擇器：

1. E[attr]
2. E[attr=“val”]

新增的屬性選擇器

3. E[attr^=“val”] 選擇擁有attr屬性且屬性值【等於】val的E元素
4. E[attr$=“val”] 選擇擁有attr屬性且屬性值以val【結束】的E元素
5. E[attr*=“val”] 選擇擁有attr屬性且屬性值【包含】val的E元素

特例：

6. E[attr=“val”]

僞類選擇器

ie8及以下不支持

1. E:first-child{} 選擇父元素中【第一個】子元素E
2. E:last-child{} 選擇父元素中【最後一個】子元素E
3. E:nth-child(n){} 選擇父元素中【第n個】子元素E
   n：數字，表達式 2n 2n+1 3n，關鍵詞　even（偶數） odd(奇數)
4. E:nth-last-child(n){} 選擇父元素中【倒數第n個】子元素E
5. E:enabled{} 處於可用狀態的元素

//input處於可用狀態的時候呈背景紅色顯示
input[type="text"]:enabled{background:green;}
<input type="text"/>

6. E:disabled{} 處於禁用狀態的元素

//input處於禁用狀態的時候呈背景紅色顯示
input[type="text"]:disabled{background:red;}
<input type="text" disabled/>

7. E:checked{} 處於選中狀態的元素

//css樣式
input[type="checkbox"]:checked{width:50px;height:50px;}
<input type="checkbox" >

僞元素選擇器

單冒號(僞元素選擇器)可以兼容至ie8

1. E:after{} ：在元素內部最後生成內容
2. E:before{}： 在元素內部最開始位置生成內容
3. E::first-line{} 選擇元素第一行內容（== 適用於塊元素==）
4. E::first-letter{} 選擇元素第一個字符 （== 適用於塊元素==）
5. E::placeholder{} 設置輸入提示佔位符樣式

input::placeholder{color:red;}//佔位符顏色爲紅色
<input type="text" placeholder="請輸入"/>

css3:區分僞類和僞元素

僞類：單冒號
僞元素：雙冒號。例如：E::after{} E::before{}

框模型（Box Model）

http://www.w3school.com.cn/css/css_boxmodel.asp

背景和邊框

文本效果

2D/3D 轉換

動畫

多欄佈局

1. column-count：欄目的數量(3 / auto)
2. column-width：欄目的寬度（px / auto）
3. column-gap：欄目間距
4. column-rule：欄目的邊框
   1. column-rule-width:
   2. column-rule-style:
   3. column-rule-color:

.box{
column-width:200px;
column-gap: 30px;
column-rule:1px dashed red;
}
<div class="box">(中間大量文字省略)</div>

效果如下：

用戶界面

http://www.w3school.com.cn/css3/css3_user_interface.asp

1. resize
2. box-sizing
3. outline-offset

瀏覽器私有前綴

瀏覽器私有前綴，是瀏覽器對於新CSS屬性的一個提前支持；
加前綴是兼容老版本的寫法，比較新版本的瀏覽器都支持直接寫。

內核	私有前綴	瀏覽器
Gecko內核	css前綴爲"-moz-"	火狐瀏覽器
WebKit內核	css前綴爲"-webkit-"	chrome、safari
28+ Blink內核
Presto內核	css前綴爲"-o-"	Opera(歐朋)
		現已改用Google Chrome的Blink內核
Trident內核	css前綴爲"-ms-"	IE

新增顏色模式

CSS的顏色：http://www.w3school.com.cn/cssref/css_colors_legal.asp

1. rgba(r,g,b,a);兼容性：ie8及以下不支持。a：alpha透明度。
2. hsl(h,s,l);h ：色調 hue；s ：飽和度 saturation ；l： 亮度 lightness；兼容性：ie8及以下不支持。

.box{
    width: 200px;
    height: 200px;
    background: hsl(0,100%,50%);//紅色
}
<p class="box"></p>

3. hsla(r,g,b,a) ； a ：alpha透明度，取值：0-1。0：全透明；1：全不透明； 0-1半透明。兼容性：ie8及以下不支持。

.box{
    width: 200px;
    height: 200px;
    background: hsla(0,100%,50%,0.5);//辦透明紅色
}
<p class="box"></p>

這邊有一個顏色轉換工具，可以轉換顏色。

媒體查詢

1樣式表內

@media screen and (min-width:601px) and (max-width:1000px){
  /* 600-1000*/
  body{background:green;}
 .box{column-count:3;}
}
@media screen and (max-width:600px){
   /*小於等於600*/
   body{background:red;}
   .box{column-count:1;}
}
<div class="box">（文字內容省略）</box>

2 link標籤

<link rel="stylesheet" href="gt1000.css" 
media="screen and (min-width:1000px)">

<link rel="stylesheet" href="w600-1000.css"  
media="screen and (min-width:601px) and (max-width:1000px)">

<link rel="stylesheet" href="lt600.css" 
media="screen and (max-width:600px)">

3 橫豎屏

佈局和樣式

<!--橫屏-->
<link rel="stylesheet" href="gt1000.css" media="screen and (orientation:landscape)">
<!--豎屏-->
<link rel="stylesheet" href="lt600.css" media="screen and (orientation:portrait)">

 <div class="box">（大量文字省略）</box>

gt1000.css文件

body{background:pink;}
.box{column-count:4;column-gap:20px;}

lt600.css

body{background:red;}
.box{column-count:1;}

效果：