“常說，要認識一個人①，大概瞭解一下背景，然後見面時打招呼講什麼語言規矩範禮②，她回應了，聲音很好聽，你會繼續選擇③用選擇什麼語氣對待？而且又怎麼漂亮，相信自己不會拒絕④的，來預先處理⑤好情緒，好讓彼此能有一個新的開始⑥，給生活一個甜美的謎底吧⑦”--晚安，EmilyChen！ （一）CSS簡介 C ...
“常說，要認識一個人①，大概瞭解一下背景，然後見面時打招呼講什麼語言規矩範禮②，她回應了，聲音很好聽，你會繼續選擇③用選擇什麼語氣對待？而且又怎麼漂亮，相信自己不會拒絕④的，來預先處理⑤好情緒，好讓彼此能有一個新的開始⑥，給生活一個甜美的謎底吧⑦”--晚安，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 | 註釋完整，文檔可讀性強 | |
| 常應用於試驗開發階段 |
