CSS零基础学习笔记(三)

CSS属性：
1、文本与字体属性
2、列表属性
3、浮动属性
4、背景属性
5、盒子模型
6、定位属性

一、字体属性：
1、font-size   ---- 字体的大小
2、font-family  ---- 字体的类型
3、font-style  ---- 字体的风格  font-style:italic 斜体字体样式
4、font-weight  ---- 字体的粗细

二、文本属性：
1、color ---- 设置文本颜色
2、line-height ---- 设置行高 line-height:24px
3、text-align ---- 设置文本的对齐方式 left right center
4、text-decoration ---- 向文本添加修饰(overline--上划线 underline--下划线 line-through--删除线)

三、列表属性：
1、list-style-type ---- 表示设置列表标志的类型
2、list-style-image ---- 表示将图像设置为列表项标志
3、list-style-position ---- 表示设置列表项标志的位置
list-style-type:
1、disc:缺省值，黑圆点
2、circle:空心圆点
3、square:小黑方块
4、none:无列表项标志

list-style-image:
list-style-image:url(../image/doc.gif);

list-style-position
1、outside ---- 项目标记在文本以外，环绕文本不根据标记对齐
2、inside ---- 项目标记在文本以内，环绕文本根据标记对齐

list-style
list-style:circle inside url(../image/doc.gif);

顺序为：1、list-style-type   2、list-style-position 3、list-style-image

四、浮动属性：
1、float：元素向哪个方向浮动  (none  right left)
2、clear：设置元素的哪一侧不允许有浮动元素  (none left right both)

五、背景属性：
1、background-color ---- 表示背景颜色 (transparent ---- 透明的背景颜色)
2、background-image ---- 表示背景图像
3、background-repeat ---- 表示背景的重复方式
(repeat在水平和垂直方向上重复 
repeat-x在水平方向上重复
repeat-y在垂直方向上重复
no-repeat不重复)
4、background-position ---- 表示图像的起始位置
1、使用百分比，共有两个值，一个是在水平方向，一个是在垂直方向
2、使用top、left、center、right、bottom
3、使用像素，共有两个值，一个是在水平方向，一个是在垂直方向


六、盒子模型
1、border ---- 边框
2、padding ---- 填充
3、margin ---- 边界
4、content ---- 内容
一个盒子模型的实际宽度 = 内容 + border + padding + margin

border:
border-top  border-left  border-right  border-bottom
三个属性： color    width    style
一起设置时顺序为：上右下左