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
一起设置时顺序为:上右下左