一、语法
选择器 { 属性名1 : 属性值1 ; 属性名2 : 属性值2 ... }
二、样式
- 内联样式表：将样式表写在标签的style中。 注意，这种样式表不需要写"选择器{}"，直接给属性赋值
- 内部样式表:：将样式表写在style标签中(这个标签可以放在head中，也可以放在body中)
-
外部样式表：将样式表写在一个css文件中，然后在head中通过link导入
link标签 - 导入外部文件
rel属性 - 导入的文件的作用, stylesheet->样式表, icon->网页图标
type属性 - 导入的文件的类型说明, 类型/文件后缀
href属性 - 文件路径
<link rel="stylesheet" type="text/css" href="css/CSS基础.css"/>
三、选择器
- 元素选择器
直接将标签名作为选择器。例如: div{}, p{}, a{} - id选择器
将标签的id属性值前面加#作为选择器，一个页面中id值要唯一，例如: #p2{} - class选择器(类选择器)
将标签的class属性值前面加.作为选择器，例如: .c1{} -
(通配符)
直接将作为选择器，选中当前页面中所有的标签，例如: *{} - 群组选择器
将多个选择器用逗号隔开作为一个选择器，例如: a,p{} - 层级选择器(后代选择器)
将多个选择器用空格隔开作为一个选择器，按层级选中最后一个选择器选中的标签，例如: div .c1{}
选择器优先级：
| 名称 | 优先级 |
|---|---|
| 内联样式 | 最高 |
| 通配符 | 0001(1) |
| 元素选择器 | 0001(1) |
| class选择器 | 0010(2) |
| id选择器 | 0100(4) |
| 群组选择器 | 分开看每个选择器的权重 |
| 后代选择器 | 用空格分开的所有选择器权重之和 |
四、伪类选择器
语法：
普通选择器 : 状态 {}
| 状态 | 功能 |
|---|---|
| link | 初始状态(a标签，指标签对应的地址没有成功访问过的时候) |
| visited | 访问后的状态(一般针对a标签有效) |
| hover | 鼠标悬停在标签上的时候对应的状态 |
| active | 鼠标按住标签不放的时候对应的状态 |
注：需要遵守‘爱恨’原则,'LoVeHAte'
五、布局
| 标准流 | 功能 | 标签 |
|---|---|---|
| 块级 | 一个占一行，默认父标签宽度和内容高度，设置宽高有效 | p |
| 行内 | 一行显示多个，默认为内容大小，设置宽高无效 | span、a |
| 行内块 | 一行显示多个，默认为内容大小，设置宽高有效 | img、input |
设置布局：
- 左右结构：
| display属性 | 功能 | |
|---|---|---|
| block | 块 | |
| inline | 行内 | |
| inline-block | 行内块 | 默认左右间隙，可通过设置父标签字体大小为0来去掉 |
| none | 隐藏 |
- 脱流：
①浮动（float）
②定位（left、right、top、bottom、position）
脱流后，都按一行显示多个，默认为内容大小，设置宽高有效
①浮动
| float属性 | 功能 |
|---|---|
| left | 上左对齐 |
| right | 上右对齐 |
文字环绕：被环绕的标签浮动，文字标签不浮动
清除浮动：清除因为浮动产生的高度塌陷
高度塌陷： 当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷
| 方法 | 步骤 |
|---|---|
| 添加空盒子 | 在高度会塌陷的父标签的最后添加一个空的div；然后给空的div添加样式设置clear属性的值为both |
| overflow | 给高度会塌陷的那个父标签，添加样式设置overflow属性值为hidden |
| 万能清除法 | 选中高度会塌陷的那个父标签；给after状态添加样式：display:block;clear:both;content:"";visibility:hidden;height:0; 然后再给这个父标签添加样式：zoom:1 |
②定位
| position属性 | 功能 | |
|---|---|---|
| initial | 定位无效（默认） | |
| static | 定位无效（默认） | |
| absolute | 绝对定位 | 以第一个position的值不是默认值的父标签进行定位。（注意：body标签的position不是initial和static） |
| relative | 相对定位 | 相对本身在标准流中的位置进行定位 |
| fixed | 相对浏览器定位 | |
| sticky | 粘性定位 | 当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏bottom有效，并且显示在浏览器的底部（top和bottom有效，left和right无效） |
| 定位属性 | 功能 |
|---|---|
| top属性 | 顶部的距离 |
| bottom属性 | 底部的距离 |
| left属性 | 左边的距离 |
| right属性 | 右边的距离 |
六、盒子模型
| 组成 | 名称 | 功能 |
|---|---|---|
| content | 内容 | 可见，标签宽高的作用域，显示文本、图像、子标签 |
| padding | 内边距 | 可见，默认为0，背景色同content，有四个方向 |
| border | 边框 | 可见，默认为0，颜色和大小都可以单独设置，有四个方向 |
| margin | 外边距 | 不可见，占位 |
border属性：
语法：
border-方向：边框宽度 边框风格 边框颜色
边框风格: solid(实线), dashed(虚线), dotted（点划线）
