走进前端技术栈 - CSS
css是什么(Cascading Style Sheets)
通常CSS代码由两部分组成
-
选择器(Selector): 选中页面中的元素
-
声明: 给选中的原则设置属性，包裹在{}中 (声明由属性和属性值组成)
在页面中使用CSS
- 外链 推荐！可以做到内容和样式的分离, (当然类似编写Vue组件时并没有怎么做，而是将该组件的内容，样式，逻辑都放在这个文件中，做到了关注的分离，个人理解是，就是和这个组件相关的都放在这个文件中，不相关的就不放在这个文件里)
- 嵌入
- 内联 不推荐！(当然有时候也会用到，比如用到一些UI组件库，有一些预定义的样式，我们可能需要通过内联的方式来设置)
CSS是如何工作的
简化的工作图（HTML -> Dom树 -> 渲染树 ->展示页面）
选择器
-
可以通过多种方法选择元素
-
标签名 | 类名(这类使用的最为频繁) | id
-
通过属性（不一定要精确匹配，也可以通过匹配上某个条件来实现，比如xxx属性以xxxx开头或结尾）
/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */ a[href="https://example.org"] { color: green; } -
按照Dom树中的位置
-
-
通配选择器 * 选择所有元素
-
伪类选择题(pseudo-classes)
- 状态伪类 如 访问过的链接(:visited) 鼠标悬浮在上的(:hover)
- 结构性伪类(根据Dom节点在Dom树中出现的位置来决定是否选中) 如 (li:first-child) (li:last-child)
-
不同的选择器可以组合在一起（注意两个选择器之间是否有空格）
- 选择器组: 选择器之间用
,分开
文字格式化相关
颜色
- RGB 两种表示方法 0-255范围
- RGB (143, 172, 135)
- #8f(r)ac(g)87(b)
- HSL 一种更符合直觉的表示方式
- 关键字 black white等
- 透明度 0(完全透明)-1(透明)
- rgba(xx,xx,xx,xx) #xxxxxxxx
- hsla(xx,xx,xx,xx) #xxxxxxxx
字体
- 通过font-family属性设置
通用字体族（在font-family属性值的最后一般都会加一个通用字体族，相当 于保底，只要电脑上有这一类中一种就可以正确显示，保证显示效果离预 期的相差太远）（中英文混排的情况下，建议英文的字体放在中文字体前， 因为中文字体通常也会设计英文字体）
- WebFont(访问放在服务器上的字体文件，当然会带来一些性能上的开销)
由于中文字体会比较大，所以一般会进行裁切优化
- font-weight 100-900 字体粗细 (当然不是每一个字体都支持所有类型的字重)
- 400 对应normal
- 700 对应bold
- line-height (默认的行高，其实是不太适合于阅读的，所以通常多行的文字，都需要设置下行高)
若制定的行高没有单位，则行高的具体值则是该数乘以字体的大小（推荐使用没有单位的方法来设置行高[相当于字体大小的几倍几倍]）更为直观
- letter-spacing word-spacing text-indent text-decoration
- HTMl里多个连续的空格或换行，默认下会被合成一个。可以通过white-space来控制这一行为
调试CSS
右键检查，选中Dom节点，来修改其对应的CSS属性
