《第5章用CSS控制文本样式.ppt》由会员分享，可在线阅读，更多相关《第5章用CSS控制文本样式.ppt（20页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第5 5章章 用用CSSCSS控制文本样式控制文本样式在网页中包含了大量的文字信息，统称为文本。所有的由文在网页中包含了大量的文字信息，统称为文本。所有的由文字构成的网页元素都是网页文本。文本的样式由文字样式字构成的网页元素都是网页文本。文本的样式由文字样式和段落样式构成。和段落样式构成。CSS提供了丰富的属性来控制文字样式提供了丰富的属性来控制文字样式和段落样式。本章讲述用和段落样式。本章讲述用CSS控制网页中文字的样式。本控制网页中文字的样式。本章内容包括：章内容包括：使用使用CSS样式控制文字的样式样式控制文字的样式使用使用CSS样式控制段落的样式样式控制段落的样式5.1 5.1 字体
2、字体在印刷业中，字体的使用是非常自由的。在印刷品上可以使在印刷业中，字体的使用是非常自由的。在印刷品上可以使用各种各样的字体来丰富产品外观。但是这种便利并不适用各种各样的字体来丰富产品外观。但是这种便利并不适用于网页。因为在网页上表现的字体并不是由服务器决定用于网页。因为在网页上表现的字体并不是由服务器决定的，而是由用户的终端系统决定的。字体并不是浏览器的的，而是由用户的终端系统决定的。字体并不是浏览器的一部分，而是电脑系统的一部分。当设计师在设定网页字一部分，而是电脑系统的一部分。当设计师在设定网页字体的时候使用了一种用户没有安装的字体，体的时候使用了一种用户没有安装的字体，那么用户在浏那么
3、用户在浏览这个网页时就不会看到设计师所设定的字体。此时在网览这个网页时就不会看到设计师所设定的字体。此时在网页上显示的是用户系统默认的字体。页上显示的是用户系统默认的字体。5.2 5.2 文字大小概述文字大小概述网页文字的大小决定网页内容的重要程度，较大的文字通常网页文字的大小决定网页内容的重要程度，较大的文字通常用作标题。文字的默认大小是由用户的浏览器决定的。在用作标题。文字的默认大小是由用户的浏览器决定的。在IE6、IE7和火狐浏览器中，网页显示的文字大小默认为和火狐浏览器中，网页显示的文字大小默认为16像素。设计人员可以使用像素。设计人员可以使用CSS的的font-size属性来改变属性
4、来改变网页中文字的默认大小。网页中文字的默认大小。5.2.1 5.2.1 设置文字大小设置文字大小CSS提供了提供了font-size属性用于改变文字大小。属性用于改变文字大小。5.2.2 5.2.2 使用相对大小定义使用相对大小定义使用相对大小的方法定义文字大小，使用相对大小的方法定义文字大小，textsize值可以使用相值可以使用相对长度单位定义和相对关键字定义。对长度单位定义和相对关键字定义。1使用相对长度单位定义文字大小使用相对长度单位定义文字大小2使用相对关键字文字大小使用相对关键字文字大小5.2.3 5.2.3 使用绝对大小定义使用绝对大小定义除了使用相对大小的方法定义文字大小，还
5、可以使用绝对大除了使用相对大小的方法定义文字大小，还可以使用绝对大小的方法定义文字大小。小的方法定义文字大小。1使用物理长度单位定义文字大小使用物理长度单位定义文字大小2使用关键字定义文字大小使用关键字定义文字大小5.3 5.3 文字颜色文字颜色在网页上使用不同颜色的文字可以突出主题以及美化页面。在网页上使用不同颜色的文字可以突出主题以及美化页面。CSS提供了提供了color属性用于改变网页上文字的颜色。属性用于改变网页上文字的颜色。5.4 5.4 文字粗细文字粗细在网页上的标题通常用加粗的字体表示。在在网页上的标题通常用加粗的字体表示。在html中，使用中，使用b标签表示加粗的文段。标签表示
6、加粗的文段。CSS提供了提供了font-weight属性用于属性用于改变网页上文字的粗细，可减小改变网页上文字的粗细，可减小b标签的重复应用。该属标签的重复应用。该属性还可以把性还可以把b标签中显示为粗体的文字变细。标签中显示为粗体的文字变细。5.5 5.5 斜体斜体在网页中的斜体文字常用于语句引用。在在网页中的斜体文字常用于语句引用。在html中，使用中，使用em标签和标签和i标签也可以将文字倾斜。标签也可以将文字倾斜。CSS提供了提供了font-style属属性用于设置网页上文字是否倾斜。性用于设置网页上文字是否倾斜。5.6 5.6 下划线、顶划线和删除线下划线、顶划线和删除线在网页中的常
7、常使用下划线来提示可点击的文字。在购物网在网页中的常常使用下划线来提示可点击的文字。在购物网站中，常使用删除线来修饰旧价格。下划线、顶划线和删站中，常使用删除线来修饰旧价格。下划线、顶划线和删除线统称为修饰线。除线统称为修饰线。CSS提供了提供了text-decoration属性用属性用于设置网页上文字的修饰线。于设置网页上文字的修饰线。5.7 5.7 英文字母大小写英文字母大小写在网页中使用英文文字常会涉及到文字大小写的问题。在购在网页中使用英文文字常会涉及到文字大小写的问题。在购物网站中，常使用删除线来修饰旧价格。下划线、顶划线物网站中，常使用删除线来修饰旧价格。下划线、顶划线和删除线统称
8、为修饰线。和删除线统称为修饰线。CSS提供了提供了text-transform属性属性用于设置英文文字的大小写用于设置英文文字的大小写5.8 5.8 属性的缩写法属性的缩写法属性缩写法是将多个属性的值并列写在一个属性下。只要是属性缩写法是将多个属性的值并列写在一个属性下。只要是复合属性都能应用属性速写法定义复合属性都能应用属性速写法定义CSS样式。例如，样式。例如，font属性是一个复合属性，多个文字属性的值可以并列缩写在属性是一个复合属性，多个文字属性的值可以并列缩写在font属性下。属性下。5.9 5.9 运用段落属性改变文字的段落样式运用段落属性改变文字的段落样式在网页中文字常以段落的形
9、式出现，用于表述具体的内容。在网页中文字常以段落的形式出现，用于表述具体的内容。本节将讲述用本节将讲述用CSS提供的段落属性来控制段落样式。提供的段落属性来控制段落样式。5.9.1 5.9.1 段落的水平对齐方式段落的水平对齐方式在网页中插入一段文字，在不添加任何在网页中插入一段文字，在不添加任何CSS属性控制下，该属性控制下，该文段是从水平排列的。文段的水平对齐有四种方式，分别文段是从水平排列的。文段的水平对齐有四种方式，分别为左对齐、右对齐、居中对齐和两端对齐。为左对齐、右对齐、居中对齐和两端对齐。5.9.2 5.9.2 段落的垂直对齐方式段落的垂直对齐方式CSS提供了提供了writing
10、-mode属性和属性和layout-flow属性来控制文属性来控制文本的排列方式。本的排列方式。1使用使用writing-mode属性设置文段垂直对齐属性设置文段垂直对齐2使用使用layout-flow属性设置文段的垂直对齐属性设置文段的垂直对齐5.9.3 5.9.3 首行缩进首行缩进文本使用首行缩进来代表分段。文本使用首行缩进来代表分段。CSS提供了提供了text-indent属性属性来控制文段首行缩进的距离。来控制文段首行缩进的距离。5.9.4 5.9.4 行间距与字间距行间距与字间距一个文本段落中行与行之间的距离称为行间距；文本中字与一个文本段落中行与行之间的距离称为行间距；文本中字与字
11、之间的距离称为字间距。字之间的距离称为字间距。1行间距行间距2字间距字间距5.10 5.10 本章实例：简单的文章页面本章实例：简单的文章页面本章通过一个简单的文章页面来综合使用之前讲述的各个控本章通过一个简单的文章页面来综合使用之前讲述的各个控制文本的制文本的CSS属性。在多数网站中都运用到文章页，本章属性。在多数网站中都运用到文章页，本章例子的效果如图所示。例子的效果如图所示。5.11 5.11 常见面试题常见面试题问题问题1：在不同的电脑上同一个网页的文字大小不同，这是：在不同的电脑上同一个网页的文字大小不同，这是为什么？为什么？问题问题2：文本首行缩进属性：文本首行缩进属性text-indent设置为设置为10%，行的长，行的长度是度是100px，那么该文本应缩进多少像素？，那么该文本应缩进多少像素？5.12 5.12 小结小结本章讲解了使用本章讲解了使用CSS属性设置文本的样式。本章的重点是如属性设置文本的样式。本章的重点是如何熟练运用何熟练运用CSS提供的属性控制文字的样式。本章的难点提供的属性控制文字的样式。本章的难点是如何记忆和掌握常用的是如何记忆和掌握常用的CSS文本属性。下一章将讲述使文本属性。下一章将讲述使用用CSS设置图片样式的方法。设置图片样式的方法。出自俊网天下出自俊网天下:http:/