这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS学习笔记
CSS语法
类似于python中的字典，不过前面是个选择器：
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}
h1， p为选择器，大括号为CSS声明块，大括号里面的是属性和值，为CSS声明。
在选择器的开头加上"."可以选择类名。同时html文档中也要在对应的元素加上该类名。可以和元素一起使用，比如li.test，来选中li元素下类名为test的代码。 在选择器之间加上空格，代表该元素内部的任何子元素 descandent， +号代表的是相邻的元素。
选择器类型：
| 选择器 | 示例 | 学习 CSS 的教程 |
|---|---|---|
| 类型选择器 | h1 { } | 类型选择器 |
| 通配选择器 | * { } | 通配选择器 |
| 类选择器 | .box { } | 类选择器 |
| ID 选择器 | #unique { } | ID 选择器 |
| 标签属性选择器 | a[title] { } | 标签属性选择器 |
| 伪类选择器 | p:first-child { } | 伪类 |
| 伪元素选择器 | p::first-line { } | 伪元素 |
| 后代选择器 | article p | 后代运算符 |
| 子代选择器 | article > p | 子代选择器 |
| 相邻兄弟选择器 | h1 + p | 相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p | 通用兄弟 |
选择器的优先级： 类 大于 元素， 后者 大于 前者
一些设置在父类的属性可以被子类继承。
！important优先级最高
可以使用calc(), transform的rotate（）等函数来进行简单的计算。
速记属性：
font，bacground，padding，border，margin等属性可以用一行代码（值用空格分开）来代替数条代码的效果。
代码注释用/* 开头，用*/结尾。
CSS的使用
可以针对标签的状态来确定样式，比如link，visited，hover等， 选择器的写法为a：link， a:visited等
为了将html和css文件连接起来，可以在html文档中的head语句中加入如下代码：
<link rel="stylesheet" href="styles.css">
通过rel属性声明有css文档的存在并且用href指定其所在的位置。
css也可以再放html文件的内部，位于head标签中的style标签下。
或者放在html元素的style属性中，只影响该元素。（尽量不要这么做）
CSS盒模型
盒模型的组成
- contenet:显示内容,通过width和height改变大小
- padding:包围在显示区域外的空白区域,通过padding改变属性
- border:边框盒的属性,通过border改变属性
- margin:是盒子和其他元素之间的空白区域,通过margin改变属性
