走进CSS | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

本堂课重点内容

• 介绍了CSS的概念与基本使用方法
• 介绍了CSS的选择器，伪类等
• 介绍了CSS中的颜色，字体等

知识点具体内容

CSS是什么

• Cascading Style Sheets
• 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

使用CSS的方式

• 外链: <link rel="stylesheet" href="/assets/style.css"
• 嵌入: <style> p: { margin: 0 } </style>
• 内联: <p style="margin: 0"> Hello </p>

CSS是如何工作的

首先，HTML的工作流程是：

加载HTML --> 解析HTML --> 创建DOM树

在此基础上，CSS的工作流程为：

解析HTML --> 加载CSS --> 解析CSS --> 创建DOM树 --> 展示页面

CSS选择器 (Selector)

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
  • 按照标签名/类名/id
  • 按照属性
  • 按照DOM树中位置
• 伪类
  • 结构伪类 - e.g. first-child
  • 状态伪类 - e.g. hover
• 组合选择器 (Combinator)
  • 直接组合 - AB - 同时满足A,B - input:focus
  • 后代组合 - A B - 选中A的子孙B - nav a
  • 亲子组合 - A > B - 选中A的子元素B - section > p
  • 兄弟选择器 - A ~ B - 选中A之后且同级的元素B - h2 ~ p
  • 相邻选择器 - A + B - 选中紧跟着A的相邻元素B - h2 + p
• 优先级规则 - 选择器特异度 (Specificity)
  • id > 伪类 > 标签
  • 在选择器组中，依次比较上述选择器类型的数量

CSS的颜色

• RGB

  • 分别用两位十六进制表示Red, Green, Blue\
  • e.g. #FFFFFF

• HSL

  • Hue: 色相 (0 - 360)
  • Saturation: 饱和度 (0 - 100%)
  • Lightness: 亮度 (0- 100%)
  • e.g. hsl(20, 50%, 40%)

• 透明度 (alpha)

CSS的字体

• font-family
  • 通用字体族：衬线体 (serif)，无衬线体(sans-serif)，手写体 (cursive)等
  • Helvetica, Optima, Georgia ...
• font-size
  • 关键字: small, medium, large
  • 长度： px, em
  • 百分数：相比于父元素字体的大小
• font-style
  • normal, italic, ...
• font-weight
  • 关键字：normal, bold
  • 大小：100 - 900
• line-height (行高): 字体大小的倍数

个人总结

本节课介绍了CSS的概念与使用，说明了不同选择器的使用方法和优先级。

同时，介绍了CSS基本的颜色和字体的使用方法，对实际开发有很大帮助。