CSS 学习

1、选择器

基础选择器

选择器	样式语法
类选择器	使用.声明，例如 .nav {}
标签选择器	使用标签声明，例如 p {}
id 选择器	使用#声明，例如 #nav {}

复合选择器（多个基础选择器组合使用）

选择器	作用	样式语法
后代选择器	选出后代元素	使用空格 分割，例如 div p
子代选择器	选出最近一级元素	使用大于分割，例如 div>p
并集选择器	选出同一级元素	使用逗号分割，例如 div,p
链接伪类选择器	选择不同状态的链接	a:hover 光标
:focus 选择器	选出获得光标的表单	input:focus

2、字体（font）

property	说明
font-family	设置字体（宋体 SimSun，黑体 SimHei，微软雅黑 Microsoft YaHei）
font-size	字体大小（单位 px像素）
font-style	设置字体样式 （默认值，浏览器标准显示 normal，斜体 italic，倾斜样式 oblique ）
font-weight	指定文字粗细（默认值 normal 等价于400，粗体 bold 等价于 700，更粗 bolder）

简写：font: font-style font-weight font-size/line-height font-family;

3、文本（text）

property	说明
text-align	对齐方式（左 left，中 center，右 right）
text-decoration	文本装饰（默认浏览器标准显示 none，下划线 underline，中划线 line-through ，上划线 overline）
text-indent	文本缩进（缩进两个字 2em）<1 em = 16px>
text-height	行间距

常用：取消超链接下划线 a {text-decoration: none}

4、背景（background）

property	作用	值
backgroud-color	背景颜色	预定义的颜色值 / 十六进制 / RGB代码
backgroud-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x / repeat-y
background-position	背景位置	具体数值 / left center right top bottom 对应 x 轴和 y 轴
background-attachment	背景附着	scroll （背景滚动）/ fixed （背景固定）
background-rgba(0,0,0,0.3)	背景颜色半透明	前三个数值是RGB 的颜色，最后一位数值是透明度（范围 0~1）

简写：background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；

5、css三大特性

1、层叠性（多个选择器对一个元素就行了冲突操作，就近原则取一个生效）
2、继承性（指定了一个标签样式，但是没有指定这个标签的里面标签的样式，内部标签文字颜色样式会继承父标签的）
3、优先级

选择器	权重
继承或 *	0,0,0,0
标签选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!Important 重要的	∞无穷大

注意点：继承权重为 0

6、盒子模型

边框

property	说明
border-width	设置边框粗细（单位 px）
border-style	设置边框样式（实线 solid，虚线 dashed，点线 dotted）
border-color	设置边框的颜色
border-collapse	合并相连的边框

简写(没有顺序)：border: 1px solid red
要点：合并相连边框 border-collapse

内边距和外边距

property	说明
padding	内边距
margin	外边距

常用：使有宽度的块标签 div 居中margin:0 auto