课程主题 使用字体文本背景属性美化页面-网页客户端技术 课程-1728968821964.pptx

;使用字体、文本、背景属性美化页面目录;文本属性（text）;序号;设置前景色－color

color属性为不同元素设置文本颜色（即前景色）。颜色值可以是颜色名称、rgb值或者十六进制数。

基本语法：color：color|inherit

语法说明：

color为颜色表示的三种形式，颜色名称、十六进制值或rgb()函数；

inherit：继承。;设置字母（字符）间隔－letter-spacing

说明：

以上代码设置了h1标题的字母间距收紧0.5em，h4标题的字母间距加宽20像素。;设置单词间隔－word-spacing

单词间距word-spacing是用来设置单词之间的间隔距离。

基本语法：word-spacing：normal|长度|inherit

语法说明：

normal表示间距正常显示，是默认设置；

长度包括长度和长度单位，长度单位可以使用设置字体中的所有单位；

长度值可以是负数，表示单词间距将拉近。;设置单词间隔－word-spacing

示例：

p.spread{word-spacing:30px;}

p.tight{word-spacing:-0.5em;}

说明：

以上代码设置了类名为spread的段落单词间距加宽30像素，类名为tight的段落单词间距收紧0.5em。;设置段落缩进－text-indent

段落缩进text-indent属性是用来设置每个文字段落的首行缩进距离的，默认为不缩进。

基本语法：text-indent：长度|百分比|inherit

语法说明：

长度包括长度和长度单位，长度单位可以使用设置字体中的所有单位；

百分比则是相对上一级元素的宽度而定的；

长度值可以是负数，可以实现如悬挂缩进等效果。;;设置段落缩进－text-indent

说明：

以上代码第1行，设置了悬挂缩进，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。

为了避免出现这种显示问题，针对负缩进再设置一个外边距或一些内边距，此示例中设置了一个左内边距。悬挂缩进效果如图所示。第3行代码使用了百分比，是相对于父元素的宽度，第2行的div为其父元素，因此，缩进值为父元素的20%，即100像素。;设置英文大小写－text-transform

text-transform属性主要用来控制英文单词的大小写转换，可以灵活地实现对单词的部分或全部大小写的控制。

基本语法：

text-transform：uppercase|lowercase|capitalize|none|inherit

语法说明：

text-transform???性的取值说明如右表所示。;;例2-4使用CSS文本属性美化网页的文本

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/

titleCSS文本属性示例/title

styletype=text/css

p.p1{text-align:center;color:#ff0000;}

p.p2{letter-spacing:1em;text-decoration:underline;text-indent:4em;line-height:20pt;}

p.p3{letter-spacing:1em;word-spacing:1em;text-transform:capitalize;}

/style/head

body

pclass=p1CSS文本属性示例/p

pclass=p2

;;设置文本效果前;例2-4小结

本例仅介绍了几种常用的文本属性，其他属性可自行设置并体会；

在vscode中在设置的时候可了解各属性可取值情况。输入属性名称和冒号后，将会弹出可以取值的小窗口。;