CSS3新特性

「常說，要認識一我的①，大概瞭解一下背景，而後見面時打招呼講什麼語言規矩範禮②，她迴應了，聲音很好聽，你會繼續選擇③用選擇什麼語氣對待？並且又怎麼漂亮，相信本身不會拒絕④的，來預先處理⑤好情緒，好讓彼此能有一個新的開始⑥，給生活一個甜美的謎底吧⑦」--晚安，EmilyChen！

（一）CSS簡介
CSS（Casadaing Style Sheet）層疊樣式表，她的使命是把結構和表現分離，讓HTML文件變小，提升加載速度，提高用戶體驗。

（二）語法及其規範

【1】語法

• 外聯樣式表
• 內部樣式表
• 行內元素表<style="color:red;"

【2】規矩

• 層疊性（樣式衝突即後來居上，「長江後浪推前浪，前浪死在沙灘上」）
• 繼承性（子承父業，「龍生龍鳳生鳳，老鼠生的小孩會打洞」）
• 優先級（選擇器權重計算的數位之間沒有進制，好比「10個a遇上一個類」的說法不存在）

地位	身份
0	繼承、*
1	元素、僞元素
10	類、僞類、屬性
100	id
1000	style=""行內
無窮	!important

【3】規範
Ⅰ建議遵循如下順序：
佈局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關係到模式）
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其餘屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

Ⅱ其餘
CSS裏的屬性值，單引號 ' '
類命名（banner廣告、拼音、敏感詞會被瀏覽器插件過濾，不利於SEO），單詞之間使用下劃線 _

（三）選擇器

家族	成員
單一	通配符	*{}
	元素	a {}
	屬性	input[type="text"] {}
	類	.class {}
	id	#id {}
複合	後代	ol a
	子代	ul>li
	相鄰兄弟	h1+p
	並集	div,img
	僞類	常見:hover、:focus
		結構僞類:first-child、nth-of-type
		僞元素::before、::after

（四）經常使用佈局

【1】基本

三種
網格div
浮動float	清除浮動clear	父因子浮動而引發高度爲0的塌陷，清除後可以讓父迴流自動檢測高度
定位position	相對relative	不脫標，邊偏移後佔原位置
	絕對absolute	脫標，不佔原位置，子絕父相
	固定fixed	絕對定位的特殊，只以瀏覽器爲父

• float、absolute、fixed改變了display屬性
• 清除浮動有三種clear:both、clearfix:after、overflow:hidden

【2】設計
豎列、聖盃、雙飛翼

（五）預處理器
less、scss、stylus、postcss

（六）CSS3新屬性

六個
圓角border-radius
轉換transform	2D位移 translate（）	三個屬性均有x，y軸； 對行內標籤沒效果 ； 位移後不佔位置
	2D旋轉 rotate（）	單位deg，度數爲正則順時針； 轉換中心點transform-origin
	2D縮放 scale（）	以1爲默認，數字爲倍數； <1是縮小、>1放大 ；縮放後不佔位置
	3D同上	多了z軸， 近小遠大
	3D左手定則	x軸：水平向右 x右是正值；
		y軸：垂直向下 y下是正值；
		z軸：垂直屏幕 往外是正值
		transform:rotate3d(1,0,0,45deg) 就是沿着x軸旋轉 45deg
	3D呈現transform-style	transform-style: preserve-3d;
		子元素開啓立體空間，代碼寫給父級，可是影響的是子盒子
動畫animation	動畫名 持續時間 運動曲線 什麼時候開始 播放次數 是否反向 始或終狀態;	簡寫不含 animationplay-state
	animation-play-state: puased;	暫停動畫，常常和鼠標通過等其餘配合使用
	animation-direction ： alternate	想要動畫走回來 ，而不是直接跳回來
過渡transition	過渡屬性 花費時間 運動曲線 什麼時候開始;	屬性：寬度高度/背景顏色/內外邊距；過渡全部的屬性用all
		花費時間： 0.5s
		運動曲線： 默認 ease （能夠省略）
		誰作過渡給誰加
陰影shadow	水平位置 垂直位置 模糊距離 影子大小 顏色	box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
		應用於文本text-shadow、盒子box-shadow
漸變gradients

• 由於主流瀏覽器暫時不支持C3部分特性，須要添加瀏覽器研發團隊的前綴
• 如webkit、ms、moz、o，使用：-webkit-border-radius:15px;

（七）壓縮的CSS

區別
min.css	minify把原css文件壓縮大小，	刪除沒必要要的空格、回車、製表符
		常應用於運營生產階段
.css		註釋完整，文檔可讀性強
		常應用於試驗開發階段