CSS：层叠样式表
用于设置HTML页面中的文本内容（字体，大小，对方式等），图片外形（宽高，边框样式，边距等）以及版面的布局等外观显示样式。
一：基础部分
1.css书写位置
(1)内嵌式：直接嵌在HTML文件中
(2)外链式：css文件<link>引入
(3)导入式：eg:<style>@import url();</style>
(4)行内式:只能给一个标签设置样式
2.基本语法
(1)选择器
a:标签选择器(元素，类型)
eg:span{} p{} b{} h系列{}
属性：
list-style:none 去掉无序列表的小圆点
text-decoration:none 去掉超级链接下划线b:
b1:id选择器 以“#”来定义
HTML中唯一标识一个元素的名称，每个元素只能有一个id属性，id属性值唯一。由数字、字母、下划线组成，首字母不能是数字，严格区分大小写。
b2:类选择器 用来选择class属性，以“.”定义
定义一组具有相同特征的元素，一个元素可以有多个class属性，并且多个元素可以共享同一个class属性。
c:复合选择器
c1:后代选择器(后代，后辈)
eg:.box .spec 选择类名为box的标签内部的类名为spec的标签
c2:交集选择器
eg:li.spec 选择既是li标签也属于spec类的标签
c3:并集选择器
eg:ul,ol 选择所有ul和ol标签
d:伪类
超级链接a
a:link 没有被访问
a:visited 已经被访问
a:hover:正在被鼠标悬停
a:active:正在别激活的超级链接(按下键但是还没有松开)
为确保生效，按顺序依次声明：:link->:visited->:hover->:active
e:元素关系选择器
e1:子选择器(只能是子，不能是孙子，兄弟等) 例：div>p div的子标签
e2:相邻兄弟选择器 例：img+p 图片后面紧跟着的段落将被选中
e3:通用兄弟选择器 例：p~span p元素之后的所有同层级span元素
f:属性选择器
img[alt] 选择有alt属性的img标签
img[alt+"A"] 选择有alt属性的是A的img标签
img[alt^"A"] 选择有alt属性的以A开头的img标签
img[alt$"A"] 选择有alt属性的以A结尾的img标签
img[alt*="A"] 选择有alt属性的含有A的img标签
img[alt~="A"] 选择有alt属性的有格隔开的A字样的img标签
img[alt|="A"] 选择有alt属性的以A-开头的img标签
g:CSS3新增伪类
:empty 选空标签
:focus 选当前获得焦点的表单元素
:enabled 选当前有效的表单元素
:disabled 选当前无效的表单元素
:checked 选当前已经勾选的单选按钮或复选框
:root 根元素，即<html>标签
h:伪元素(::)
h1 ::before 创建一个伪元素，其将成为匹配选中的元素得到第一个子元素，必须设置content属性表示其中的内容。
例如a::before{content:"★"；}
h2 ::after 最后一个元素
h3 ::selection 用于文档中被用户高亮的部分(使用鼠标圈选的部分)
h4 ::first-letter 会选中某元素(必须是块级元素)第一行的第一个字母
h5 ::first-line 选中第一行的全部文字
i:层叠性(多个选择器可以同时作用于同一个标签，效果叠加)
id权重>class权重>表标签选择器权重
!important 可以提升权重
!important>id权重>class权重>表标签选择器权重
k:序号选择器
k1 :first-child 第一个子元素
k2 :last-child 最后一个子元素
k3 :nth-child() 任意位置、任意序号元素；(odd)奇，(even)偶
k4 :nth-of-type(3) 第三个某一类型子元素
k5 :nth-laat-child(3) 倒数第三个子元素
k6 :nth-last-of-type(3) 倒数第三个某一类型子元素
二:文本与字体属性
1.常用
(1)color:文本前景色，临时设置颜色
有16进制表示法，rgb( , , )表示法，rgba( , , , )表示法
(2)font-size 单位：px,em,rem
(3)font-weight 加粗
属性：normal/400;bold/700;
(4)font-style
属性：normal 取消倾斜； italic 倾斜； oblique
(5)text-decoration
属性：none 无修饰线；underline 下划线；line-through 删除线
2.段落和行
(1)text-indent 首行缩进 单位：em
(2)line-height 行高 单位：px/无单位(即表示字号的倍数)/百分数
(3)单行文本居中：行高=盒子高度 text-align:center 水平居中
(4)font合成属性 font-style,font-weight,font-size,font-family\
eg:font:italic bold 20px/1.5 Ariral,"微软雅黑"
3.继承性：给祖先先设，后代中生效
就近原则：样式指向同一元素，权重规则生效，权重大的被应用；权重相同时，就近原则生效，后面定义的被应用。样式不指向同一元素，权重失效，就近原则生效，离最近优先。
4.字体属性
font-family；设置字体： 英，“汉”
(1)添加值为sans-serif的font-family属性来更改body中的所有文本
(2)hr元素默认属性将使其显示为浅灰色曲线
(3)边缘borders
(4)font-varian：small-caps 显示成大写；normal:正常
三：盒模型
1.认识盒模型
所有HTML标签都可以看成矩形盒子，由width,height,padding,border构成。
盒子总宽度=width+左右padding+上下border
(1)width:宽度 单位：px/rem/百分数
块级元素如果没有设置width属性时，它将自动撑满
(2)hieght内容高度 单位：px/rem/百分数
(3)padding:内边距
属性：top right bottom left
灵活设置padding(用小属性层叠大属性)
a1:四数值写法 padding:上 右 下 左
a2:三数值写法 padding:上 左右 下
a3:二数值写法 padding:上下 左右
a1:一数值写法 padding:上下左右
(4)margin外边距
a1:top right bottom left
a2:margin垂直方向上有塌陷：小的margin会塌陷到大的margin中，从而margin不叠加，以大值为准。
a3:body,ul,p等都有默认的margin,清除如下：
*{
margin:0;
padding:0;
}或者使用并集选择器也可以
a4:盒子的水平居中：左右设置为auto
2.盒模型计算
(1)内容宽度(实际可用的)：width和height
(2)box-sizing属性
将盒子添加了box-sizing:border-box;之后，盒子的width,height数字就表示盒子实际占有的宽高了，即padding,border变为“内缩的”，不再“外扩”
(3)display属性
块级元素不并排显示，可以设置宽高，不设置width属性时自动撑满；
行内元素可以并排显示，不可以设置宽高，不设置width属性时自动收缩
(4)行内块
img和表单元素，可以并排显示，可以设置宽高
(5)行内元素和块级元素相互转换
display:block;将元素转为块级元素
display:inline;将元素转为行内元素
display:inline-block;将元素转为行内块
3.元素隐藏
display:none;元素将彻底放弃位置，如同没有写它的标签一样
visibility:hidden;元素不放弃自己的位置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。