这是我参与「第四届青训营 」笔记创作活动的的第2天
记录前半部分课堂笔记如下：
- CSS Cascading Style Sheets。 主要用于用来定义页面元素的样式、设置字体和颜色、设置位置和大小、添加动画效果。
-
外链(推荐使用)
<link rel="" hel=""> -
嵌入
<style> </style> -
内联
<p style=""></p> -
CSS是如何工作的 通过创建DOM树，加上解析后的CSS，可以形成渲染树
-
选择器Selector 选择器用于找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
-
通配符选择器（*）
-
标签选择器
-
id选择器
-
类选择器
-
属性选择器
[^=]以开头[$=]以结尾[=]满足条件[]是否有该属性 -
伪类选择器 伪类选择器不基于标签和属性定位元素，主要有状态伪类与结构性伪类
状态伪类常见的如下：
- 默认状态:link{}
- 鼠标访问过:visited{}
- 鼠标移到目标:hover{}
- 鼠标按下:active{}
- 对input，聚焦状态有:focus{}
结构性伪类：
根据DOM节点在DOM树中的位置，例如： firstchild{}、lastchild{}
12.**组合 **
| 名称 |
|---|
| 直接组合 |
| 后代组合 |
| 亲子组合 |
| 兄弟选择器 |
| 相邻选择器 |
| 语法 | 示例 |
|---|---|
| AB | input：fovus |
| A B | nav a |
| A>B | section>p |
| A~B | h2～p |
| A+B | h2+p |
- 颜色 RGB模式
十六进制标识：#ffffff 等价于rgb(255,255,255)
HSL模式：可以设置button点击前后的不同状态 Hue色相（H） Saturation饱和度（S） Lightness亮度（L）
alpha:透明度三种表示方法：
#ff0000ff、rgba(255, 0, 0, 1) 、hsla(0, 100%, 50%, 1)
- 字体
font-size：设置字体样式
font-weight：设置字体粗细
line-height：设置行高
font:style weight size/height family
对应 斜体 粗细 大小/行高 字体族
text-align
文字对齐：left、center、right、justify（justify使得文本两端对齐，不包括最后一行）
spacing
letter-spacing:字母间距
word-spacing:单词间距
text-indent:设置缩进
text-decoration
文字修饰：none、underline、line-through、overline
white-space空白格设置：
normal、nowrap（合并空格，不换行，自动设置水平滚动条）、pre（保留空白与换行）、pre-wrap（不合并空格，自动换行）、pre-line（合并空格，并且自动换行）
- 调试CSS
右键点击页面，选择检查
使用快捷键
Ctr1+Shift+I（Windows）
cmd+opt+I（Mac）
