Web开发技术—CSS探究.ppt

（2）背景图像 可以使用background-image 属性设置图像作为背景，其默认值是 none，表示背景上没有放置任何图像。 例如： body { background-image: url(image_1.jpg); } body h1body部分添加背景图像/h1 /body 效果如下： 3.5 CSS盒模型及定位 * 属性 功能 font-family 设置字体系列，可以是通用字体系列和特定字体系列。 font-size 设置字体的尺寸，单位可以是px、em或百分比。 font-style 设置字体风格，可取值为normal、italic（斜体）和oblique（倾斜）。 font-variant 以小型大写字体或者正常字体显示文本，可取值为normal、small-caps或inherit。 font-weight 设置字体的粗细，可取值为normal、bold（粗体）和整数值（100-900）。 1、文字字体 有关文字字体的设置如下： 2、文字颜色。 修改文字颜色可以使用color属性，例如： p{ font-size:30px; color:red; } 例如： p 30px红色文字。 /p 效果如下： 3、文本缩进方式。 Web页面上的段落可以像word中的文档一样设置文本的缩进状态，这需要使用到CSS提供的text-indent 属性。text-indent 属性可以使元素的第一行实现缩进效果，一般来说，所有块级元素都可以应用 text-indent属性，但是该属性无法应用于行内元素以及图像等的替换元素。 例1.首行缩进： p { text-indent: 2em; } p 一个段落可以有多行构成，通常设置首行缩进两个汉字。 /p 效果如下： 4、对齐方式。 设置水平对齐方式使用text-align属性，它具有五个属性值，如下： left，表示左边对其；right，表示右对齐；center，表示文本居中对齐；justify，表示两端对齐；inherit，表示应该从父元素继承 text-align 属性的值。 例如： h1{ text-align:center; ｝ h1 文本居中对齐 /h1 效果如下： 5、字符间距。 CSS中使用word-spacing 属性来修改字（由空白符包围的一个字符串）间距，也就是修改单词之间的距离。其默认值为normal即使用标准间距（0），若使用正值，则表示增大间距，若使用负值，则表示减小间距。 例如： h1.loose{ word-spacing:1em;} h1.tight{ word-spacing:-5px;} h1 class=loose Increasing the word spacing /h1 h1 class=tight Reduce the word spacing /h1 效果如下： 6、字符转换 Web页面中的英文字母在现实中往往有些特殊规定，比如全部使用大写、单词首字母大写等等，这给HTML文档编写带来了麻烦，一旦输入不符合格式要求，显示也就跟着出错，为了避免这种情况，可以使用text-transform属性处理文本的大小写。 text-transform属性具有以下几个属性值： none，表示不对文本做任何修改；uppercase，表示将文本全部转换为大写字母；lowercase，表示将文本全部转换为小写字母；capitalize，表示每个单词的首字母大写。 例如： h1 { text-transform: capitalize; } h1 this is a title. /h1 效果如下： 7、文本修饰。 利用text-decoration属性可以对文本进行简单地修饰。该属性的常用属性值如下： none，表示不添加任何修饰；underline，表示添加下划线；overline，表示添加上划线；line-through，表示添加删除线；blink，表示添加文本闪烁效果。 例如： p.underline{ text-decoration:underline; } p class=underline 带有下划线的文本段落。 /p 效果如下： 8、文本方向。 为了显示不同阅读习惯的文本，可以使用direction属性修改文字方向。direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。 direction 属性有两个值：ltr 和 rtl。ltr表示从左到右显示文本，rtl表示从右到左显示文本。 例如： p{