设置文本属性一.pptVIP

动态网页制作技术 文本类css课程积件 学习目标 1.熟练使用CSS 文本属性定义文本的外观。 2.掌握常见Css文本属性 课程内容学习 1.案例一：设置文本属性一 html head style type=text/css body {color:red;} p.one {color:rgb(0,0,255);letter-spacing:20px; font-size:12px;} /style /head body p该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。/p p class=one该段落定义了 class=one。该段落中的文本是蓝色的。/p /body /html 在网页中，我们会用CSS 文本属性去定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。 （1）.代码 课程内容学习 1.案例一：设置文本属性一 ①、css文本颜色color CSS 颜色常常使用组合了红绿蓝颜色值 (RGB) 、十六进制 (hex) 表示法和CSS 颜色名进行定义。 RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。例如：rgb(255,0,0) 值显示为红色。 十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。 HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。例如red、?white, yellow、black, blue等。在本案例中，body默认的颜色通过颜色名定义成了红色，class选择器通过rgb将颜色设置为了蓝色。 （2）.显示效果 （3）.案例分析 课程内容学习 1.案例一：设置文本属性一 ②、字间距letter-spacing letter-spacing 定义文本中字母的间距(中文为文字的间距； letter-spacing:3px; letter-spacing:-3px;正值为增大距离,负值为缩小距离。 ③、文字大小 font-size 浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。font-size 值可以是绝对或相对值。 px是绝对单位，不支持IE的缩放，em是相对单位。 （3）.案例分析 课程内容学习 2.案例二：设置文本属性二 html head style type=text/css h1{text-align:center;} p{text-indent:2em ;font-size:12px;} p.lin {text-decoration:underline;} p.big {line-height: 200%;}/style /head body h1背影/h1 p我与父亲不相见已二年余了，我最不能忘记的是他的背影。 /p p class=lin那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！” /p p class=big回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。 /p /body /html （1）.代码 课程内容学习 2.案例二：设置文本属性二 （2）.显示效果 课程内容学习 2.案例二：设置文本属性二 ①、文本对齐text-align text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。 值 left、right 、 center 和 justify会导致元素中的文本分别左对齐、右对齐、居中和两端对齐。西方语言都是从左向右读，所有 text-align 的默认值是 left。在本案例中，对h1标签定义了文本居中对齐，而默认的p段落左对齐。 ②、首行缩进text-indent 该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，例如本案例中每一段都应用了首行缩进两个字符的代码。 （3）.案例分析 课程内容学习 2.案例二：设