这是我参与「第四届青训营 」笔记创作活动的的第1天
如何构建CSS
内部样式表 外部样式表 行内样式表
DOM
DOM(Document Object Model),DOM 是文件在计算机内存中的表现形式
选择器
| 类型选择器 | h1 { } | 类型选择器 |
|---|---|---|
| 通配选择器 | * { } | 通配选择器 |
| 类选择器 | .box { } | 类选择器 |
| ID 选择器 | #unique { } | ID 选择器 |
| 标签属性选择器 | a[title] { } | 标签属性选择器 |
| 伪类选择器 | p:first-child { } | 伪类 |
| 伪元素选择器 | p::first-line { } | 伪元素 |
| 后代选择器 | article p | 后代运算符 |
| 子代选择器 | article > p | 子代选择器 |
| 相邻兄弟选择器 | h1 + p | 相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p | 通用兄弟 |
不同方向的文本
writing-mode
- horizontal-tb: 块流向从上至下。对应的文本方向是横向的。
- vertical-rl: 块流向从右向左。对应的文本方向是纵向的。
- vertical-lr: 块流向从左向右。对应的文本方向是纵向的。
数值规范
长度
绝对长度cm mm Q in pc pt px
相对长度em ex ch rem lh vw vh vmin vmax
百分比
百分比是相对于其他值设置的。例如,如果将元素的字体大小设置为百分比,那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值,那么它将是父值宽度的百分比。
数字
有些值接受数字,不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性(opacity),它控制元素的不透明度 (它的透明程度)。此属性接受 0(完全透明) 和 1(完全不透明) 之间的数字。
本文内容来源于MDN和今日课程《理解CSS》