CSS文本、列表样式属性及盒子模型属性

文本的样式属性

(1)字型：font-family: '宋体';

(2)字体加粗：font-weight: bold;

(3)字体样式：font-style: italic;

(4)字母间距: letter-spacing: 0px;

(5)单词间距：word-spacing: 10px;

(6)行高：line-height: 50px;

(7)水平对齐方式：text-align: 属性值;

(8)控制英文字符的大小：text-transform: 属性值;

(9)设置文本的下划线、上划线、删除线：text-decoration: 属性值;

(10)首行文本的缩进：text-indent：属性值;

(11)文本添加阴影效果：text-shadow：水平阴影距离  垂直阴影距离  模糊半径  颜色;

列表的样式属性

list-style-image：设置列表项的标记(项目符号)图像;

list-style：设置列表项的项目符号样式，若值为none则没有项目符号;

list-style-position：设置项目符号和文本的位置关系;

• list-style-position: outside; 表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐
• list-style-position: inside; 表示列表项目标记放置在文本以内，且环绕文本根据标记对齐

盒子模型属性

盒子模型是用来装东西的，它装的东西是HTML元素的内容。
一个盒子由外到内可以分成四个部分：外边距（margin）、边框（border）、内边距（padding）、内容（content）。
CSS可以通过margin、border、padding这三个属性来控制盒子的三个部分。而content则是HTML元素的内容。

边界

边界（margin）：盒子的边框与包含该盒子的容器之间的距离。

margin-top：上边界;
			
margin-right：右边界;
			
margin-bottom：下边界;
			
margin-left: 左边界;

填充

填充（padding）：内边距，盒子中的内容与盒子边框之间的距离。

padding: 上 右 下 左;
			
padding-top: 上边距;
			
padding-right: 右边距;
			
padding-bottom：下边距;
			
padding-left：左边距;

边框

边框（border）：盒子的边框线

border-style: 边框的样式【上、右、下、左】;
			
border-width: 边框的宽度【上、右、下、左】;
			
border-color: 边框的颜色【上、右、下、左】;
			
border(综合设置边框): 边框的宽度  边框的样式  边框的颜色;
			
border-radius(圆角边框): 水平半径参数/垂直半径参数;

清除页面元素的默认内外边距

*{
    padding: 0px;
	margin: 0px;
}

• “ * ”：通配符，代表所有元素

背景图像

background-repeat: 属性值;

• background-repeat: repeat; 图像在水平和垂直方向上都平铺（默认）
• background-repeat: no-repeat; 不平铺
• background-repeat: repeat-x; 水平平铺
• background-repeat: repeat-y; 垂直平铺

常用表示方式

颜色的表示方式

1. 颜色名：如red、blue
2. 十六进制：#rrggbb （r，g，b是三原色,十六进制取值在0~f） 例：#aadd45
3. 函数方式：rgb(r,g,b) （r，g，b是三原色,十进制取值在0~255之间）； rgba(red,green,blue,alpha) （“alpha”表示颜色透明度）

尺寸的表示方式

1. em：相对的长度单位 换算：1 em = 16 px
2. px：相对的长度单位，像素
3. in：绝对长度单位，英寸 换算：1 in = 2.54 cm
4. cm：绝对长度单位，厘米
5. mm：绝对长度单位，毫米

图像的表示方式

1. .png：体积小，适合网络传输
2. .jpg(.jpeg)：体积大，不适合网络传输
3. .gif：小动画、支持透明