学习CSS | 青训营笔记

77 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第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》