web css样式资料

一、复习
1> div图层 1.位置（position） 注意：与left和top配合使用
2.浮动（float） 注意：与clear配合使用
3.样式（display） 注意：与width和height相关。
4.溢出（overflow）
二、CSS的样式属性
1> 选择器
2> CSS的引入
3> CSS样式属性
1.单位
2.字体（大小，倾斜，字体，加粗） 注意:复合属性
3.文本（字符间距，行间距，首行缩进，英文大小写，装饰，对齐）
4.颜色和背景（颜色，背景：颜色，图像） 注意:背景是复合属性
5.列表样式 css
4> CSS盒模型
1.外边界（margin)
2.边框（border)
3.填充（padding) 注意：以上三个是复合属性三、CSS中的单位
1> 绝对单位 说明：常用于平面印刷中
2> 相对单位 说明：显示是不固定的，适合于网页前端；
1.em 说明：一般相对于字体高度，来设置行高；是文字高度的倍数 例如：p{font-size:40px;line-height:5em;} 行高是文字高度的5倍。
2.ex 说明：一般以字体中小写字母的高度作为参考
3.px（像素点） 说明：一般相对于屏幕分辨率
4.百分比% 说明：一般相对于父元素四、字体样式
1.font-size(尺寸） 单位1：相对单位 单位2：使用关键字 small large medium
2.font-style（倾斜） 取值：normal（正常)，italic（斜体）
3.font-family（字体） 取值：字体名称(取多个值时，用逗号分隔） 注意：字体中出现空格时，要用引号括住(Times New Roman)
4.font-weight（加粗）
取值1：数字 400(normal) 700(bold) 100（lighter)
取值2：关键字 normal，bold，bolder，lighter 5.font: 注意
1.设置多个属性时，用空格分隔
2.大小和字体两个属性，依次放到最后；前3个属性没有先后顺序。
3.指定行高时，用斜杠分隔放到大小的后面 例如： #f6{font:italic bold 40px/3em “雅黑”, “宋2体” ,“隶书”}五、文本样式
1.字符间距（letter-spacing) 取值:长度单位 2.行距（line-height) 取值：相对于文字设置大小（em，%）
3.首行缩进（text-indent） 取值:长度单位
4.大小写转换（text-transform) 取值:关键字 capitalize uppercase lowercase
5.字符装饰（text-decoration)
6.水平对齐(text-align)
7.垂直对齐(vertical-align)