1.CSS样式的理解：
Cascading Style Sheets（层叠样式表）：修饰html标签样式的
2.使用（需要内嵌html中）：
1.行内样式：（通过标签的style属性使用）
格式：样式名：样式的值
样式名：是由css定义的
2.内联样式：通过style标签 使用 写在head中
格式：选择器{样式名：样式值；}
3.外联样式（推荐使用）
通过.css文件使用，使用link标签引入写在head中
link标签：
属性：1.rel：引入文件的类型
2.href：引入使用的外部css文件路径
3.CSS语法
1.键值对 如：color：red；
2.键与值之间使用冒号
3.每一个属性结束使用分号
4.属性名都是定义好的 不可以随意写
5.所有的样式属性写在“ ”或者大括号中
6.注释/**/
4.选择器（定位到具体的某一个标签）
1.标签选择器：使用标签名{}
例如：p{background-color:gray}
2.ID选择器：id值唯一
使用：使用#id值{}
例如：#p2{color:green;}
3.类选择器
特点：多个标签可以有相同的class值 一个标签可以有多个class值
例如：.p3{color:pink}
4.属性选择器
特点：属性选择器 使用标签名【属性名=属性值】{}
例如： input[name=username]{background-color:pink;}
5.组合选择器
格式： 使用组合选择器，class选择器，。。。{}
例如：#d1，.sp,font{color:gold}
6.层级选择器：
特点：外层到内层
格式：使用选择器 选择器 。。。{}
例如：#ul li {color：greenyellow;}
7.选择器
特点：选中页面中所有的标签
格式：使用{}
例如：*{margin-left:0px;}
8.伪类选择器
使用：标签名：属性{}
例如：
a未点击状态
a;link{color:red}
a 点击后的状态
a;visited{color:gray;}
a 鼠标放上去状态
a:hover{color:blue;}
a 鼠标点击不松手
a:active{color:black;}
5.常见样式：
1.尺寸修饰：
width:宽
height：高
单位：px像素
em：父标签文本的倍数
2.字体修饰
font-size:字体大小
font-style：字体风格（italic：斜体 normal：正常）
font-weight：bolder：字体的类型
font-family:(字体的类型)仿宋
font-variant:（以大型大写字体或者正常文本显示）
3.文本修饰
首行缩进：text-indent:2em
颜色：color：
1.英文字母
2.十六进制
3.rgb（）
4.rgba（）
文本对齐方式：text-align
文本装饰：text-decoration
line-height：行高：可以指定垂直方向上的居中
4.背景样式
1.背景颜色：background-color
2.背景图片：background-image
3.图片是否平铺background-repeat:no-re[eat
4.背景定位：background-positon:rigth bottom
5.图片是否虽则和内容滚动 fixed 不滚动scrool 滚动 background-attackment：fixed
6.简写：background：颜色 图片 是否平铺 是否随内容滚动 定位；
5.边框修饰
border-left-color:左边框的颜色
border-left-style:左边框的样式
border-left-width:左边框的宽度
简写：border-top:宽度 样式 颜色
6.盒子模型
1.width：盒子宽度
2.border：边框宽度
3.margin：外边距（外边框和标签的距离）
4.padding：内边距（内容和内边框的距离）
5.盒子总宽度：width的值+2边框border+2外边距margin+2*内边距padding
6.指定盒子的阴影
1.水平方向的偏移量
2.垂直方向的偏移量
3.阴影的宽度
4.颜色
7.定位
1.相对定位：相对原来的位置
relative
2.绝对定位：相对盒子的边框
absolute
3.fixed 固定定位
fixed
8.浮动
1.作用：
布局演示，排序和对齐
格式：
float：left/right/none;
注意：
浮动脱离文档流会影响后边局部
如果设置了浮动，要清除浮动
9.display：（转换样式）
1.可以将块标签 转换成行内块不独占一行，可以设置宽高。（display：inline-block）
2.可以加行标签，转换成行内块标签（display:inline-block）
3.可以实现标签的隐藏和显示display:none
10.列表
1.list-style-type:设置列表的样式
2.list-style-image:url();设置列表标识的图片
