January
1st,
1970
本篇作為筆記用途，記錄 CSS 參考資料
SASS
- 命名變數及賦值
$variable-name: 100px; - 使用 calc 計算變數
calc(100vh - #{$body-height})
單位
在設計自適應性網頁（RWD）時我們會希望我們的圖片隨著螢幕的大小而改變，這時候我們就可以利用到這兩個新的單位。
px螢幕使用像素（要考慮 Retina 螢幕像素是一般螢幕像素的兩倍）%相對父層的大小比例vh代表的是 view height，也就是螢幕可視範圍高度的百分比vw表示的是 view width，也就是螢幕可是範圍寬度的百分比vminvh、vw 取最小值vmaxvh、vw 取最大值（但是目前 IE 跟 Safari 不支援）
CSS3 選擇器
| 群組選擇器（Group of selectors） | ||
|---|---|---|
| E, F | E 和 F 元素 | 群組選擇器 |
| 組合選擇器（Combinator selectors） | ||
| E F | E 父元素內部所包含的所有後裔 F 子元素 | 後代組合器 |
| E > F | E 父元素所包含的直接第一層 F 子元素 | 子組合器 |
| E + F | E 兄元素之後相鄰的第一個 F 弟元素 | 相鄰兄弟組合器 |
| E ~ F | E 兄元素之後的所有 F 弟元素 | 一般兄弟組合器 |
字型
- Google Fonts
- Google Fonts - Early Access
_ 思源黑體 Noto Sans TC
_
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);_font-family: 'Noto Sans TC', sans-serif;_ 黑體 cwTeXHei _ 明體 cwTeXMing _ 圓體 cwTeXYen _ 仿宋體 cwTeXFangSong _ 楷體 cwTeXKai
建議
- CSS 子組合選擇器(
E > F)盡量少用，甚至禁用 _ 因為這會讓 CSS 失去彈性 _ 也代表 HTML 的嵌套過多 * 此寫法也可能在 Angular 中造成 CSS 樣式無法如預期中運作（常見於使用結構指令時）
參考資料：