CSS基础｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

CSS是什么

CSS用于定义页面元素的样式：

• 设置位置和大小

• 设置字体和颜色

• 添加动画

css代码组成

• 属性

• 属性值

• 属性和属性值在一起叫做定义

页面中有三种方式使用css

• 外链、嵌入、内联（内联就是给当前元素添加样式，所以不需要选中）

• 推荐使用外链，加强html语义化

• 或者应用框架的时候，常使用内嵌式css代码

css如何工作

• css在dom树结构被浏览器解析后，添加到选中的节点位置上

CSS怎么实现作用

选中页面元素，然后把样式加给它

• 1.选中

通过元素自身特性找到它，选中它。

通过元素与其他元素的关系找到它，选中它。

• 2.加样式

元素自身有许多css属性，改变元素的各种属性值，实现样式的添加和修改。

总结

本堂课新收获的知识

小技巧：可以使用检查或者Ctrl + shift + i在浏览器中调试

• 标签选择还可以有标签属性选择，直接查询属性，使用起来更加灵活，比如：

  查询链接：
  a[href^="#"]{
      /*以#开头的链接*/
  }
  a[href$=".com"]{
      /*以.com结尾的链接*/
  }
  

• 颜色表示除了直接的命名、十六进制表示、rgb、rgba还可以有hsl（色调、亮度、饱和度）

• 字体族的设置为了中文有中文字体可以用，英文有英文字体可以用等等。

• 字体还可以使用web font，比如一些图标直接做成了字体，比如iconfont。不过要使用web font会带来一些性能上的开销。

css中易混淆的点：

• html里空白符的处理，多个空格或者换行会被合并成一个空格，css中可以用white-space属性保留部分或者全部的空格、换行。

不易掌握的点：

• 在合适情况下使用css的某一种选择。
• css众多的元素属性需要练习才能记住，熟悉后才知道要实现效果需要哪些属性，或者形成自己的模板去实现一些效果。