CSS零基础学习笔记(三)

[color=darkred][b]CSS属性：[/b][/color]
[i]1、文本与字体属性
2、列表属性
3、浮动属性
4、背景属性
5、盒子模型
6、定位属性[/i]

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

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

[color=olive][b]三、列表属性：[/b][/color]
1、list-style-type ---- 表示设置列表标志的类型
2、list-style-image ---- 表示将图像设置为列表项标志
3、list-style-position ---- 表示设置列表项标志的位置
[i][color=orange]list-style-type:[/color]
1、disc:缺省值，黑圆点
2、circle:空心圆点
3、square:小黑方块
4、none:无列表项标志
[/i]
[i][color=orange]list-style-image:[/color]
list-style-image:url(../image/doc.gif);
[/i]
[i][color=orange]list-style-position[/color]
1、outside ---- 项目标记在文本以外，环绕文本不根据标记对齐
2、inside ---- 项目标记在文本以内，环绕文本根据标记对齐
[/i]
[i][color=orange]list-style[/color]
list-style:circle inside url(../image/doc.gif);
[/i]
[color=cyan][b]顺序为：1、list-style-type 2、list-style-position 3、list-style-image[/b][/color]

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

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

[color=olive][b]六、盒子模型[/b][/color]
1、border ---- 边框
2、padding ---- 填充
3、margin ---- 边界
4、content ---- 内容
[i]一个盒子模型的实际宽度 = 内容 + border + padding + margin[/i]
[i]
border:
border-top border-left border-right border-bottom
三个属性： color width style
一起设置时顺序为：上右下左
[/i]