目录
一、CSS引入方式
01内部样式（学习使用）
02外部样式（开发使用）
03行内样式 （配合javaScript使用）
二、基础选择器
01标签选择器
02类选择器
03id选择器
04通配符选择器
05后代选择器
06子代选择器
07并集选择器
08交集选择器
09hover伪类选择器
10结构伪类选择器
三、emmet语法
四、字体和文本样式
01字体
大小
粗细
样式
类型
连写
02文本样式
缩进
文本水平对齐方式
文本修饰
行高
连写
五、背景相关属性
颜色
图片
平铺
位置
连写
六、元素显示模式
块级元素
行内元素
行内块元素
七、CSS三大特性
继承性
常见可继承的元素
继承失效
优先级
层叠性
八、盒子模型
内容（content）
边框（border）
内边距（padding）
外边距（margin）
注意点
九、伪元素
十、浮动
浮动
清除浮动
一、CSS引入方式
01内部样式（学习使用）
将css代码写于style标签中
02外部样式（开发使用）
css代码写于单独的css文件中（.css）并与html标签中使用link标签引入
03行内样式 （配合javaScript使用）
css代码写于标签 的style属性值里
二、基础选择器
01标签选择器
以html中的标签作为选择符
用于改变某个元素的默认样式时或者统一文档某个元素的显示效果
语法：标签{属性：属性值；}
02类选择器
语法：.class名字{属性：属性值；} 
Class属性值注意点
1、不能纯数字或中划线开头
2、 类名可重复，一个类选择器可同时选中多个标签
3、一个标签可有多个类名，中间用空格隔开
03id选择器
语法：# id名字{属性：属性值；}
注意点：
1、其类似身份证，具有唯一性
2、一个标签仅一个id属性值
3、一个id选择器只能选中一个标签
04通配符选择器
语法：* {属性：属性值；}
作用：将页面中所有标签一起更改样式 
05后代选择器
语法：选择器1 选择器2 { .... }
06子代选择器
语法：选择器1 > 选择器2 { .... }
注意点：其选中的仅为子代
07并集选择器
语法：选择器1 ，选择器2 { ... }
08交集选择器
语法：选择器1选择器2 { .... }
注意点：两种选择器中若含标签选择器则需放最前面
09hover伪类选择器
语法：选择器 ：hover { ... }
10结构伪类选择器
注意点
- n为0，1，2，3，4.....
- 通过n可组成常见公式
三、emmet语法
四、字体和文本样式
01字体
大小
语法：font-size：（单位 ：px）google默认大小为16px
粗细
语法：font-weight ：normal（400） bold（700）（属性值取100~900的整百数）
样式
语法：font-style：normal / italic（倾斜）
类型
语法：font-family
常见取值：具体字体，具体字体，.....，文字系列
具体字体：黑体，宋体.....
字体系列：san-serif、serif、monospace等
连写
语法：font：style weight size family
02文本样式
缩进
语法：text-indent
单位：px / em（1em默认一个字大小）
文本水平对齐方式
语法：text-align（设置父元素）
属性值：
- left（左对齐）
- center（居中）
- right（右对齐）
文本修饰
语法：text：decoration
属性值：
- underline（下划线）
- line-through（删除线）
- overline（上划线）
- none（无装饰线）——常用于清除a标签的下划线
行高
语法：line-height
取值：px / 倍数（当前标签font-size的倍数）
应用：line-height：父元素的高度（让单行文本水平居中）
line-heigh：1（可取消上下间距）
连写
语法：font：style weight size/line-height family
注意：覆盖问题
五、背景相关属性
颜色
语法：background-color（bgc）
其默认值为透明
常用取值：
- 关键词，如红色
- rgb表示法——rgb（0，0，0）三个数字分别代表红绿蓝占比，取值为0~255
- rgba表示法——rgba（0，0，0，0）第四个值表示透明度（0~1），0为透明
- 十六进制表示法——#000000（六个数字两两分别表示红绿蓝占比且需用十六机制数表示），若每两个数字均相同可简写，例#ffaabb可简写为#fab
图片
语法：background-image：url（'图片的路径'）（bgi）
平铺
语法：background-repeat（bgr）
属性值：
- repeat（默认值），即水平垂直方向均平铺
- no-repeat，即不平铺
- repeat-x，即沿水平方向平铺
- repeat-y，即沿垂直方向平铺
位置
语法：background-position：水平位置 垂直位置；（bgp）
属性值：（两种表达可混用）
- 数字+px（以盒子左上角为原点建系）
- 方位名词。水平：left、center、right。垂直：top、center、bottom
连写
语法：background：color image repeat position
注意：可按需求省略，但要注意覆盖
六、元素显示模式
块级元素
语法：display：block
特点：独占一行且能设置宽高，例div，p，h
行内元素
语法：display：inline
特点：一行可显示多个但不能设置宽高，例a，span
行内块元素
语法：display：inline-block
特点：一行可显示多个且能设置宽高，例input，textarea
特例：img标签有其特点，但chrome调试工具中显示其为inline
七、CSS三大特性
继承性
常见可继承的元素
color、font-style、font-weight、font-size、font-family、text-align、text-indent、text-height（可通过chrome调试工具判断，暗色为不能继承，亮色为可以继承）
继承失效
若浏览器有默认样式，则优先显示默认样式
特例：
- a标签的color
- h系列标签的font-size
- div的噶偶的不能继承，但是宽度有类似继承的效果（但也不是继承）
优先级
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
注：！important写与属性值后，分号前，其不能提升继承的优先级
权重叠加计算方式：（0，0，0，0）
即分别判断行内样式、id选择器、类选择器、标签选择器个数
从左至右，若分出大小就结束判断
层叠性
判断方式：
- 不同样式。共同作用
- 相同样式，覆盖
样式冲突时，仅当选择器优先级相同时，才能通过层叠性判断
八、盒子模型
盒子实际大小为内容、边框、内边距的和
内容（content）
边框（border）
连写：border： 粗细 样式 颜色（快捷键：bd + Tab）
单方向设置： border-方位名词
内边距（padding）
记忆规则：从上开始，顺时针赋值，若未设置，则其内边距与其对面的值相同
外边距（margin）
即盒与盒之间的距离
属性值与内边距的属性值相同
应用：移动盒子
注意点：
- 垂直布局的块级元素，上下margin合并取最大值。解决方案：尽量避免，即仅给其中一个设置margin
- 互相嵌套的块级元素，与父元素上边紧贴的子元素的margin-top会导致父元素一起下移。解决方案（原理：使父元素上边不紧贴着子元素）：a、给父元素设置border-top/padding-top。b、给父元素设置overflow：hidden。c、转换成行内块元素。d、设置浮动
注意点
行内元素垂直方向上的padding和margin无效
九、伪元素
概念：由css模拟出的标签效果，默认为行内元素
注意：伪元素必须设置conten属性才可以生效（content:' ';）
十、浮动
浮动
语法：float
属性值：left（左浮动）和right（右浮动）
特点：
清除浮动
清除浮动即清除其影响
方法：
- 直接设置父元素高度
- 在父元素内容的最后添加一个块级元素并给其设置clear：both（额外标签法）
- 用伪元素替代额外标签（单伪元素清除法），后者可隐藏content中的内容
4.双伪元素清除法
5.给父元素设置overflow：hidden
