教学第5章用CSS控制文本样式课件

第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控制段落的对齐方式。（6）如何熟练运用CSS控制行间距与字间距。第5章用CSS控制文本样式 内容介绍5.1理论解说所谓文本，就是我们在网页设计中XHTML文档中包含的大量的文字信息，这里只由文字构成的网页元素如font、p等都称之为文本。网页设计中.的图文编排，就涉及到大量的文字排版。CSS样式提供了丰富的属性设置来控制文本样式或段落样式。本章将详细介绍用CSS控制网页中的文字或段落等文本样式。5.1理论解说所谓文本，就是我们在网页设计中XHTML5.1.1字体

网页设计中，设计师说要用到的是设计师当时用的计算机上的字体，当然也可以像印刷品那样使用很多本地计算机上的字体，但是要注意了，网页的使用时网上传输浏览的，网页中使用的字体在计算机上浏览时，字体调用的就是浏览者本地计算机的字体，如果浏览者本地计算机上没有安装网页设计师设计网页时指定的文字字体，那么文本流就会按浏览器默认的字体展现，那么网页设计师指定的字体就失去意义。

CSS样式设置文本流字体的属性是font-family，使用font-family设置网页文字字体的代码如：

font-family：Arial；

以上为设置文字字体为Arial的代码示例。

示例5.1.1.1也可以给文本设置多重文字字体，用于用户计算机筛选，比如设置代码：

font-family：宋体,黑体,楷体；/*设置中文字体*/

font-family：Arial,”TimesNewRoman”,Times,Serif;/*设置英文字体*/

5.1.1字体网页设计中，设计师说要用到的是设计5.1.1字体

示例5.1.1.1在CSS文字字体属性font-family里设置的文字字体名称，以英文逗号间隔，最后一个字体名称后跟英文分号结尾，罗列的字体名字按先后顺序在网页浏览用户计算机字体库中作筛选，第一个字体用户的计算机有则按第一个显示，若没有看第二个，第二个没有则带三个，直至最后一个罗列的字体名称，若都没有则按用户计算机浏览器默认显示。中文英文字体都按此先后顺序筛选显示。

5.1.1字体示例5.1.1.1在CSS文字字体属性fo5.1.2

文字大小概述在网页设计中，安排分类文字信息的重要程度，往往会用字号的大小来做区分，通常标题等重要的文字会用大一号的字号设置，内容等成段落的文字内容，则会用标准小字号来设置。文字的默认大小是由用户的浏览器来默认设置的，不同的浏览器默认值也不尽相同；在IE6、IE7和火狐浏览器中，网页的默认文字大小为16像素。在CSS样式设置中，font-size属性是来设置文字的大小，若不设置则按浏览器默认设置显示。5.1.2文字大小概述在网页设计中，安排分类文字信息的重要5.1.2.1

设置文字大小CSS样式提供font-size属性来设置文本流的字号大小，用font-size来设置文本大小，语法如下：

font-size：12px；

在此font-size的值为12px大小，值除了使用像素外，还可以使用长度、百分比和关键字等。

示例5.1.2.1使用不同单位设置文字大小：

font-size:12px;/*像素单位设置文字大小*/

font-size:1em;/*em单位设置文字大小*/

font-size12in;/*英寸单位设置文字大小*/

font-size:120%/*百分比单位设置文字大小*/

font-size:large/*关键字设置文字大小*/

以上的设置文字大小的单位按第4章介绍的单位分为相对大小或绝对大小两种设置方法。5.1.2.1设置文字大小CSS样式提供font5.1.2.2

定义文字的相对大小

使用相对单位定义文字的大小，属性值可以使用相对长度单位和相对关键字定义文字大小。（1）文字的相对单位，有像素（px）、em、百分比（%）等。像素是相对于电脑屏幕分辨率而言，设置为像素大小，文字不会继承父元素的文字大小。em服从文档继承关系的相对单位，em会继承父元素的文字大小。关于px和em的概念参见第4章内容。示例5.1.2.2.1使用em、px和百分比设置文字大小进行比较5.1.2.2定义文字的相对大小使用相对单位定义5.1.2.2

定义文字的相对大小（2）使用相对关键字定义文字大小使用相对单位定义文字的大小除了px、em和百分比之外，还有使用相对关键字来设置文字的大小，CSS样式中提供了larger和smaller关键字用于设置font-size的属性。使用larger关键字就是使文字变大，使用smaller设置文字大小是使文字变小。5.1.2.2定义文字的相对大小（2）使用相对关键字定义文5.1.2.2

定义文字的绝对大小（1）使用物理长度定义文字大小

使用物理长度定义文字大小，物理长度单位有磅（pt）、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.2.2定义文字的绝对大小（1）使用物理长度定义文字5.1.3

文字颜色

网页上使用不同文字颜色，可以达到美化、优化网页的效果，CSS提供了color属性来设置文字的颜色。Color属性的值可以使用第4章中所讲到的颜色单位来设置，包括颜色名称、RGB色值和十六进制颜色值。5.1.3文字颜色网页上使用不同文字颜色，可以达5.1.4文字粗细

文字的粗细在网页设计中起到分层结构的作用，使网页更容易阅读。在HTML文档中可以用b标签来加粗文字，在XHTML标准文档编写中，CSS提供font-weight属性来设置文字的粗细，可以减少b标签的重复使用，并且是b标签已经加粗的文字变细。

示例5.1.4文字粗细设置5.1.4文字粗细文字的粗细在网页设计中起到分层5.1.6

斜体

斜体文字不是文字的固有字体，是CSS样式对默认文字的倾斜设置，一般用于应用语句等特殊情况，加强网页文本流的层次感.。CSS提供font-style属性用于设置文字的斜体样式，属性包括italich和oblique两个倾斜值。

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。

为三个段落设置不同的字体样式代码如下：

p.normal{font-style:normal;}

p.italic{font-style:italic;}

p.oblique{font-style:oblique;}

示例5.1.5使用font-style属性设置文字的斜体样式5.1.6斜体斜体文字不是文字的固有字体，是CS5.1.6

下划线、顶划线和删除线

下划线、顶画线和删除线，在网页设计中统称为文字的修饰线。一般用于突出网页文字的修饰性和更改设置，例如价格的变更，内容的修改、超链接修饰、关键字的加注等。

CSS提供text-decoration属性来为文本做下划线、顶画线和删除线的设置：属性值包括none、underline、overline、line-through、blink、inherit等。

特别指明的是，inherit规定应该从父元素继承text-decoration属性的值。所以该值通常不用。

文本修饰代码如下：

text-decoration:none;/*默认，定义标准的文本不做修饰*/

text-decoration:underline;/*会对元素加下划线*/

text-decoration:overline;/*会在文本的顶端画一个上划线*/

text-decoration:line-through;/*在文本中间画一个穿线*/

text-decoration:blink;/*会让文本闪烁*/

示例5.1.6下划线、顶画线和删除线装饰文本的样式5.1.6下划线、顶划线和删除线下划线、顶画线和5.1.7

英文字母大小写CSS提供text-transform属性控制英文文本的大小写，值有none、capitalize、uppercase、lowercase、inheri等来设置英文文本字母的大小写。

特别指明的是inherit规定应该从父元素继承text-transform属性的值。所以该值通常不用。代码如下：

text-transform:none/*默认。定义带有小写字母和大写字母的标准的文本。*/

text-transform:capitalize/*文本中的每个单词以大写字母开头。*/

text-transform:uppercase/*定义仅有大写字母。*/

text-transform:lowercase/*定义无大写字母，仅有小写字母。*/

text-transform:inherit/*规定应该从父元素继承text-transform属性的值。*/示例5.1.7使用text-transform属性设置一段英文句子大小写5.1.7英文字母大小写CSS提供text-transfo5.1.8属性的缩写法CSSfont属性是用来控制文字字体、颜色、大小等。而font的属性有多种，在通常情况下，我们用缩写的办法将多种属性概括在一句CSS代码中。这样极大地减小了代码，优化CSS文件。我们常用的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:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-seri。5.1.8属性的缩写法CSSfont属性是用来控制文字字5.1.8属性的缩写法如果对body标签设置font属性样式，不缩写的样式如下：

body{

font-family:"宋体","黑体","楷体_GB2312";/*设置文字字体*/

font-size:18px;/*设置文字字号大小*/

font-style:italic;/*设置文字样式为斜体*/

line-height:200%;/*设置行间距为200%*/

font-weight:bold;/*设置文字样式为加粗*/

font-variant:small-caps;/*设置英文为小型大写字母*/

text-transform:capitalize;/*设置英文为首字母大写*/

text-decoration:underline;/*设置文本装饰下划线*/

color:red;/*设置文本颜色为红色*/

}上述的属性，我们可以概括地写在一行font属性里。需要注意的是，text-decoration和color属性我们需要单独定义。

body{font:italicsmall-capsbold18px/200%"宋体","黑体","楷体_GB2312";text-transform:capitalize;text-decoration:underline;color:red;}5.1.8属性的缩写法如果对body标签设置font属性样5.1.8属性的缩写法示例5.1.8把上述font属性定义给body标签以改变页面内容的文字样式5.1.8属性的缩写法示例5.1.8把上述font属性定义5.1.9

用段落属性改变文字的段落样式

在网页设计中会出现大量段落文本来做内容的详细介绍，而在进行段落文本的排版时都会遇到段落文本的对齐问题，本节内容将详细介绍CSS如何设置段落文本的对齐方式。5.1.9用段落属性改变文字的段落样式在网页设计5.1.9.1

段落的水平对齐方式CSS提供text-align属性设置段落文本的对齐方式，属性值有left、right、center、justify、inherit等，对齐方式及代码如下：

text-align:center/*文本中间对齐。*/

text-align:left/*文本左对齐*/

text-align:right/*文本右对齐*/

text-align:justify/*文本两端对齐*/示例5.1.9.1使用text-align设置段落文本的水平对齐方式，我们选择四段文字，分别以左对齐、右对齐、中间对齐和两端对齐。5.1.9.1段落的水平对齐方式CSS提供text-ali5.1.9.2段落的垂直对齐方式

在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow来设置文字的竖向排列。（1）使用writing-mode属性设置段落文本垂直对齐

属性writing-mode的值有两个，即lr-tb和tb-rl，代码构成和排版如下：

writing-mode:lr-tb/*左-右，上-下（西文横向排版）*/

writing-mode:tb-rl/*上-下，右-左（中文垂直排版）*/

在设置或检索对象的内容块固有的书写方向时。西方语言缺省的是“左-右，上-下”的书写方式。但是亚洲语言常有“上-下，右-左”的书写方式。

当writing-mode属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。示例5.1.9.2使用writing-mode样式设置中文古诗词的垂直对齐排版5.1.9.2段落的垂直对齐方式在网页设计中少5.1.9.2段落的垂直对齐方式

在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow来设置文字的竖向排列。（2）使用layout-flow属性设置段落文本的垂直对齐属性layout-flow的属性值有两个horizontal和vertical-ideographic。

代码构成和排版如下：

layout-flow:horizontal;/*自左边流入，下一行在前一行下面*/

layout-flow:vertical-ideographic;/*自上而下流入，下一行在前一行左面*/

horizontal:对象中的内容自左边流入，下一行在前一行下面。这个值适于拉丁语系。

vertical-ideographic:对象中的内容自上而下流入，下一行在前一行左面，这个值适于亚洲语系。

在设置或检索对象内文本的流动和方向时。当layout-flow属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。

示例5.1.9.2.2使用layout-flow样式设置中文古诗词的垂直对齐5.1.9.2段落的垂直对齐方式在网页设计中少5.1.9.3

首行缩进段落文本在正规的行文格式中，首行是要做缩进处理，以分清段落方便阅读。CSS提供了text-indent属性来设置段落文本的首行缩进。text-indent属性可以应用于中文，同样也可以应用于英文，text-indent的值是数字，单位是像素或百分比。示例5.1.9.3使用text-indent:属性来为两段文字的首行做缩进设置5.1.9.3首行缩进段落文本在正规的行文格式中，首行是要5.1.9.4行间距与字间距

行间距：即段落文本中每行之间间距。字间距：即段落文本中每个汉字或英文单词之间的距离。（1）行间距

CSS提供了line-height属性来设置段落文本的行间距，line-height与font-size的计算值之差（在CSS中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

文本的行间距可以使用长度单位px设置行间距的值，也可以使用相对单位设置行间距的值，如果不设置就是浏览器的normal默认值。

示例5.1.9.4使用属性line-height设置三段文字的行间距5.1.9.4行间距与字间距行间距：即段落文本5.1.9.4行间距与字间距（2）字间距

CSS提供letter-spacing属性设置中文字间距，letter-spacing属性可以增加或减少字符间的空白，即字符间距，也就是字间距。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整中文字之间通常的间隔。因此，normal就相当于值为0。

同时CSS还提供了word-spacing属性设置英文单词的间距。

示例5.1.9.4.3.使用letter-spacing和word-spacing分别设置中文和英文的字符间距5.1.9.4行间距与字间距（2）字间距

CSS提供let5.2上机指导5.2.1上机指导案例：对一首宋词作文本的简单排版5.2上机指导5.2.1上机指导案例：对一首宋词作文本的简5.2上机指导5.2.2上机指导案例：设置中英文段落文本字间距5.2上机指导5.2.2上机指导案例：设置中英文段落文本字5.3 应知训练一、填空题（1）CSS提供了color属性来设置文字的颜色。（2）CSS提供font-weight属性来设置文字的粗细。（3）font-style属性包括italich和oblique两个倾斜值。（4）CSS提供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等。5.3 应知训练一、填空题（3）定义文字相对大小的关键字有哪些？并按从小到大的顺序列出来。()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-decoration:blink在什么浏览器下可显示，在什么浏览器下不可显示？()A. text-decoration:blink在火狐Firefox浏览器下可以显示，在IE下不可显示。B. text-decoration:blink在IE下可以显示，在Firefox浏览器下不可显示。C. text-decoration:blink在Firefox浏览器下可以显示，在IE下也可显示。（3）定义文字相对大小的关键字有哪些？并按从小到大的顺序列三、判断题：（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.1技能提升案例：运用所学习得文本CS5.4技能提升5.4.2技能提升案例：对一段论语做排版。5.4技能提升5.4.2技能提升案例：对一段论语做排版。第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控制段落的对齐方式。（6）如何熟练运用CSS控制行间距与字间距。第5章用CSS控制文本样式 内容介绍5.1理论解说所谓文本，就是我们在网页设计中XHTML文档中包含的大量的文字信息，这里只由文字构成的网页元素如font、p等都称之为文本。网页设计中.的图文编排，就涉及到大量的文字排版。CSS样式提供了丰富的属性设置来控制文本样式或段落样式。本章将详细介绍用CSS控制网页中的文字或段落等文本样式。5.1理论解说所谓文本，就是我们在网页设计中XHTML5.1.1字体

网页设计中，设计师说要用到的是设计师当时用的计算机上的字体，当然也可以像印刷品那样使用很多本地计算机上的字体，但是要注意了，网页的使用时网上传输浏览的，网页中使用的字体在计算机上浏览时，字体调用的就是浏览者本地计算机的字体，如果浏览者本地计算机上没有安装网页设计师设计网页时指定的文字字体，那么文本流就会按浏览器默认的字体展现，那么网页设计师指定的字体就失去意义。

CSS样式设置文本流字体的属性是font-family，使用font-family设置网页文字字体的代码如：

font-family：Arial；

以上为设置文字字体为Arial的代码示例。

示例5.1.1.1也可以给文本设置多重文字字体，用于用户计算机筛选，比如设置代码：

font-family：宋体,黑体,楷体；/*设置中文字体*/

font-family：Arial,”TimesNewRoman”,Times,Serif;/*设置英文字体*/

5.1.1字体网页设计中，设计师说要用到的是设计5.1.1字体

示例5.1.1.1在CSS文字字体属性font-family里设置的文字字体名称，以英文逗号间隔，最后一个字体名称后跟英文分号结尾，罗列的字体名字按先后顺序在网页浏览用户计算机字体库中作筛选，第一个字体用户的计算机有则按第一个显示，若没有看第二个，第二个没有则带三个，直至最后一个罗列的字体名称，若都没有则按用户计算机浏览器默认显示。中文英文字体都按此先后顺序筛选显示。

5.1.1字体示例5.1.1.1在CSS文字字体属性fo5.1.2

文字大小概述在网页设计中，安排分类文字信息的重要程度，往往会用字号的大小来做区分，通常标题等重要的文字会用大一号的字号设置，内容等成段落的文字内容，则会用标准小字号来设置。文字的默认大小是由用户的浏览器来默认设置的，不同的浏览器默认值也不尽相同；在IE6、IE7和火狐浏览器中，网页的默认文字大小为16像素。在CSS样式设置中，font-size属性是来设置文字的大小，若不设置则按浏览器默认设置显示。5.1.2文字大小概述在网页设计中，安排分类文字信息的重要5.1.2.1

设置文字大小CSS样式提供font-size属性来设置文本流的字号大小，用font-size来设置文本大小，语法如下：

font-size：12px；

在此font-size的值为12px大小，值除了使用像素外，还可以使用长度、百分比和关键字等。

示例5.1.2.1使用不同单位设置文字大小：

font-size:12px;/*像素单位设置文字大小*/

font-size:1em;/*em单位设置文字大小*/

font-size12in;/*英寸单位设置文字大小*/

font-size:120%/*百分比单位设置文字大小*/

font-size:large/*关键字设置文字大小*/

以上的设置文字大小的单位按第4章介绍的单位分为相对大小或绝对大小两种设置方法。5.1.2.1设置文字大小CSS样式提供font5.1.2.2

定义文字的相对大小

使用相对单位定义文字的大小，属性值可以使用相对长度单位和相对关键字定义文字大小。（1）文字的相对单位，有像素（px）、em、百分比（%）等。像素是相对于电脑屏幕分辨率而言，设置为像素大小，文字不会继承父元素的文字大小。em服从文档继承关系的相对单位，em会继承父元素的文字大小。关于px和em的概念参见第4章内容。示例5.1.2.2.1使用em、px和百分比设置文字大小进行比较5.1.2.2定义文字的相对大小使用相对单位定义5.1.2.2

定义文字的相对大小（2）使用相对关键字定义文字大小使用相对单位定义文字的大小除了px、em和百分比之外，还有使用相对关键字来设置文字的大小，CSS样式中提供了larger和smaller关键字用于设置font-size的属性。使用larger关键字就是使文字变大，使用smaller设置文字大小是使文字变小。5.1.2.2定义文字的相对大小（2）使用相对关键字定义文5.1.2.2

定义文字的绝对大小（1）使用物理长度定义文字大小

使用物理长度定义文字大小，物理长度单位有磅（pt）、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.2.2定义文字的绝对大小（1）使用物理长度定义文字5.1.3

文字颜色

网页上使用不同文字颜色，可以达到美化、优化网页的效果，CSS提供了color属性来设置文字的颜色。Color属性的值可以使用第4章中所讲到的颜色单位来设置，包括颜色名称、RGB色值和十六进制颜色值。5.1.3文字颜色网页上使用不同文字颜色，可以达5.1.4文字粗细

文字的粗细在网页设计中起到分层结构的作用，使网页更容易阅读。在HTML文档中可以用b标签来加粗文字，在XHTML标准文档编写中，CSS提供font-weight属性来设置文字的粗细，可以减少b标签的重复使用，并且是b标签已经加粗的文字变细。

示例5.1.4文字粗细设置5.1.4文字粗细文字的粗细在网页设计中起到分层5.1.6

斜体

斜体文字不是文字的固有字体，是CSS样式对默认文字的倾斜设置，一般用于应用语句等特殊情况，加强网页文本流的层次感.。CSS提供font-style属性用于设置文字的斜体样式，属性包括italich和oblique两个倾斜值。

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。

为三个段落设置不同的字体样式代码如下：

p.normal{font-style:normal;}

p.italic{font-style:italic;}

p.oblique{font-style:oblique;}

示例5.1.5使用font-style属性设置文字的斜体样式5.1.6斜体斜体文字不是文字的固有字体，是CS5.1.6

下划线、顶划线和删除线

下划线、顶画线和删除线，在网页设计中统称为文字的修饰线。一般用于突出网页文字的修饰性和更改设置，例如价格的变更，内容的修改、超链接修饰、关键字的加注等。

CSS提供text-decoration属性来为文本做下划线、顶画线和删除线的设置：属性值包括none、underline、overline、line-through、blink、inherit等。

特别指明的是，inherit规定应该从父元素继承text-decoration属性的值。所以该值通常不用。

文本修饰代码如下：

text-decoration:none;/*默认，定义标准的文本不做修饰*/

text-decoration:underline;/*会对元素加下划线*/

text-decoration:overline;/*会在文本的顶端画一个上划线*/

text-decoration:line-through;/*在文本中间画一个穿线*/

text-decoration:blink;/*会让文本闪烁*/

示例5.1.6下划线、顶画线和删除线装饰文本的样式5.1.6下划线、顶划线和删除线下划线、顶画线和5.1.7

英文字母大小写CSS提供text-transform属性控制英文文本的大小写，值有none、capitalize、uppercase、lowercase、inheri等来设置英文文本字母的大小写。

特别指明的是inherit规定应该从父元素继承text-transform属性的值。所以该值通常不用。代码如下：

text-transform:none/*默认。定义带有小写字母和大写字母的标准的文本。*/

text-transform:capitalize/*文本中的每个单词以大写字母开头。*/

text-transform:uppercase/*定义仅有大写字母。*/

text-transform:lowercase/*定义无大写字母，仅有小写字母。*/

text-transform:inherit/*规定应该从父元素继承text-transform属性的值。*/示例5.1.7使用text-transform属性设置一段英文句子大小写5.1.7英文字母大小写CSS提供text-transfo5.1.8属性的缩写法CSSfont属性是用来控制文字字体、颜色、大小等。而font的属性有多种，在通常情况下，我们用缩写的办法将多种属性概括在一句CSS代码中。这样极大地减小了代码，优化CSS文件。我们常用的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:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-seri。5.1.8属性的缩写法CSSfont属性是用来控制文字字5.1.8属性的缩写法如果对body标签设置font属性样式，不缩写的样式如下：

body{

font-family:"宋体","黑体","楷体_GB2312";/*设置文字字体*/

font-size:18px;/*设置文字字号大小*/

font-style:italic;/*设置文字样式为斜体*/

line-height:200%;/*设置行间距为200%*/

font-weight:bold;/*设置文字样式为加粗*/

font-variant:small-caps;/*设置英文为小型大写字母*/

text-transform:capitalize;/*设置英文为首字母大写*/

text-decoration:underline;/*设置文本装饰下划线*/

color:red;/*设置文本颜色为红色*/

}上述的属性，我们可以概括地写在一行font属性里。需要注意的是，text-decoration和color属性我们需要单独定义。

body{font:italicsmall-capsbold18px/200%"宋体","黑体","楷体_GB2312";text-transform:capitalize;text-decoration:underline;color:red;}5.1.8属性的缩写法如果对body标签设置font属性样5.1.8属性的缩写法示例5.1.8把上述font属性定义给body标签以改变页面内容的文字样式5.1.8属性的缩写法示例5.1.8把上述font属性定义5.1.9

用段落属性改变文字的段落样式

在网页设计中会出现大量段落文本来做内容的详细介绍，而在进行段落文本的排版时都会遇到段落文本的对齐问题，本节内容将详细介绍CSS如何设置段落文本的对齐方式。5.1.9用段落属性改变文字的段落样式在网页设计5.1.9.1

段落的水平对齐方式CSS提供text-align属性设置段落文本的对齐方式，属性值有left、right、center、justify、inherit等，对齐方式及代码如下：

text-align:center/*文本中间对齐。*/

text-align:left/*文本左对齐*/

text-align:right/*文本右对齐*/

text-align:justify/*文本两端对齐*/示例5.1.9.1使用text-align设置段落文本的水平对齐方式，我们选择四段文字，分别以左对齐、右对齐、中间对齐和两端对齐。5.1.9.1段落的水平对齐方式CSS提供text-ali5.1.9.2段落的垂直对齐方式

在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow来设置文字的竖向排列。（1）使用writing-mode属性设置段落文本垂直对齐

属性writing-mode的值有两个，即lr-tb和tb-rl，代码构成和排版如下：

writing-mode:lr-tb/*左-右，上-下（西文横向排版）*/

writing-mode:tb-rl/*上-下，右-左（中文垂直排版）*/

在设置或检索对象的内容块固有的书写方向时。西方语言缺省的是“左-右，上-下”的书写方式。但是亚洲语言常有“上-下，右-左”的书写方式。

当writing-mode属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。示例5.1.9.2使用writing-mode样式设置中文古诗词的垂直对齐排版5.1.9.2段落的垂直对齐方式在网页设计中少5.1.9.2段落的垂直对齐方式

在网页设计中少数情况下会遇到段落文本的竖向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow来设置文字的竖向排列。（2）使用layout-flow属性设置段落文本的垂直对齐属性layout-flow的属性值有两个horizontal和vertical-ideographic。

代码构成和排版如下：

layout-flow:horizontal;/*自左边流入，下一行在前一行下面*/

layout-flow:vertical-ideographic;/*自上而下流入，下一行在前一行左面*/

horizontal:对象中的内容自左边流入，下一行在前一行下面。这个值适于拉丁语系。

vertical-ideographic:对象中的内容自上而下流入，下一行在前一行左面，这个值适于亚洲语系。

在设置或检索对象内文本的流动和方向时。当layout-flow属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。

示例5.1.9.2.2使用layout-flow样式设置中文古诗词的垂直对齐5.1.9.2段落的垂直对齐方式在网页设计中少5.1.9.3

首行缩进段落文本在正规的行文格式中，首行是要做缩进处理，以分清段落方便阅读。CSS提供了text-indent属性来设置段落文本的首行缩进。text-indent属性可以应用于中文，同样也可以应用于英文，text-indent的值是数字，单位是像素或百分比。示例5.1.9.3使用text-indent:属性来为两段文字的首行做缩进设置5.1.9.3首行缩进段落文本在正规的行文格式中，首行是要5.1.9.4行间距与字间距

行间距：即段落文本中每行之间间距。字间距：即段落文本中每个汉字或英文单词之间的距离。（1）行间距

CSS提供了line-height属性来设置段落文本的行间距，line-height与font-size的计算值之差（在CSS中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

文本的行间距可以使用长度单位px设置行间距的值，也可以使用相对单位设置行间距的值，如果不设置就是浏览器的normal默认值。

示例5.1.9.4使用属性line-height设置三段文字的行间距5.1.9.4行间距与字间距行间距：即段落文本5.1.9.4行间距与字间距（2）字间距

CSS提供letter-spacing属性设