CSS快速学习3：文本、背景等属性

文本类属性：
7.水平对齐方式 text-align对块元素进行标记。
{text-align:left/right/center/justify;} justify对内容以两端边界线对齐显示
8.垂直对齐方式
{vertical-align:top/bottom/middle;}
9.行高{line-height:normal/数值;}
说明：
1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
2) 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
3) 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。
10.文本修饰：
text-decoration:none/underline/overline/line-through/blink.(高版本浏览器不支持blink属性)
说明：
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
blink：闪烁
11.首行缩进：text-indent:数值；
设置第一行的缩进值，负值是向前进（可以直接设置长度，或设置百分比）
说明：
1）text-indent可以取负值，可实现隐藏文本，悬挂缩进。
2）text-indent属性只对第一行起作用，若第一行不是文本则没变化。
12.字符间距 {letter-spacing:value;} 控制英文字母和汉字的字距
13.词间距 {word-spacing:normal/数值;}控制英文单词词距。（通用于英文词和词之间的间距）
14.文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器）
15.控制文本大小写
text-transform: none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母)/lowercase ( 都为小写字母 )
16.文本阴影 text-shadow
例：text-shadow: 5px 5px 5px #FF0000;
分别表示：水平偏移值，垂直偏移值，模糊的半径，阴影的颜色）

列表类属性：
1、定义列表符号样式：
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
2、使用图片作为列表符号：
list-style-image：url(所使用图片的路径及全称)；
3、定义列表符号的位置：
list-style-position:outside(外边)/inside(里边)；
list-style:none;去掉列表样式；

边框属性：
综合设置： border:3px red solid;
边框： border:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）solid:实线，dashed:虚线，dotted:点状线，double:双线；
右边框：border-right:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
左边框：border-left:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
上边框：border-top:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
下边框：border-bottom:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;

背景属性：
1.背景颜色
语法：选择符{background-color:颜色值;}
简写：background:color值;
2.背景图片的设置
语法：background-image：url(背景图片的路径及全称)；
说明：
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
3.背景图片平铺属性
语法：选择符 {background-repeat:no-repeat/repeat/repeat-x/repeat-y }
no-repeat:不平铺repeat：平铺repeat-x：横向平铺repeat-y ：纵向平铺
4.背景图的固定
语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}
说明：
fixed 固定，不随内容一块滚动；
scroll 随内容一块滚动。
5.背景图片的位置
语法：background-position:值1 值2;
选择符{background-position:left/center/right/数值 top/center/bottom/数值;}
水平方向上的对齐方式（left/center/right）或值
垂直方向上的对齐方式(top/center/bottom)或值
说明：
两个值 ：第一个值表示水平位置的值， 第二个值表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
向左方向，向上方向都是负值。
6.background-size: 数值/百分比/auto/cover/contain
说明：
数值：设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
百分比：以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
Contain：把背景图像等比扩展至最大尺寸，以使其宽度和高度完全适应内容区域，不一定完全覆盖住背景区域。
7.背景属性的缩写语法：
background:属性值1 属性值2 属性值3；
背景缩写：
background:#背景色 url（背景图片的路径及全称） no-repeat center top；