《Web前端开发》课程理论教学部分 第十二讲:文字样式 学时计划:2学时理论,2学时实验 (实验五:文字排版) 教学大纲: 1、文本样式 2、字体样式 3、CSS3文本效果 4、使用服务器端字体 5、讨论与思考 文字是网页中最为常见、最为重要的内容,CSS对于文字内容的 设置,也是最基本的功能。 本讲主要介绍文本和字体的样式,并重点介绍CSS3新增的文本 效果。结合CSS3的新特征,介绍客户端字体合服务器端字体以及相 关的意义。最终通过新闻内容呈现和个人简历网页两个案例,展示文 字样式的应用。 、文本样式 通过文本样式,可以改变文本的颜色、字符间距、文字对齐方式 等,并实现文本缩进、字体装饰等内容。 1.1文本样式 CSS支持的文本属性如下表所示。 表11-1文本样式 属性 描述 设置文本颜色 direction 设置文本方向 ine-height 设置行高 letter-spacing 设置字符间距。 text-aligl 对齐元素中的文本。 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs.51xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第十二讲：文字样式 学时计划：2 学时 理论，2 学时 实验 （实验五：文字排版） 教学大纲： 1、文本样式 2、字体样式 3、CSS 3 文本效果 4、使用服务器端字体 5、讨论与思考 文字是网页中最为常见、最为重要的内容，CSS 对于文字内容的 设置，也是最基本的功能。 本讲主要介绍文本和字体的样式，并重点介绍 CSS 3 新增的文本 效果。结合 CSS 3 的新特征，介绍客户端字体合服务器端字体以及相 关的意义。最终通过新闻内容呈现和个人简历网页两个案例，展示文 字样式的应用。 一、文本样式 通过文本样式，可以改变文本的颜色、字符间距、文字对齐方式 等，并实现文本缩进、字体装饰等内容。 1.1 文本样式 CSS 支持的文本属性如下表所示。 表 11-1 文本样式 属性 描述 color 设置文本颜色 direction 设置文本方向。 line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本
text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。CSS2包含该属性,但是CSS2.1没有保留该属性 text-transform 控制元素中的字母。 设置文本方向 white-space 设置元素中空白的处理方式 word-spacing 设置字间距。 1.2缩进 text- indent属性用来实现文本缩进。该属性值可以为像素值、 百分比或相对值em,可以为正值或负数值。 1.3水平对齐 text- align属性用来定义一个元素内的文本在水平方向上的对 齐方式。属性值有五种情况。 (1)属性值:left、 right、 center left、 right、 center分别定义文本是左对齐、右对齐和居中对 齐。中文和西方语言都是从左向右读,所有text- align的默认值是 left,此时文本在左边界对齐,右边界呈锯齿状(称为“从左到右” 文本)。对于希伯来语和阿拉伯语之类的语言,text- align则默认为 right,因为这些语言从右向左阅读的。 (2)属性值: justify 值 justify可以使文本的两端都对齐。在两端对齐文本中,文本 行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间 隔,使各行的长度恰好相等。 (3)属性值: inherit 值 inherit规定从父元素继承水平对齐样式 1.4文字间隔 word- spacing属性用来定义文字(英文单词)之间的标准间隔。 其默认值 normal与设置为0是一样的。属性值可以是正负的长度值。 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn text-decoration 向文本添加修饰。 text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 text-transform 控制元素中的字母。 unicode-bidi 设置文本方向。 white-space 设置元素中空白的处理方式。 word-spacing 设置字间距。 1.2 缩进 text-indent 属性用来实现文本缩进。该属性值可以为像素值、 百分比或相对值 em，可以为正值或负数值。 1.3 水平对齐 text-align 属性用来定义一个元素内的文本在水平方向上的对 齐方式。属性值有五种情况。 （1）属性值：left、right、center left、right、center 分别定义文本是左对齐、右对齐和居中对 齐。中文和西方语言都是从左向右读，所有 text-align 的默认值是 left，此时文本在左边界对齐，右边界呈锯齿状（称为“从左到右” 文本）。对于希伯来语和阿拉伯语之类的语言，text-align 则默认为 right，因为这些语言从右向左阅读的。 （2）属性值：justify 值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本 行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间 隔，使各行的长度恰好相等。 （3）属性值：inherit 值 inherit 规定从父元素继承水平对齐样式。 1.4 文字间隔 word-spacing 属性用来定义文字（英文单词）之间的标准间隔。 其默认值normal与设置为0是一样的。属性值可以是正负的长度值
1.5字母间隔 letter- spacing属性用来定义字母(字符)之间的标准间隔 其属性值和word- spacing属性值相似。 案例: 示例12-1:文本样式 <!doctype html> <meta charset="utf-8> tte>文本样式<ile style tyl margin. Upx padding: Opx body I margin: 30px adding: Opx font-size: 13.5px color: #333 line-height:180%;产行间距M text-align; center;文字水平对其方式 h1{ font-weight: bold *文本加粗M font-size 20px /*文字大小M color: #FOO: /文字颜色 letter-spacing:10px;/*字符间距M margin: 10px auto font-size: 11px co|or:#999: font-weight: normal pi /*首行缩进M </style> 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.5 字母间隔 letter-spacing 属性用来定义字母（字符）之间的标准间隔。 其属性值和 word-spacing 属性值相似。 案例： 示例 12-1：文本样式 <!doctype html> <html> <head> <meta charset="utf-8"> <title>文本样式</title> <style type="text/css"> * { margin:0px; padding:0px; } body { margin:30px; padding:0px; font-size:13.5px; color:#333; line-height:180%; /*行间距*/ text-align:center; /*文字水平对其方式*/ } h1 { font-weight:bold; /*文本加粗*/ font-size:20px; /*文字大小*/ color:#F00; /*文字颜色*/ letter-spacing:10px; /*字符间距*/ } h3 { margin:10px auto; font-size:11px; color:#999; font-weight:normal; } p { text-indent:2em; /*首行缩进*/ text-align:left; } </style> </head> <body>
<article> <h1>匆匆<h1> <h3>作者:朱自清/创作时间:1922年3月28日<h3> <p>燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开 的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?一一是 有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了 里呢? φp>我不知道他们给了我多少日子;但我的手确乎是渐渐空虚了。在默默里算 着,八千多日子已经从我手中溜去;像针尖上一滴水滴在大海里,我的日子滴 在时间的流里,没有声音,也没有影子。我不禁头涔涔而泪潸潸了 p>去的尽管去了,来的尽管来着;去来的中间,又怎样地匆匆呢?早上我起 来的时候,小屋里射进两三方斜斜的太阳。太阳他有脚啊,轻轻悄悄地挪移了 我也茫茫然跟着旋转。于是一一洗手的时候,日子从水盆里过去;吃饭的时候, 日子从饭碗里过去;默默时,便从凝然的双眼前过去。我觉察他去的匆匆了, 伸出手遮挽时,他又从遮挽着的手边过去,天黑时,我躺在床上,他便伶伶俐 俐地从我身上跨过,从我脚边飞去了。等我睁开眼和太阳再见,这算又溜走 日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了 p>在逃去如飞的日子里,在千门万户的世界里的我能做些什么呢?只有徘徊 罢了,只有匆匆罢了;在八千多日的匆匆里,除徘徊外,又剩些什么呢?过去 的日子如轻烟,被微风吹散了,如薄雾,被初阳蒸融了;我留着些什么痕迹呢 我何曾留着像游丝样的痕迹呢?我赤裸裸来到这世界,转眼间也将赤裸裸的回 去罢?但不能平的,为什么偏要白白走这一遭啊? <p>你聪明的,告诉我,我们的日子为什么一去不复返呢? </article> 1.6字符转换 text- transform属性用来对文本的大小写进行转换处理。该属 性值有四种:none、 uppercase、 lowercase、 capitalize。 默认值none对文本不做任何改动,将使用源文档中的原有大小 写。 uppercase和 lowercase将文本转换为全大写和全小写字符。 capitalize只对每个单词的首字母转换为大写字符 案例: 示例12-2:字符转换 <!doctype htmI> <meta charset="utf-8> tte>字符转换<rtte <style type="text/css"> 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <article> <h1>匆匆</h1> <h3>作者：朱自清 / 创作时间：1922 年 3 月 28 日</h3> <p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开 的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是 有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了 哪里呢？ <p>我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默默里算 着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴 在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。 <p>去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起 来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了； 我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候， 日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了， 伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐 俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了 一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。 <p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊 罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去 的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？ 我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回 去罢？但不能平的，为什么偏要白白走这一遭啊？ <p>你聪明的，告诉我，我们的日子为什么一去不复返呢？ </article> </body> </html> 1.6 字符转换 text-transform 属性用来对文本的大小写进行转换处理。该属 性值有四种：none、uppercase、lowercase、capitalize。 默认值 none 对文本不做任何改动，将使用源文档中的原有大小 写。uppercase 和 lowercase 将文本转换为全大写和全小写字符。 capitalize 只对每个单词的首字母转换为大写字符。 案例： 示例 12-2：字符转换 <!doctype html> <html> <head> <meta charset="utf-8"> <title>字符转换</title> <style type="text/css">
body i magi padding: 0px font-size: 14px line- height: 180% uppercase Style text-transform uppercase case Style text-transform lowercase capitalize Style text-transform: capitalize <p class="uppercase Style">at twenty years of age, the will reigns; at thirty, the wit; and at forty, the judgment <p class="lowercase Style">Life is like a hot bath. It feels good while you're in it, But the longer you stay in, The more wrinkled you get <p class="capitalize Style">you laugh at me for being different, but I laugh at you for being the same 1.7文本装饰 text- decoration属性用来对文本进行装饰。该属性值有五种 none、 underline、 overline、line- through、 blink。 默认值none对文本不做任何装饰。 underline会对元素加下划 线。Over1ine会在文本的顶端画一个上划线。1ine- through在文本 中间画一个贯穿线。 blink会让文本闪烁。 案例: 示例12-3:文本装饰 <!doctype html> <meta charset="utf-8> tte>文本装饰<rtte 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn body { maigin:50px; padding:0px; font-size:14px; line-height:180%; } .uppercaseStyle { text-transform:uppercase; } .lowercaseStyle { text-transform:lowercase; } .capitalizeStyle { text-transform:capitalize; } </style> </head> <body> <p class="uppercaseStyle">at twenty years of age, the will reigns; at thirty, the wit; and at forty, the judgment. <p class="lowercaseStyle">Life is like a hot bath. It feels good while you’re in it, But the longer you stay in, The more wrinkled you get. <p class="capitalizeStyle">you laugh at me for being different, but I laugh at you for being the same. </body> </html> 1.7 文本装饰 text-decoration 属性用来对文本进行装饰。该属性值有五种： none、underline、overline、line-through、blink。 默认值 none 对文本不做任何装饰。underline 会对元素加下划 线。overline 会在文本的顶端画一个上划线。line-through 在文本 中间画一个贯穿线。blink 会让文本闪烁。 案例： 示例 12-3：文本装饰 <!doctype html> <html> <head> <meta charset="utf-8"> <title>文本装饰</title>