这是我参与「第四届青训营 」笔记创作活动的第21天
对于css内容是真的很多，但以下是最基础的
css规则
css的规则：选择器+声明块
选择器
了解选择器是非常重要的，也是最基本的 作用：可以帮你精准选中想要的元素
-
ID选择器
-
类选择器
-
元素选择器
-
通配符选择器 所有的元素都会选中 *{ color:red; }
-
属性选择器 [id=""]{}
-
伪类选择器 选中某些元素的某种状态 link：表示超链接未被访问时的颜色 visited：表示超链接被访问过的颜色 hover:鼠标悬停时的样式 a:hover{ color:#008c8c; } active:鼠标按下时的样式 a:active{ } 如果四个都有涉及的话，要按照link，visited，hover，active这种顺序写，要不然会出错。（爱恨法则） 最下面的先执行，就好像是，未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色：定义的顺序是a:visited、a:hover、a:link，这样的话，如果鼠标悬停在蓝色的未被访问的链接（说明现在已经是visited了）的时候，不会变绿色，因为先执行visited，不会往上执行了。visited上面没有设置悬停，而是在下面设置了。
-
伪元素选择器 有before和after两个，默认是隐藏的，但是实际上是存在的， before p::before{ content:"文本内容";
} after p::after{
} p元素不可以嵌套列表，只能放短语内容
css代码的书写位置
- 内部样式表 在head中写style，为什么要放在head呢？是为了让浏览器先读取css代码。其实也可以写在body里。
- 内联样式表 元素样式表 利用style属性，写在元素里面。
- 外部样式表 将样式书写到独立的css文件中，在head中写一个link标签，链接到外部css文件。 1)外部样式表可以解决页面样式重复的问题 2)有利于浏览器缓存，从而提高页面响应速度 3)有利于代码分离（HTML和css），更容易阅读和维护
盒模型
- 内容 content width、height、设置盒子内容的宽高 内容部分通常叫做整个盒子的内容盒 content-box
- 填充（内边距）padding 盒子的边框到内容的距离 padding-left…… padding：上 右 下 左 padding：上 左右 下 填充区+内容区=填充盒 padding-box
- 边框 border border：2px solid blue； border-style边框样式，有很多，solid表示实线，dotted表示点状虚线，double表示双实线。 border-width：上 下 左 右；上 左右 下；
边框区域+填充区域+内容区域=边框盒 border-box
- margin 外边距 边框到其它盒子的距离
