一、基本阐述
div+css是一种目前比较流行的网页布局技术
div来存放需要显示的数据（文字，图标。。。。）css就是用来指定怎样显示，从而做到数据和显示相互分离的效果
table布局的分析
div+css布局
二、 引入CSS
内联：<style type="text/css" >
img{
filter:gray;
}
</style>
外联：<link rel="stylesheet" type="text/css" href="路径" />
内嵌：
优先级：行内样式>内联>外联
使用情况：1、行内样式在代码量较少情况下使用
2、内联主要用于单个网页
3、外联样式主要用于多个网页制作
css的基本用法
三、选择器
3.1、类选择器
. class选择器名{
属性：属性值；
、、、、、、
}
3.2、id选择器
# Id选择器名{
属性：属性值；
、、、、、、
}
3.3、html选择器(html元素的一种)
html选择器名{
属性：属性值；
、、、、、、
}
3.4、通配符选择器(可以作用到所有html元素)
*{
属性：属性值；
、、、、、、
}
优先权： id选择器 > class选择器 >html >通配符
组合选择器（逗号隔开）h,p{ }
后代选择器（空格隔开）ul li { }
相邻选择器 （加号 /同级元素）
父子选择器（大于符号隔开） .div > p { }
四、字体样式
4.1 color 颜色
4.2 font-size 字体大小 lengthpx
4.3 font-style 字体倾斜 normal正常 italic斜体
4.4 font-weight 字体加粗 bold 加粗 100-900
4.5 font-family 设置文字字体 楷体/宋体
4.6 text-decoration ： none 去掉下划线 文字装饰
overlive 上划线 underline : 下划线
line-throngh 贯穿线 blink ： 闪烁
4.7 line-height 行高 两行文字中间的垂直距离 line-height:50px;
4.8 list-style ： none 去掉 li 的点
4.9 letter-spacing : 数字px 字符间距离
4.10 word -spacing : 数字px 单词间距
五、文本样式
5.1 text-align : left / center /right 水平对齐
5.2 vertical - align : modile / top /bottom 垂直对齐
5.3 text-indent : 数字px ； 首行缩进
5.4 border_bottom :1px dottend / ashed / dashed block ; 下划线
六、盒子模型
宽：Xpx;
高：height:ypx;
边框： border : none/dottend(点线) / dashed 虚线 / solid 实线
不同方向的边框 ： border-top / right / left / bottom
内边距：padding :10 ; 表示上下左右内边距都是10px
padding : 10px 5px ; 表示上下内边距是10px，左右内边距是5px
padding : 10px 5px 15px ; 表示上内边距是10px，左右内边距是5px ，下内边距是15px
padding : 10px 5px 15px 20px ; 表示上内边距是10px，右内边距是5px ，下内边距是15px， 左内边距是10px
padding-top/right/left/bottom
外边距： margin 同内边距
display : none 不显示
block 表示使用块元素方式显示
inline 表示使用行内元素方式显示
margin : 0 auto 上下为0左右为auto自动居中 盒子居中
样式初始化：*{
margin:0; padding:0; font-size=12px;
}
七、网页布局
浮动：float : none / right / left
注意：在float 操作时，子盒子的宽度综合必须小于父亲盒子宽度
同一行的浮动使用完毕，最好在最后清楚浮动（解决父亲盒子自动撑高的目的）
八、属性选择器
语法：[属性]{css样式}
[属性=”属性值“]{css样式}
<style type="text/css">
[align]{ border:1px solid red ; backgorund:green ; }
[align="center"]{ border:1px solid red ; backgorund:green ; }
</style>
九、伪类选择器
语法 ： a : link { css样式 }
根据元素的状态进行选择
未访问连接 link
鼠标悬停上面 hover
鼠标按下后的状态 active
访问后的状态 visited
十、背景样式
backgorund 复合属性
backgorund-image = url 设置背景图片
background -color : 背景颜色
backgorund - repeat 设置背景平铺 x 横向平铺 y 纵向平铺
注意：当父级元素宽度高度大于图片宽高时就会横纵向平铺
background-position : x y ; 图片定位
.t1{
50px;
height:100px;
background -repeat : no-repeat ; 不平铺
background-position：100px 100px
}
十一、定位
position :位置
属性：absolute 绝对定位 层次高于网页浮动（层次高于整个网页）
relative 相对定位 层次不会高于整个网页
fixed 固定定位
一般position会结合位置的设定使用 left 距离左端的位置
top 距离上端的位置
right 右（弹框）
bottom 下 （弹框）
所有的定位可以设定他的层次 Z-index : 数字 数字越大层次越高
.pos{
width : 100px;
height : 100px;
polition :absolute;
left:400px;
top:400px;
}
十一、其他一些常用总结
1、overflow : hidden ; 超出区域影藏
2、hspace = "20"水平方向的间距
3、 vspace 文字和图片垂直方向的间距
4、border-radins : 10% 设置圆角度
5、outline 外边框
6、border-collapse : collapse; 去掉表格边框合并
7、鼠标移上去变成手型 cursor:pointer;