这是我参与「第五届青训营」笔记创作活动的第2天，在有了一些项目的开发经验后，我经常感到自己的三件套基本功还不够扎实，尤其是CSS，在我看来，一个前端工作者的CSS功底如果不足以支持一般的创作和常见页面元素的设计，那他是不合格的。虽然现在精美的组件库如同雨后春笋般出现，对于中后台项目而言，套用组件库完全够用了。但是如果因为CSS的掣肘导致自己的构思没有实现，那还是非常遗憾的。因此，学好CSS并不断精进，非常重要。
一、本堂课重点内容：
CSS是什么、CSS的三种使用方式、CSS的各类选择器和组合、CSS是如何工作的、调试CSS
二、详细知识点介绍：
老师首先对CSS的定义进行复习，CSS即 Cascading Style Sheets 的缩写，用来定义页面元素的样式。常见的作用即：设置字体和颜色、设置位置和大小、添加动画效果。
在页面中使用CSS有三种方式：外链、嵌入、内嵌。外联是在之后的框架中常用也是最规范的一种方式，通过link标签来引入CSS样式表文件，符合 内容和样式分离 的需求。嵌入即通过style标签来将样式表代码写入html文件。内联则是利用超文本标记语言中标签的style属性，将该标签的样式直接写在标签上。通常在某个元素的样式条目很少，并且复用性差时，可以采用内联的方式来设计其样式。或者说在选择器的优先级难以权衡时，最高优先级的内联样式也是除了为人诟病的 !important 外最好的解决方案。
另外，值得一提的是，tailwindCSS 则是在框架中采用语义化类名的方式，以一种近似于内联CSS的方式来在 vue、react等框架中书写CSS。在我看来，相比之前一个类选择器中书写该元素的所有样式，tailwindCSS则是将每一个元素的类选择器中的样式划分为更小更精确的类，并进行语义化命名，使得 不仅增强了可读性，在查看元素的标签本身就可以大概知道其样式如何，而不需要去查找对应的类选择器的内容；而且 增强了类的可复用性，使得一个类选择器可以以更细的粒度被更多的元素使用。解决了原来大部分情况下即使是类选择器，往往也只会被一两个元素使用，造成了类名的浪费的问题。虽然vue、react等前端框架分文件的使用已经缓和了类名重复的问题，但是如果一个项目中组件化不够彻底，单个vue文件中出现上千行CSS代码的现象还是时有发生，因此对于这种情况，tailwindCSS的出现无疑提供了除less、sass等进阶CSS语言外新的思路。当然，说到底tailwindCSS仍然是外链+选择器的方式来引入CSS样式表文件。 这一点不能搞混。
接下来老师讲解了CSS是如何工作的，如下图所示：
然后就是CSS的重中之重：各种类型的选择器——通配选择器*、标签选择器、id选择器、类选择器、属性选择器和伪类选择器。个人感觉属性选择器是我个人容易遗忘的一类选择器，很多时候如果我能回想起来属性选择器的存在并且合理利用选择器，就可以省去一些JS的样式操控。这里截图作为提醒：
属性选择器甚至可以利用正则，比如限制对应的属性以特定字符开头或者结尾：
此外，伪类选择器也会在特定的情况下大放异彩。伪类选择器不基于标签和属性定位元素，主要分为状态伪类和结构性伪类。状态伪类主要是 表明元素在处于某种状态下时被选中，使得元素在和用户交互中处于某种状态下时会产生某些样式，下面举一个a标签的例子：
结构性伪类则主要是根据DOM节点在DOM树中出现的位置（或者说是父子节点的相对位置）来选中节点。比如first-child和last-child。这里附上一个选择器的联系链接，真的非常形象，并且练习到了绝大多数情况，前辈们把他叫做“餐盘练习”：flukeout.github.io/#
选择器的组合，以及随之带来的优先级的改变也很重要。比较遗憾的是CSS选择器并不提供选中某个元素的前一个兄弟元素的方式，大概是因为DOM树的遍历方式吧。
此外，也可以通过 , 来选中多个选择器，这种方式叫选择器组，处于同一个选择器组的选择器对应的元素拥有相同的样式。
之后老师介绍了颜色，主要是RGB和HSL，他们均可以和透明度进行配合形成rgba和hsla。这里记录一下HSL的含义，注意常见的单词表示的颜色就是指HSL：
字体方面，除了指定具体的字体外，需要在最后加上一个 通用字体族
h1{
font-family: Optima, Georgia, serif;
font-family: Helvetica,sans-serif;
}
通用字体族主要是在指定的具体字体在本机上找不到时，至少一个分类作为更加普遍的字体寻找依据，并且指定通用字体族可以在指定的字体失效时确保中文和英文的字体有各自的对应。
至于字体大小font-size、字体样式font-style、字重font-weight等这里就不赘述了。
行高line-height是指两行文字的基准线之间的距离，关于文字的基准线和图片的基准线，需要多加的留心。当我们使用一个没有单位的数字来表示行高时，它表示行高是自身字体大小的多少倍。这是很符合编辑习惯的方式。常用的比例是1.6。
文字的对齐方式类似word的效果，text-align和justify对最后一行会失效。
最后是对于空白符的解释：HTML中默认会把多个空格换行合并为一个空格和换行。此时可以利用white-space属性来进行调整。具体的效果参见文档即可。
三、实践练习例子：
我个人遇到的一个伪选择器精巧使用的例子是：B站的播放器工具栏选择弹幕颜色为代表的浮空下拉/上拉栏——即触发下拉栏的元素A和下拉栏元素B本身存在一定距离，并没有接触。正常来说，如果元素A和元素B紧密相连，只要设置A的hover和B的hover，就可以让下拉栏在 鼠标不离开A和B的情况下，下拉栏不消失。但是B站的例子中，触发下拉栏的元素A和下拉栏元素B本身存在一定距离，鼠标离开元素A或者元素B后，只要是停留在A和B的连线上，那么B并不会消失，我百思不得其解，看了源码才知道，这是在B元素上利用伪类选择器创建了一个透明的伪类元素。然后设置伪类元素的hover，就可以保证触发下拉栏显示的区域连接起了A和B。当然，设置下拉栏延时消失而非瞬间消失也是一种我后来接触到的好用的解决思路。
四、课后个人总结：
CSS中我个人认为有两大难点，选择器的灵活使用和浩如烟海的CSS属性。选择器的精妙使用能有效减少JS直接操控样式，并且DOM结构比较复杂的情况，需要选择器进行准确定位。CSS属性则更是没接触过就不知道这个属性还可以实现这样的效果，或者是没有系统总结就总是会错误使用。在我看来，CSS的积累和灵活使用对于一个有编程基础的前端工作者来说，远比JS要难。
五、引用参考：
主要是一个练习CSS选择器的开源项目连接，前辈们把他叫做“餐盘练习”：flukeout.github.io/#
