这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天。
学习完简单的选择器后，我们学习如何排文本的样式，使用选择器和一些属性格式化一些文本内容。
颜色-RGB
我们都知道常见的颜色都可以通过红绿蓝三原色通过不同的配比而得到，而我们在CSS中常用的rgb属性也可以通过输入数字的大小来控制颜色的输出。例如，所有属性值都为0则是黑色，所有属性都拉满（255）则是白色。而rgb属性值过长，我们也可以通过转化为十六进制来表达。
rgb颜色的话没办法和我们一些常用的调色关联起来
颜色-HSL
Hue：色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360。
Saturation：饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。
Lightness：亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。
除了上述两种颜色方法外，我们还有种方法就是指定颜色的值
alpha 透明度
在RGB和HSL中我们只需要在属性值最后加入0-1之间的值就可以实现不同的透明度，而在十六进制中我们就需要先将0-1之间的数字转化为0-255进制，然后再转化为十六进制。
字体font-family
因为不同设备不同浏览器支持的字体不同，所以我们可以通过font-family设置多种字体。
通用字体族
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
使用Web Fonts
<h1>Web fonts are awesome!</h1>
<style>
@font-face {
font-family: "Megrim";
src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}
h1 {
font-family: Megrim, Cursive;
}
</style>
可以使用
@font-face上传字体地址，这样页面读取字体样式时就会自动下载字体。但web fonts肯定会带来一些性能上的开销，会对渲染有一些影响。
font-size
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
line-height
font: style weight size/height family
调试CSS
- 右键点击页面，选择检查
- 使用快捷键
- Ctrl+Shift+I（Windows）
- Cmd+Opt+I（Mac）
个人总结
本节课主要学习了CSS颜色渲染和文本渲染，学习了一些基础的CSS样式属性，也学习了如何调试CSS。
