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

《第5章用CSS控制文本样式ppt课件.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）如

2、何熟练运用CSS控制段落的对齐方式。（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：宋体,黑体,楷体；/*设置中文字体*/

4、font-family：Arial,”TimesNewRoman”,Times,Serif;/*设置英文字体*/5.1.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-si

6、ze的值为12px大小，值除了使用像素外，还可以使用长度、百分比和关键字等。示例5.1.2.1使用不同单位设置文字大小：font-size:12px;/*像素单位设置文字大小*/font-size:1em;/*em单位设置文字大小*/font-size12in;/*英寸单位设置文字大小*/font-size:120%/*百分比单位设置文字大小*/font-size:large/*关键字设置文字大小*/以上的设置文字大小的单位按第4章介绍的单位分为相对大小或绝对大小两种设置方法。5.1.2.2定义文字的相对大小使用相对单位定义文字的

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

8、aller关键字用于设置font-size的属性。使用larger关键字就是使文字变大，使用smaller设置文字大小是使文字变小。5.1.2.2定义文字的绝对大小（1）使用物理