"常說，要認識一個人 ①，大概了解一下背景，然后見面時打招呼講什么語言規矩范禮 ②，她回應了，聲音很好聽，你會繼續選擇 ③ 用選擇什么語氣對待？而且又怎么漂亮，相信自己不會拒絕 ④ 的，來預先處理 ⑤ 好情緒，好讓彼此能有一個新的開始 ⑥，給生活一個甜美的謎底吧 ⑦ "
——有心人做有心事哦，晚安EmilyChen！
（一）CSS簡介
CSS（Casadaing Style Sheet）層疊樣式表，她的使命是把結構和表現分離，讓HTML檔案變小，提高加載速度，提升用戶體驗，
（二）語法及其規范
【1】語法
- 外聯樣式表<link rel="stylesheet" href="">
- 內部樣式表<style></style>
- 行內元素表<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 | 注釋完整，檔案可讀性強 | |
| 常應用于試驗開發階段 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4003.html
標籤：Html/Css