这是我参与【第五届青训营】伴学笔记创作的第2天。
本节课的主题为走进前端技术栈 - CSSCSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课主要对 CSS 的工作流程及原理、页面中 CSS 使用方法等进行详细解读。
一、本堂课重点内容：
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
二、详细知识点介绍：
CSS是什么？
CSS用来定义页面元素的样式，如设置字体和颜色、设置位置和大小、添加动画效果。
CSS的代码基本组成
在页面中使用CSS
1.外链（推荐：内容和样式可以进行分离）
2.嵌入
直接写在head下，style标签中。
3.内联（不推荐）
不需要写选择器
CSS是如何工作的？
选择器Selector
通配选择器
*{
//匹配所有
}
标签选择器
p{
//通过标签来选择
}
id选择器
<h1 id="logo">
<style>
#logo{
//id值唯一
}
</style>
类选择器（常用）
<h1 calss="logo">
<style>
.logo{
//可以赋多个样式
}
</style>
属性选择器
<input value="11111" disabled> //disabled表示禁用
<input type="password">
<a href="#top">
<a href="a.jpg">
<style>
[disabled]{
//通过属性值选择元素
}
input[type="password"]{
//
}
a[href^="#"]{
//href以#开头的会被匹配上
}
a[href$=".jpg"]{
//href以.jpg结尾的会被匹配上
}
</style>
伪类（不基于标签和属性定位元素）
状态伪类
某个元素处于某类状态才会被选中。
例：有一个超链接标签
link默认为黑色
visited被访问过为灰色
hover鼠标移在上面为橘色
active鼠标按下去为红色
变化：
结构伪类
通过父子节点的相对位置选中，
例：
列表：
输入框：
input.error就只对输入框生效，对span不生效。
组合
例：
- article p //选中所有article下的p标签（拉森火山……、高于……、因为……、高于……）
- article > p //选中article下直接的p标签（拉森火山……）
- h2 + p //选中h2后紧跟的p标签（因为……）
选择器组
颜色
- RGB
- HSL
- alpha 透明度 0-1 rgba（x,x,x,0.5）
字体 font-family
多个字体：考虑兼容性，优先级由高到低。
建议：最后一个最好加上一个通用字体，英文字体写在中文字体前面。
使用Web Fonts：可以从网络上下载字体
英文：
中文：
中文字体较大，注意裁切。
字号 font-size
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
例：
字样 font-style
- normal 正常
- italic 斜体### 字重（粗细）font-weight
- normal 正常
- bold 加粗
例：
注：有些字体可能不支持多种字重。
行高 line-height
组合使用
可以省略部分属性，顺序不可以变。
对齐 text-align
- left:左对齐
- center：居中
- right：右对齐
文字间距 spacing
- letter-spacing为每个字符之间的空白距离
- word-spacing为单词之间的空白距离
中文文字下用word-spacing是没有效果的，只能用letter-spacing
文章：letter-spacing与word-spacing的区别
首行缩进 text-indent
文本修饰 text-decoration
- none：无装饰线（常用）
- underlin：下划线
- line-throu：删除线
空白符 white-space
- normal：合并多个空白符
- nowrap：不换行
- pre：保留所有的（包括空格和换行）
- pre-wrap：自动换行，保留空格
- pre-line：自动换行，合并空格
调试CSS
右键页面，点击检查。
