这是我参与「第四届青训营 」笔记创作活动的的第2天
1.重点内容
在上一节课中，我们了解到前端开发所用的基础技术栈中包含CSS，因此这节就来理解一下什么是CSS。
2.重要的知识点
- 什么是CSS？
- CSS可以做什么？
- CSS由什么构成？
- 如何在HTML页面中使用CSS？
- CSS背后的工作原理
- 颜色的设置
- 字体的设置
- 字体相关配置
3.详尽的知识点
什么是CSS？
CSS(Cascading Style Sheets)是用来在页面上定义元素样式的一种编程语言。
CSS可以做什么？
CSS可以用来定义页面元素的样式，包括但不限于以下几方面：
- 设置字体的种类，字体的颜色
- 设置元素的位置和大小
- 给页面添加动画效果
- ...
CSS由什么构成？
下面是一段标准的CSS代码，其中包含了许多要素
h1 {
color: white;
font-size: 14px;
}
其中的h1被称为选择器(Selector)，用来选择页面中的元素。
选择的方式
- 标签名，类名，id，伪类
- 属性
- DOM树中的位置
其中的color，font-size被称为选择器(Property)，用来选中要配置的属性。
其中的white,14px被称为属性值(Value)，用来设置属性。
其中一个选择器+一个属性值的组合(color: white;)被称为一条声明(Declaration)。
多个声明组合在一起，被称为声明块。
再加上选择器和大括号，这块代码被称为规则。
多条样式规则组合在一起，成为一个CSS文件。
如何在HTML页面中使用CSS？
有以下三种方法
- 外链
- 嵌入
- 内联
外链的方法就是在两个<head>中间加上<link>，并且设置其中的href属性为CSS文件的相对路径。
<link rel="stylesheet" href="./assets/style.css">
嵌入则是在两个<style>中间插入CSS代码即可。
<style>
h1 {
color: white;
font-size: 14px;
}
p {
margin: 0;
}
</style>
内联是在某个标签后直接添加上style属性，并设置属性值为对应的CSS代码。
<p style="margin: 0;padding: 0">
Lorem ipsum
</p>
CSS背后的工作原理
在浏览器解析HTML的的同时会加载CSS，之后在创建DOM树的同时解析CSS，再之后在加载DOM树的时候将CSS样式添加到DOM节点上，最后展示在页面上。
选择器的组合
选中特定元素的方法
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | AB同时满足 | input:focus |
| 后代组合 | A B | 如果是A的子孙，选择Ｂ | nav a |
| 亲子组合 | A>B | 如果是A的子元素，选择Ｂ | section>p |
| 兄弟选择器 | A~B | 如果在A后面且和A同级，选择Ｂ | h2~p |
| 相邻选择器 | A+B | 如果在A后面，选择B | h2+p |
颜色的设置
常见的有4中方法
- RGB模型 #00000 rgb(red,green,blue)
- HSL模型 （色相Hue 饱和度Saturation 亮度Lightness） hsl(h,s,l)
- 关键字 white black etc.
- alpha 透明度 #00000000 rgba(r,g,b,a) hsla(h,s,l,a)
字体的设置
在CSS中设置font-family即可，在最后需要设置至少一个通用字体族以保证页面的正常显示。
通用字体族
- 衬线体 Serif
- 无衬线体 Sans-Serif
- 手写体 Cursive
- Fantasy
- 等宽字体 Monospace
使用Web Fonts 设置@font-face属性浏览器会去设置的网址上下载对应的字体来显示。
<style>
@font-face {
font-family: "Megrim";
src: url() format("woff2")
}
</style>
字体相关配置
- font-size
- font-style
- font-weight
- line-height
- ...
可以全部缩写成font
font: style weight size/height family
4.课后总结
这一部分是CSS的基本知识，虽然并不涉及到很复杂的内容，但是也不应该忽视基础，同样也需要大量的练习和尝试才能达到较高的水平。
\
