河南中医药大学：《Web前端开发技术与实践》课程教学课件讲稿（2015）第09章 文字样式

Web前端开发技术与实践 第9章:文字样式 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.11

Web前端开发技术与实践 第9章：文字样式 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.11 1

2 本章主要内容 口文本样式 口字体样式 口文本效果 口使用服务器端字体 米 口案例:诗歌排版 口案例:使用服务器端字体实现网站图标4 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容  文本样式  字体样式  文本效果  使用服务器端字体  案例：诗歌排版  案例：使用服务器端字体实现网站图标 2

3 1.文本样式 口由于Web是HTM文档的集合体,有动态的元素、静态的元素、功 能展示的元素,它们的呈现不能够是杂乱无章的,这就需要对 各种文字样式进行排版。 ¤排版是对文本样式进行各种操作(例如改变文本的颜色、字符 间距、行高、文字对齐方式等,并需实现文本缩进、字体裝饰 等内容)。 CSS的文字样式可以通过各种属性的综合使用实现各种样式的文 字排版。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.文本样式  由于Web是HTML文档的集合体，有动态的元素、静态的元素、功 能展示的元素，它们的呈现不能够是杂乱无章的，这就需要对 各种文字样式进行排版。  排版是对文本样式进行各种操作（例如改变文本的颜色、字符 间距、行高、文字对齐方式等，并需实现文本缩进、字体装饰 等内容）。  CSS的文字样式可以通过各种属性的综合使用实现各种样式的文 字排版。 3

4 1.文本样式 1.1属性 表0901文本样式 靛述 color 设置文本颜色 text-indent 缩进元素中文本的首行 line-height 设置行高 letter-spacing设置字符间距 text-align 对齐元素中的文本 text-decoration向文本添加修饰 控制元素中的字母 t设置文本明影(cs2包含该匿性,但是cs1没有保留该属性 white-space设置元素中空白的处理方式 ord-spacing|设置字间距 unicode-bidi 设置文本方向 设置文本方向 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.文本样式 4 1.1属性

1.文本样式 12文本颜色: color 口 color属性规定文本的颜色。 口这个颜色还会应用到元素的所有边框,除非被 border- color或 另外某个边框颜色属性覆盖。 表0902 color属性值 述 color name 规定颜色值为颜色名称的颜色(比如red) hex number 规定颜色值为十六进制值的颜色(比如000) rgb number 规定颜色值为rgb代码的颜色(比如rgb(2550,0)) inherit 规定应该从父元素继承颜色 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.文本样式 5 1.2文本颜色：color  color属性规定文本的颜色。  这个颜色还会应用到元素的所有边框，除非被border-color或 另外某个边框颜色属性覆盖

十 2 现场演示: ■案例9-01:文本颜色 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 6 现场演示：  案例9-01：文本颜色

1.文本样式 1.3缩进:text- indent a text- indent属性规定文本块中首行文本的缩进。 口该属性值可以为像素值、百分比或相对值em,也可以为正值或 负值,如果使用负值,那么首行会被缩进到左边。 表0903 text-indent属性值 需性值 靛述 length 定义固定的缩进,默认值:0 定义基于父元素宽度的百分比的缩进 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.文本样式 7 1.3缩进：text-indent  text-indent属性规定文本块中首行文本的缩进。  该属性值可以为像素值、百分比或相对值em，也可以为正值或 负值，如果使用负值，那么首行会被缩进到左边

8 十 2 现场演示: ■案例9-02:文本缩进 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 8 现场演示：  案例9-02：文本缩进

9 1.文本样式 14行高:line- height 口line-high属性用来设置行间的距离(行高) 1ine- height与font-size的计算值之差在CSS中成为“行间距” 将其值分为两半,分别加到一个文本行内容的顶部和底部,其 中可以包含这些内容的最小框就是行框。 表0904 line-height属性值 性值 靛述 mad默认值。 设置合理的行间距 mma设置数字,此封字会与当前字体尺寸相乘来设置行间距 设置固定的行间距 %|基于当前字体尺寸的百分比行间距 inherit 规定应该从父元素继承 line-height属性的值 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.文本样式 9 1.4行高：line-height  line-hight属性用来设置行间的距离（行高）。  line-height与font-size的计算值之差在CSS中成为“行间距”， 将其值分为两半，分别加到一个文本行内容的顶部和底部，其 中可以包含这些内容的最小框就是行框

10 十 2 现场演示: ■案例9-03:行高 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 10 现场演示：  案例9-03：行高