这是我参与「第四届青训营 」笔记创作活动的的第2天
如果把建网站想象成建房子，html是已经建好的毛坯房，css作用就是对毛坯房进行装修了
选择器
开始之前先说一下选择器的权重，选择器的权重部分表示了权重值越大，选择器元素修改的样式就能覆盖掉同一个元素身上之前的样式
如果遵循从上至下原则执行代码，盒子此时应该是红色，但是没有，就是因为id的权重值比class多，所以这个盒子的背景颜色是通过id修改的颜色
就是说，一个元素的样式，优先选择权重值大的选择器
权重的值
| 类型 | 值 |
|---|---|
| 内联选择器 | 1000 |
| id | 100 |
| class，伪类，属性选择器 | 10 |
| 标签，伪元素选择器 | 1 |
内联选择器
直接在元素上修改
| 选择器 | 示例 | 解释 |
|---|---|---|
| 类型选择器 | h1 { } | 类型选择器 |
| 通配选择器 | * { } | 通配选择器 |
| 类选择器 | .box { } | 类选择器 |
| ID 选择器 | #unique { } | ID 选择器 |
| 标签属性选择器 | a[title] { } | 标签属性选择器 |
| 伪类选择器 | p:first-child { } | 伪类 |
| 伪元素选择器 | p::first-line { } | 伪元素 |
| 后代选择器 | article p | 后代运算符 |
| 子代选择器 | article > p | 子代选择器 |
| 相邻兄弟选择器 | h1 + p | 相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p | 通用兄弟 |
各种选择器的用法，表来自于MDN
可以一次性选中多个元素
多个选择器之间用逗号分隔
这样的好处是，多个元素的某一个属性的值是相同的，就可以这样写，减少代码重复
各种属性
字体font
font可以按顺序设置多个属性，也可以成为设置复合属性
按照顺序排列：font-style,font-variant,font-weight,font-size/line-height,font-family
| font-属性 | 解释 |
|---|---|
| style | 文字风格 |
| variant | 文字大小写 |
| weight | 文字粗细 |
| size | 文字大小 |
| line-height | 行高 |
| family | 字体样式 |
设置样式的时候：font:以上属性;
以上属性也可以单独设置
文字对齐text-align
可以设置文字的对齐方式为：left,right,centent,justify
文字间距letter-spacing
可以设置文字的间距，单位为px,em,百分比
首行缩进text-indent
设置第一行缩减,单位为px,em,百分比
文本修饰text-decoration
给元素设置删除线，下划线，上划线
处理空白white-space
属性是用来设置如何处理元素中的空白 (en-US)。
