第03章SS样式控制.ppt

3.5.4 边框圆角（border-radius） 【例3-16】利用圆角边框制作各种漂亮的按钮 3.6 字体和文本控制 3.6.1 字体控制 CSS的字体样式属性用于对网页上所显示的文本字符的字体系列、字体的大小、粗细、样式、颜色和外观等进行控制。 3.6.2 文本控制 文本控制主要对文本字符串的对齐方式、缩进等属性进行控制。 1.文本垂直对齐方式（vertical-align） vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。允许指定负长度值和百分比值。在table的单元格中，该属性会设置单元格中的内容对齐方式。 【例3-17】演示垂直对齐属性的基本用法 3.6.2 文本控制 2. 行间距（line-height） line-height属性指字体最底端与字体内部顶端之间的距离，可以用它来控制文本行与行之间的距离，称为行间距。 取值有normal（允许内容顶开或溢出指定的容器边界）、length（用长度值指定行高，可以为负值）、percentage（用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值）、number（用乘积因子指定行高，可以为负值）。 例如：div{line-height:1.5;} 3.6.2 文本控制 3.字间距（letter-spacing） letter-spacing定义在文本字符框之间插入多少间隙。 选项有normal和length。取值为“normal”时为正常间距，也可以通过指定length设定字之间的间隔。 4.词间距（word- spacing） 该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。 判断是否为单词的依据是单词间是否有空格。 例如：p{word-spacing:50px;} 3.6.2 文本控制 5.自动换行（word-wrap） word-wrap的取值有normal（允许内容顶开或溢出指定的容器边界）、break-word（内容将在边界内换行）。 6.首行缩进（text-indent） 缩进的单位默认为pt，值默认为0。 7.文本溢出（text-overflow） 该属性设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。默认值为clip。 clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 ellipsis：当对象内文本溢出时显示省略标记（...）。 3.6.2 文本控制 8.文本大小写转换（text-transform） 检索或设置对象中的文本的大小写。 默认值为none。取值有：none（无转换）、capitalize（将每个单词的第一个字母转换成大写）、uppercase（转换成大写）、lowercase（转换成小写）。 9.文字修饰（text-decoration） 选项有：none、underline（下划线）、line-through（删除线）和overline（上划线）。如果未选择“none”，则可以选择其余效果的任意组合。 10.空格处理方式（white-space） white-space设置如何处理元素内的空格字符。 3.7 背景控制 3.7.1 复合属性（background） background属性是一个复合属性。 其基本语法为： background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ] 3.7.2 背景色与背景图像 background-color属性用于设置或检索对象的背景色，默认值为transparent。当同时定义了背景颜色和背景图像时，背景图像将覆盖在背景颜色之上。 background-image用于设置或检索对象的背景图像，默认值为none，表示无背景图。 3.7 背景控制 3. 7.3 背景图像的控制 控制背景图像的参数比较多，包括大小、位置、平铺、滚动、原点设置、剪切、多背景等。 1. 平铺（background-repeat） background-repeat用于设置或检索背景图像的平铺方式。必须先指定background-image属性后，该属性才有效。 2. background-background-attachment background-attachment指定背景图像是随内容滚动还是固定 3.背景位置（background-position） 设置或检索对象的背景图像位置。必须先指定backg