HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第9章 设置文字和文本样式.ppt

《HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第9章 设置文字和文本样式.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章设置文字和文本样式在CSS样式中，最基本的属性是用来设置文字和文本的样式。“文字”指的是单个文字或单词，“文本”指的是由文字组成的内容。为字体设置样式主要是设置字、词的样式，对文本设置样式主要是对整段文章设置样式。9.1设置文字样式CSS中对文字样式的设计有文字字体的设置、文字大小、文字粗体、文字斜体以及字间距等样式的设置。9.1.1字体设置在HTML里可以使用来设置文字字体，而在CSS中设置字体所用到的属性是font-family，其语法代码如下：font-family:"字体1","字体2","字体3"

2、,……9.1.2文字大小设置文字大小是指为页面中的文字设置绝对大小或相对高度。相对高度是指文字相对于父对象文字尺寸来设置的，包括larger和samller，它使用成比例的em单位计算。绝对高度是设置的是固定的大小，包括xx-small、x-samll、larger等。9.1.2文字大小除了使用英文单词表示文字大小之外，还有一种文字大小的设置方式是使用具体的长度值或百分比。下表显示了在CSS样式表中设置文字大小的属性值、含义以及规则。9.1.2文字大小使用CSS样式设置文字大小的语法是：font-size:文字的大小9.1.3设置粗体在页面中经

3、常会使用加粗的字体表示强调，但是在HTML标记中加粗的程度只有一种，通过CSS样式可以为文字设置不同程度的加粗效果，其语法是：font-weight:字体的粗度在这里，字体的粗度可以使用数值表示，也可以使用英文单词表示，其具体的取值及含义如下表所示。9.1.4设置文字颜色CSS样式表中设置文字颜色的属性是color，其语法是：color:颜色代码/颜色名称9.1.5设置斜体在CSS样式表中，也可以将文字设置为斜体显示，而且倾斜的程度有两种，即倾斜字体和偏斜体。其设置语法是：font-style:normal/italic/oblique在这里，

4、font-style可以取normal（正常字体）、italic（倾斜）和oblique（偏斜体）三种。9.1.5综合设置前面介绍的几种属性都是以font开始的，这表示这几种属性都属于同一类别，都是用来设置文字的字体效果的。在CSS样式表中，还可以很方便地设置字体属性，即直接使用font属性进行设置，其语法是：font:字体属性取值；9.2设置文本样式文本样式的设置是对一段文字整体进行设置。文本样式的设置包括设置阴影效果、大小写转换、文本缩进、文本对齐方式等。9.2.1设置阴影效果CSS2中允许设置文字的阴影，让文字看起来更有立体感。设置阴影所

5、用到的属性为text-shadow，其语法代码为。text-shadow:none

6、color

7、length

8、length

9、length

10、inherit9.2.1设置阴影效果CSS中的阴影有3个length要进行设置，第1个方向是水平方向的距离，可以为负值；第2个方向是垂直方向的距离，可以为负值；第3个方向为模糊半径的长度，不能为负值。如以下代码：.e{text-shadow:black0px0px5px;}以下代码为文字设置了阴影，并且阴影在文字的右下方，但是该代码并没有指定阴影的颜色，因此阴影的颜色与文字本身颜色相同。.e{text-sha

11、dow:5px5px5px;}模糊半径也可以省略，如果不指定模糊半径，则阴影不存在模糊效果，如以下代码：.e{text-shadow:5px5px;}阴影还以为设置多组效果，每组效果之间用逗号分隔开来，如以下代码：.e{text-shadow:black0px0px5px,0px0px10pxorange,red5px-5px;}9.2.2大小写转换在CSS里处理大小写都是通过text-transform属性完成的，其语法代码为。text-transform:capitalize

12、uppercase

13、lowercase

14、none

15、inherit

16、9.2.3文本缩进在没有使用CSS之前，一段文字的首行缩进都是使用空格来实现的。在有了CSS之后，网页开发者就不再需要在每个段落之前都加上两个空格了。使用CSS中的text-indent属性可以轻易达到缩进的目的。text-indent属性的语法代码如下：text-indent:length

17、百分数

18、inherit9.2.4文本的水平对齐方式使用text-align属性可以在CSS样式表中设置文本的水平对齐属性，包括左对齐、右对齐、居中对齐和两端对齐，其设置语法是：text-align:left/right/center/justify9.2.

19、5文本的垂直对齐方式文本垂直对齐属性vertical-align相当于HTML中的垂直对齐标记。它用于设置文本和其他元素（一般是上一级元素或者同行的其