《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:文本样式 tte>文本样式 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.5 字母间隔 letter-spacing 属性用来定义字母（字符）之间的标准间隔。 其属性值和 word-spacing 属性值相似。 案例： 示例 12-1：文本样式 文本样式 * { 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; }
匆匆 作者:朱自清/创作时间:1922年3月28日 燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开 的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?一一是 有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了 里呢? φp>我不知道他们给了我多少日子;但我的手确乎是渐渐空虚了。在默默里算 着,八千多日子已经从我手中溜去;像针尖上一滴水滴在大海里,我的日子滴 在时间的流里,没有声音,也没有影子。我不禁头涔涔而泪潸潸了 p>去的尽管去了,来的尽管来着;去来的中间,又怎样地匆匆呢?早上我起 来的时候,小屋里射进两三方斜斜的太阳。太阳他有脚啊,轻轻悄悄地挪移了 我也茫茫然跟着旋转。于是一一洗手的时候,日子从水盆里过去;吃饭的时候, 日子从饭碗里过去;默默时,便从凝然的双眼前过去。我觉察他去的匆匆了, 伸出手遮挽时,他又从遮挽着的手边过去,天黑时,我躺在床上,他便伶伶俐 俐地从我身上跨过,从我脚边飞去了。等我睁开眼和太阳再见,这算又溜走 日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了 p>在逃去如飞的日子里,在千门万户的世界里的我能做些什么呢?只有徘徊 罢了,只有匆匆罢了;在八千多日的匆匆里,除徘徊外,又剩些什么呢?过去 的日子如轻烟,被微风吹散了,如薄雾,被初阳蒸融了;我留着些什么痕迹呢 我何曾留着像游丝样的痕迹呢?我赤裸裸来到这世界,转眼间也将赤裸裸的回 去罢?但不能平的,为什么偏要白白走这一遭啊? 你聪明的,告诉我,我们的日子为什么一去不复返呢? 1.6字符转换 text- transform属性用来对文本的大小写进行转换处理。该属 性值有四种:none、 uppercase、 lowercase、 capitalize。 默认值none对文本不做任何改动,将使用源文档中的原有大小 写。 uppercase和 lowercase将文本转换为全大写和全小写字符。 capitalize只对每个单词的首字母转换为大写字符 案例: 示例12-2:字符转换 tte>字符转换 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 匆匆 作者：朱自清 / 创作时间：1922 年 3 月 28 日 燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开 的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是 有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了 哪里呢？ 我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默默里算 着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴 在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。 去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起 来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了； 我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候， 日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了， 伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐 俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了 一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。 在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊 罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去 的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？ 我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回 去罢？但不能平的，为什么偏要白白走这一遭啊？ 你聪明的，告诉我，我们的日子为什么一去不复返呢？ 1.6 字符转换 text-transform 属性用来对文本的大小写进行转换处理。该属 性值有四种：none、uppercase、lowercase、capitalize。 默认值 none 对文本不做任何改动，将使用源文档中的原有大小 写。uppercase 和 lowercase 将文本转换为全大写和全小写字符。 capitalize 只对每个单词的首字母转换为大写字符。 案例： 示例 12-2：字符转换 字符转换
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 at twenty years of age, the will reigns; at thirty, the wit; and at forty, the judgment 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 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:文本装饰 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; } at twenty years of age, the will reigns; at thirty, the wit; and at forty, the judgment. 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. 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 会对元素加下划 线。overline 会在文本的顶端画一个上划线。line-through 在文本 中间画一个贯穿线。blink 会让文本闪烁。 案例： 示例 12-3：文本装饰 文本装饰
body i magi adding: Opx font-size: 1 6px; line- height: 180%, underline Style i text-decoration underline verline Style t text-decoration overline text-decoration: line-through; style text-decoration blink. you laugh at me for being different, but I laugh at you for being the same you laugh at me for being different, but I laugh at you for being the same you laugh at me for being different, but I laugh at you for being the same you laugh at me for being different, but I laugh at you for being the same. 字体样式 字体样式用来定义字体系列、大小、粗细、显示风格和变形等 2.1CSS支持的字体属性 表11-2字体样式 属性 描述 简写属性。作用是把所有针对字体的属性设置在一个声明中 font-family 设置字体系列 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn body { maigin:50px; padding:0px; font-size:16px; line-height:180%; } .underlineStyle { text-decoration:underline; } .overlineStyle { text-decoration:overline; } .linethroughStyle { text-decoration:line-through; } .blinkStyle { text-decoration:blink; } you laugh at me for being different, but I laugh at you for being the same. you laugh at me for being different, but I laugh at you for being the same. you laugh at me for being different, but I laugh at you for being the same. you laugh at me for being different, but I laugh at you for being the same. 二、字体样式 字体样式用来定义字体系列、大小、粗细、显示风格和变形等。 2.1 CSS 支持的字体属性 表 11-2 字体样式 属性 描述 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列
设置字体的尺寸。 font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CS521已删除该属性。) font-stretch 对字体进行水平拉伸。(CSs21已删除该属性。) font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细 2.2字体系列 在CSS中,有两种不同类型的字体系列 通用字体系列:拥有相似外观的字体系统组合。 特定字体系列:具体的字体系列(比如黑体、微软雅黑、" Times") 除了各种特定的字体系列外,CSS定义了5种通用字体系列: Serf字体 sans- serif字体 Monospace字体 Cursive字体 Fantasy字体 font-family属性用来定义文本的字体系列 该属性值当字体名中有一个或多个空格(比如 New Century Schoolbook),或者如果字体名包括#或$之类的符号,需要在 font- family声明中加引号,单引号或双引号都可。 2.3字体风格 font- style属性用来定义字体的风格,该属性值有三种: normal italic、 oblique。 默认值 normal对文本不做任何改动。 italic定义文本斜体显示。 oblique定义文本倾斜显示。斜体( italic)是一种简单的字体风格, 对每个字母的结构有一些小改动,来反映变化的外观;倾斜( oblique) 文本则是正常竖直文本的一个倾斜版本 2.4字体加粗 font- weight属性用来定义字体的粗细。属性值如下表所示。 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn font-size 设置字体的尺寸。 font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 2.2 字体系列 在 CSS 中，有两种不同类型的字体系列： 通用字体系列：拥有相似外观的字体系统组合。 特定字体系列：具体的字体系列（比如 黑体、微软雅黑、"Times"） 除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列： Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体 font-family 属性用来定义文本的字体系列。 该属性值当字体名中有一个或多个空格（比如 New Century Schoolbook），或者如果字体名包括#或$之类的符号，需要在 font-family 声明中加引号，单引号或双引号都可。 2.3 字体风格 font-style属性用来定义字体的风格，该属性值有三种：normal、 italic、oblique。 默认值 normal 对文本不做任何改动。italic 定义文本斜体显示。 oblique 定义文本倾斜显示。斜体（italic）是一种简单的字体风格， 对每个字母的结构有一些小改动，来反映变化的外观；倾斜（oblique） 文本则是正常竖直文本的一个倾斜版本。 2.4 字体加粗 font-weight 属性用来定义字体的粗细。属性值如下表所示
表11-3font- weight属性值 属性值 描述 默认值。定义标准的字符。 定义粗体字符 bolder 定义更粗的字符 lighter 定义更细的字符。 定义由粗到细的字符。400等同于 norma,而700等同于bold nherit 规定应该从父元素继承字体的粗细。 2.5字体大小 font-size属性用来定义文本的大小。属性值可以为绝对值或相 对值。绝对值是将文本设置为指定的大小,此时不允许用户在所有浏 览器中改变文本大小(不利于可用性),绝对大小在确定了输出的物 理尺寸时很有用。相对值是相对于周围的元素来设置大小,允许用户 在浏览器改变文本大小。 W3C推荐使用相对值em来定义文本大小。1em等于当前的字体尺 寸。如果一个元素的font-size为12像素,那么对于该元素,1em 就等于12像素。在设置字体大小时,em的值会相对于父元素的字体 大小的变化而改变。 案例 示例12-4:文字样式 文字样式 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 表 11-3 font-weight 属性值 属性值 描述 normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。 2.5 字体大小 font-size 属性用来定义文本的大小。属性值可以为绝对值或相 对值。绝对值是将文本设置为指定的大小，此时不允许用户在所有浏 览器中改变文本大小（不利于可用性），绝对大小在确定了输出的物 理尺寸时很有用。相对值是相对于周围的元素来设置大小，允许用户 在浏览器改变文本大小。 W3C 推荐使用相对值 em 来定义文本大小。1em 等于当前的字体尺 寸。如果一个元素的 font-size 为 12 像素，那么对于该元素，1em 就等于 12 像素。在设置字体大小时，em 的值会相对于父元素的字体 大小的变化而改变。 案例： 示例 12-4：文字样式 文字样式
padding: Opx article i padding-left: 460px background-image url(images/Hai-BG. png) background-repeat: no-repeat, background-position right bottom; body i margin-top: 200px font-size: 13.5px; line- height: 180% text-align: left; background-image: url(images/Hai-Logo. png) h1{ font-size: 18px font-family:微软雅黑,黑体; color: #F30 letter-spacing: 5px h3{ margin: 10px auto font-size: 12px font-weight: normal text-align: left; [id]i padding-bottom: 15px; 面朝大海,春暖花开-> (海子,1989.1.13) 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn * { margin:0px; padding:0px; } article { padding-left:460px; width:630px; height:520px; background-image:url(images/Hai-BG.png); background-repeat:no-repeat; background-position:right bottom; } body { margin-top:200px; font-size:13.5px; line-height:180%; text-align:left; background-image:url(images/Hai-Logo.png); background-repeat:no-repeat; background-position:left top; } h1 { font-size:18px; font-family:微软雅黑, 黑体; color:#F30; letter-spacing:5px; } h3 { margin:10px auto; font-size:12px; color:#999; font-weight:normal; } p { text-align:left; } [id] { padding-bottom:15px; } 面朝大海，春暖花开--> （海子,1989.1.13）
从明天起,做一个幸福的人 喂马、劈柴,周游世界 从明天起,关心粮食和蔬菜 我有一所房子 面朝大海,春暖花开 从明天起,和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 pid=" PartEnd">我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人,我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海,春暖花开 article> CSS3文本效果 3.1CSS3新增的文本属性 CSS3新增了多个文本属性,具体如下表所示。 表11-4CSS3新增的文本属性 属性值 描述 hanging-punctuation规定标点字符是否位于线框之外 punctuation-tr 规定是否对标点字符进行修剪 设置如何对齐最后一行或紧挨着强制换行符之前的行。 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 text-justify 规定当 text-align设置为" justify"时所使用的对齐方法 text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情。 text-shadow 向文本添加阴影 text-wrap 规定文本的换行规则 word-break 规定非中日韩文本的换行规则。 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 从明天起，做一个幸福的人 喂马、劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子 面朝大海，春暖花开 从明天起，和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海，春暖花开 三、CSS 3 文本效果 3.1CSS 3 新增的文本属性 CSS 3 新增了多个文本属性，具体如下表所示。 表 11-4 CSS 3 新增的文本属性 属性值 描述 hanging-punctuation 规定标点字符是否位于线框之外。 punctuation-trim 规定是否对标点字符进行修剪。 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 text-outline 规定文本的轮廓。 text-overflow 规定当文本溢出包含元素时发生的事情。 text-shadow 向文本添加阴影。 text-wrap 规定文本的换行规则。 word-break 规定非中日韩文本的换行规则。 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行