第5章用CSS控制文本样式课件.ppt

1、第第5章章 用用CSS控制文本样式控制文本样式内容介绍本章讲述用CSS控制网页中文字的样式，包括使用CSS样式控制文字的样式和使用CSS样式控制段落的样式。培养目标（1）在CSS中设置文字大小。（2）在CSS中定义文字的相对大小和绝对大小。（3）在CSS中设置文字基本的属性。（4）在CSS中用段落属性改变文字的段落样式。（5）能够独立修饰一篇长篇XHTML文章页面。重点难点（1）如何熟练运用CSS提供的属性控制文字大小。（2）如何熟练运用CSS控制文字颜色。（3）如何熟练运用CSS控制下划线、顶划线和删除线。（4）如何熟练运用CSS控制英文字母大小写。（5）如何熟练运用CSS控制段落的对齐方式

2、。（6）如何熟练运用CSS控制行间距与字间距。5.1 理论解说理论解说 所谓文本，就是我们在网页设计中XHTML文档中包含的大量的文字信息，这里 只由文字构成的网页元素如font、p等都称之为文本。网页设计中.的图文编排，就涉及到大量的文字排版。CSS样式提供了丰富的属性设置来控制文本样式或 段落样式。本章将详细介绍用CSS控制网页中的文字或段落等文本样式。5.1.1 字体字体 网页设计中，设计师说要用到的是设计师当时用的计算机上的字体，当然也可以像印刷品那样使用很多本地计算机上的字体，但是要注意了，网页的使用时网上传输浏览的，网页中使用的字体在计算机上浏览时，字体调用的就是浏览者本地计算机的

3、字体，如果浏览者本地计算机上没有安装网页设计师设计网页时指定的文字字体，那么文本流就会按浏览器默认的字体展现，那么网页设计师指定的字体就失去意义。CSS样式设置文本流字体的属性是font-family，使用font-family设置网页文字字体的代码如：font-family：Arial；以上为设置文字字体为Arial的代码示例。示例5.1.1.1也可以给文本设置多重文字字体，用于用户计算机筛选，比如设置代码：font-family：宋体,黑体,楷体；/*设置中文字体*/font-family：Arial,”Times New Roman”,Times,Serif;/*设置英文字体*/5.1.

4、1 字体字体 示例5.1.1.1在CSS文字字体属性font-family里设置的文字字体名称，以英文逗号间隔，最后一个字体名称后跟英文分号结尾，罗列的字体名字按先后顺序在网页浏览用户计算机字体库中作筛选，第一个字体用户的计算机有则按第一个显示，若没有看第二个，第二个没有则带三个，直至最后一个罗列的字体名称，若都没有则按用户计算机浏览器默认显示。中文英文字体都按此先后顺序筛选显示。5.1.2 文字大小概述文字大小概述在网页设计中，安排分类文字信息的重要程度，往往会用字号的大小来做区分，通常标题等重要的文字会用大一号的字号设置，内容等成段落的文字内容，则会用标准小字号来设置。文字的默认大小是由用

5、户的浏览器来默认设置的，不同的浏览器默认值也不尽相同；在IE6、IE7和火狐浏览器中，网页的默认文字大小为16像素。在CSS样式设置中，font-size属性是来设置文字的大小，若不设置则按浏览器默认设置显示。5.1.2.1 设置文字大小设置文字大小 CSS样式提供font-size属性来设置文本流的字号大小，用font-size来设置文本大小，语法如下：font-size：12px；在此font-size的值为12px大小，值除了使用像素外，还可以使用长度、百分比和关键字等。示例5.1.2.1使用不同单位设置文字大小：font-size:12px;/*像素单位设置文字大小*/font-siz

6、e:1em;/*em单位设置文字大小*/font-size12in;/*英寸单位设置文字大小*/font-size:120%/*百分比单位设置文字大小*/font-size:large /*关键字设置文字大小*/以上的设置文字大小的单位按第4章介绍的单位分为相对大小或绝对大小两种设置方法。5.1.2.2 定义文字的相对大小定义文字的相对大小 使用相对单位定义文字的大小，属性值可以使用相对长度单位和相对关键字定义文字大小。（1）文字的相对单位，有像素（px）、em、百分比（%）等。像素是相对于电脑屏幕分辨率而言，设置为像素大小，文字不会继承父元素的文字大小。em服从文档继承关系的相对单位，em会

7、继承父元素的文字大小。关于px和em的概念参见第4章内容。示例5.1.2.2.1使用em、px和百分比设置文字大小进行比较5.1.2.2 定义文字的相对大小定义文字的相对大小（2）使用相对关键字定义文字大小 使用相对单位定义文字的大小除了px、em和百分比之外，还有使用相对关键字来设置文字的大小，CSS样式中提供了larger和smaller关键字用于设置font-size的属性。使用larger关键字就是使文字变大，使用smaller设置文字大小是使文字变小。5.1.2.2 定义文字的定义文字的绝对绝对大小大小（1）使用物理长度定义文字大小使用物理长度定义文字大小，物理长度单位有磅（pt）、

8、px、英寸（in）、厘米（cm）、毫米（mm）等。（2）使用绝对关键字定义文字大小CSS提供的关键字设置文字大小，除了上述相对关键字smaller和larger之外，还有一些绝对关键字设置文字大小，主要有xx-small、x-small、small、medium、large、x-large和xx-large等。示例5.1.2.3.2使用绝对关键字定义文字大小5.1.3 文字颜色文字颜色 网页上使用不同文字颜色，可以达到美化、优化网页的效果，CSS提供了color属性来设置文字的颜色。Color属性的值可以使用第4章中所讲到的颜色单位来设置，包括颜色名称、RGB色值和十六进制颜色值。5.1.4

9、文字文字粗细粗细 文字的粗细在网页设计中起到分层结构的作用，使网页更容易阅读。在HTML文档中可以用b标签来加粗文字，在XHTML标准文档编写中，CSS提供font-weight属性来设置文字的粗细，可以减少b标签的重复使用，并且是b标签已经加粗的文字变细。示例5.1.4文字粗细设置5.1.6 斜体斜体 斜体文字不是文字的固有字体，是CSS样式对默认文字的倾斜设置，一般用于应用语句等特殊情况，加强网页文本流的层次感.。CSS提供font-style属性用于设置文字的斜体样式，属性包括italich和oblique两个倾斜值。该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个

10、单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。为三个段落设置不同的字体样式代码如下：p.normal font-style:normal;p.italic font-style:italic;p.oblique font-style:oblique;示例5.1.5使用font-style属性设置文字的斜体样式5.1.6 下划线、顶划线和删除线下划线、顶划线和删除线 下划线、顶画线和删除线，在网页设计中统称为文字的修饰线。一般用于突出网页文字的修饰性和更改设置，例如价格的变更，内容的修改、超链接修饰、关键字的加注等。CSS提供text-decoration属性来为文本做下划线、

11、顶画线和删除线的设置：属性值包括none、underline、overline、line-through、blink、inherit等。特别指明的是，inherit规定应该从父元素继承 text-decoration 属性的值。所以该值通常不用。文本修饰代码如下：text-decoration:none;/*默认，定义标准的文本不做修饰*/text-decoration:underline;/*会对元素加下划线*/text-decoration:overline;/*会在文本的顶端画一个上划线*/text-decoration:line-through;/*在文本中间画一个穿线*/text-d

12、ecoration:blink;/*会让文本闪烁*/示例5.1.6下划线、顶画线和删除线装饰文本的样式5.1.7 英文字母大小写英文字母大小写CSS提供text-transform 属性控制英文文本的大小写，值有none、capitalize、uppercase、lowercase、inheri等来设置英文文本字母的大小写。特别指明的是inherit规定应该从父元素继承 text-transform 属性的值。所以该值通常不用。代码如下：text-transform:none /*默认。定义带有小写字母和大写字母的标准的文本。*/text-transform:capitalize /*文本中的

13、每个单词以大写字母开头。*/text-transform:uppercase /*定义仅有大写字母。*/text-transform:lowercase /*定义无大写字母，仅有小写字母。*/text-transform:inherit /*规定应该从父元素继承 text-transform 属性的值。*/示例5.1.7使用text-transform属性设置一段英文句子大小写5.1.8 属性的缩写法属性的缩写法CSS font属性是用来控制文字字体、颜色、大小等。而font的属性有多种，在通常情况下，我们用缩写的办法将多种属性概括在一句CSS代码中。这样极大地减小了代码，优化CSS文件。我们

14、常用的font属性有下面六种：1.font-style设定斜体，如：font-style:italic;。2.font-weight设定文字粗细，如：font-weight:bold;。3.font-size设定文字大小，如：font-size:12px;。4.line-height设定行距，如：line-height:150%;。5.color设定文字颜色，注意不是font-color，如：color:red;。6.font-family设定字体，如：font-family:Lucida Grande,Verdana,Lucida,Arial,Helvetica,宋体,sans-seri。5

15、.1.8 属性的缩写法属性的缩写法如果对body标签设置font属性样式，不缩写的样式如下：bodyfont-family:宋体,黑体,楷体_GB2312;/*设置文字字体*/font-size:18px;/*设置文字字号大小*/font-style:italic;/*设置文字样式为斜体*/line-height:200%;/*设置行间距为200%*/font-weight:bold;/*设置文字样式为加粗*/font-variant:small-caps;/*设置英文为小型大写字母*/text-transform:capitalize;/*设置英文为首字母大写*/text-decoratio

16、n:underline;/*设置文本装饰下划线*/color:red;/*设置文本颜色为红色*/上述的属性，我们可以概括地写在一行font属性里。需要注意的是，text-decoration和color属性我们需要单独定义。bodyfont:italic small-caps bold 18px/200%宋体,黑体,楷体_GB2312;text-transform:capitalize;text-decoration:underline;color:red;5.1.8 属性的缩写法属性的缩写法示例5.1.8把上述font属性定义给body标签以改变页面内容的文字样式5.1.9 用段落属性改变文

17、字的段落样式用段落属性改变文字的段落样式 在网页设计中会出现大量段落文本来做内容的详细介绍，而在进行段落文本的排版时都会遇到段落文本的对齐问题，本节内容将详细介绍CSS如何设置段落文本的对齐方式。5.1.9.1 段落的水平对齐方式段落的水平对齐方式CSS提供text-align属性设置段落文本的对齐方式，属性值有left、right、center、justify、inherit等，对齐方式及代码如下：text-align:center /*文本中间对齐。*/text-align:left /*文本左对齐*/text-align:right /*文本右对齐*/text-align:justify

18、 /*文本两端对齐*/示例示例5.1.9.1使用text-align设置段落文本的水平对齐方式，我们选择四段文字，分别以左对齐、右对齐、中间对齐和两端对齐。5.1.9.2 段落的段落的垂直垂直对齐方式对齐方式 在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊版式的排列等。版式的排列等。CSS中提供了中提供了writing-mode和和layout-flow来设置文字的竖向排来设置文字的竖向排列。列。（1）使用）使用writing-mode属性设置段落文本垂直对齐属性设置段落文本垂直对齐属性属性writi

19、ng-mode的值有两个，即的值有两个，即lr-tb 和和 tb-rl，代码构，代码构成和排版如下：成和排版如下：writing-mode:lr-tb /*左左-右，上右，上-下（西文横向排版）下（西文横向排版）*/writing-mode:tb-rl /*上上-下，右下，右-左（中文垂直排版）左（中文垂直排版）*/在设置或检索对象的内容块固有的书写方向时。西方语言在设置或检索对象的内容块固有的书写方向时。西方语言缺省的是缺省的是“左左-右，上右，上-下下”的书写方式。但是亚洲语言常的书写方式。但是亚洲语言常有有“上上-下，右下，右-左左”的书写方式。的书写方式。当当writing-mode属

20、性值发生变化时，属性值发生变化时，text-align属性与属性与vertical-align属性的作用也将发生变化。属性的作用也将发生变化。示例示例5.1.9.2使用使用writing-mode样式设置中文古诗词的垂直样式设置中文古诗词的垂直对齐排版对齐排版5.1.9.2 段落的段落的垂直垂直对齐方式对齐方式 在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊版式的排列等。版式的排列等。CSS中提供了中提供了writing-mode和和layout-flow来设置文字的竖向排来设置文字的竖向排列。列。（

21、2）使用）使用layout-flow属性设置段落文本的垂直对齐属性设置段落文本的垂直对齐属性属性layout-flow的属性值有两个的属性值有两个horizontal和和vertical-ideographic。代码构成和排版如下：代码构成和排版如下：layout-flow:horizontal;/*自左边流入，下一自左边流入，下一行在前一行下面行在前一行下面*/layout-flow:vertical-ideographic;/*自上而下流自上而下流入，下一行在前一行左面入，下一行在前一行左面*/horizontal:对象中的内容自左边流入，下一行在前对象中的内容自左边流入，下一行在前一行下

22、面。这个值适于拉丁语系。一行下面。这个值适于拉丁语系。vertical-ideographic:对象中的内容自上而下流入，对象中的内容自上而下流入，下一行在前一行左面，这个值适于亚洲语系。下一行在前一行左面，这个值适于亚洲语系。在设置或检索对象内文本的流动和方向时。当在设置或检索对象内文本的流动和方向时。当layout-flow属性值发生变化时，属性值发生变化时，text-align属性与属性与vertical-align属性的作用也将发生变化。属性的作用也将发生变化。示例5.1.9.2.2使用layout-flow样式设置中文古诗词的垂直对齐5.1.9.3 首行缩进首行缩进段落文本在正规的行

23、文格式中，首行是要做缩进处理，以分清段落方便阅读。CSS提供了text-indent属性来设置段落文本的首行缩进。text-indent属性可以应用于中文，同样也可以应用于英文，text-indent的值是数字，单位是像素或百分比。示例5.1.9.3使用text-indent:属性来为两段文字的首行做缩进设置5.1.9.4 行间距与字间距行间距与字间距 行间距：即段落文本中每行之间间距。字间距：即段落文本中每个汉字或英文单词之间的距离。（1）行间距 CSS提供了line-height属性来设置段落文本的行间距，line-height 与 font-size 的计算值之差（在 CSS 中成为“行

24、间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。文本的行间距可以使用长度单位px设置行间距的值，也可以使用相对单位设置行间距的值，如果不设置就是浏览器的normal默认值。示例5.1.9.4使用属性line-height设置三段文字的行间距5.1.9.4 行间距与字间距行间距与字间距（2）字间距CSS提供letter-spacing 属性设置中文字间距，letter-spacing 属性可以增加或减少字符间的空白，即字符间距，也就是字间距。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整中文字之间通常的间隔。

25、因此，normal 就相当于值为 0。同时CSS还提供了word-spacing属性设置英文单词的间距。示例5.1.9.4.3.使用letter-spacing和word-spacing分别设置中文和英文的字符间距5.2 上机指导上机指导5.2.1上机指导案例：对一首宋词作文本的简单排版5.2 上机指导上机指导5.2.2上机指导案例：设置中英文段落文本字间距5.3应知训练应知训练一一、填空题填空题（1）CSS提供了color属性来设置文字的颜色。（2）CSS提供font-weight属性来设置文字的粗细。（3）font-style属性包括italich和oblique两个倾斜值。（4）CSS提

26、供letter-spacing 属性设置中文字间距。（5）text-transform属性值有none、capitalize、uppercase、lowercase、inheri。二、单项选择题（1）定义文字的相对大小的单位有哪些？()A.有像素（px）、em、百分比（%）等。B.有100、200、300等。C.有大写、小写等。（2）定义文字的绝对大小的单位有哪些？()A.有磅（pt）、pc、英寸（in）、厘米（cm）、毫米（mm）等。B.有标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类选择器等。C.有Div，HTML,H1，P等。（3）定义文字相对大小的关键字有哪

27、些？并按从小到大的顺序列出来。()A.smaller、larger。B.磅（pt）、pc、英寸（in）。C.有大写、小写等。（4）CSS属性的缩写法有什么作用？()A.缩写有利于减少代码，优化CSS。B.方便视觉查看。C.可以缩小文档空间。（5）属性writing-mode的值有几个？分别是什么？()A.属性writing-mode的值有两个，smaller 和larger，代码构成。B.属性writing-mode的值有两个，lr-tb 和 tb-rl，代码构成。C.属性writing-mode的值有两个，font-size 和text-align，代码构成。（6）文字闪烁的效果text-d

28、ecoration:blink在什么浏览器下可显示，在什么浏览器下不可显示？()A.text-decoration:blink在火狐Firefox浏览器下可以显示，在IE下不可显示。B.text-decoration:blink在IE下可以显示，在Firefox浏览器下不可显示。C.text-decoration:blink在Firefox浏览器下可以显示，在IE下也可显示。三、判断题：（1）字体就是文字的书法样式，比如通常说的宋体、黑体、楷体、隶书等等。（对）（2）对文本流设置文字样式，除了可以在标签选择器内设置以外，还可以对标签做内嵌文字字体设置。（对）（3）在CSS样式设置中，font-size属性设置图片的大小，若不设置则按浏览器默认设置显示。（错）（4）使用相对单位定义文字的大小，属性值不可以使用相对长度单位和相对关键字定义文字大小。（错）（5）使用相对单位定义文字的大小必须px。（错）（6）用medium关键字设置文字大小样式的优先级，高于body的font-decoration属性设置！（错）（7）inherit 规定应该从子元素继承字体的粗细！（错）5.4 技能提升技能提升5.4.1技能提升案例：运用所学习得文本CSS样式设定的知识，来对一段中英文的段落文本做排版。5.4 技能提升技能提升5.4.2技能提升案例：对一段论语做排版。