第10章 文字与背景设置

《第10章 文字与背景设置》由会员分享，可在线阅读，更多相关《第10章 文字与背景设置（21页珍藏版）》请在文档大全上搜索。

1、在制作网站页面时，可以通过CSS控制文字样式，对文字的字体、大小、颜色、粗细、斜体、下画线、顶画线和删除线等属性进行设置。使用CSS控制文字样式的最大好处是，可以同时为多段文字赋予同一CSS样式，在修改时只需修改某一个CSS样式，即可同时修改应用该CSS样式的所有文字。10.1.1font-family属性属性字体字体在HTML中提供了字体样式设置的功能，在HTML语言中文字样式是通过来设置的，而在CSS样式中则是通过font-family属性来进行设置的。font-family属性的语法格式如下。font-family: name1,name2,name3;10.1.2font-size属性

2、属性字体大小字体大小在网页应用中，字体大小的区别可以起到突出网站主题的作用。字体大小可以是相对大小也可以是绝对大小。在CSS样式中，可以通过设置font-size属性来控制字体的大小。font-size属性的基本语法如下。font-size: 字体大小;在设置字体大小时，可以使用绝对大小单位也可以使用相对大小单位。10.1.3color属性属性字体颜色字体颜色在HTML页面中，通常在页面的标题部分或者需要浏览者注意的部分使用不同的颜色，使其与其他文字有所区别，从而能够吸引浏览者的注意。在CSS样式中，文字的颜色是通过color属性进行设置的。color属性的基本语法如下。color: 颜色值;

3、实战练习实战练习设置网页文字基本效果设置网页文字基本效果10.1.4 font-weight属性属性字体粗细字体粗细在HTML页面中，将字体加粗或是变细是吸引浏览者注意的另一种方式，同时还可以使网页的表现形式更多多样。在CSS样式中通过font-weight属性对字体的粗细进行控制。定义字体粗细font-weight属性的基本语法如下。font-weight: normal | bold | bolder | lighter | inherit | 100900;最终文件：光盘最终文件第10章10-1-3.html视频：光盘视频第10章10-1-3.swf10.1.5 font-style属性

4、属性字体样式字体样式所谓字体样式，也就是平常所说的字体风格，在Dreamweaver中有3种不同的字体样式，分别是正常、斜体和偏斜体。在CSS中，字体的样式是通过font-style属性进行定义的。定义字体样式font-style属性的基本语法如下。font-style: normal | italic | oblique;实战实战练习练习设置网页文字的加粗和倾斜效果设置网页文字的加粗和倾斜效果10.1.6 text-transform属性属性英文字体大小写英文字体大小写text-transform属性可以实现转换页面中英文字体的大小写格式，是非常实用的功能之一。text-transform属

5、性的基本语法如下。text-transform: capitalize | uppercase | lowercase;实战练习实战练习设置网页中英文字体大小写设置网页中英文字体大小写最终文件：光盘最终文件第10章10-1-5.html视频：光盘视频第10章10-1-5.swf最终文件：光盘最终文件第10章10-1-6.html视频：光盘视频第10章10-1-6.swf10.1.7text-decoration属性属性文字修饰文字修饰在网站页面的设计中，为文字添加下画线、顶画线和删除线是美化和装饰网页的一种方法。在CSS样式中，可以通过text-decoration属性来实现这些效果。text

6、-decoration属性的基本语法如下。text-decoration: underline | overline | line-through;实战实战练习练习为网页文字添加修饰为网页文字添加修饰10.1.8letter-spacing属性属性字符间距字符间距在CSS样式中，字间距的控制是通过letter-spacing属性来进行调整的，该属性既可以设置相对数值，也可以设置绝对数值，但在大多数情况下使用相对数值进行设置。letter-spacing属性的语法格式如下。letter-spacing: 字符间距;实战练习实战练习设置中文字符间距设置中文字符间距最终文件：光盘最终文件第10章10

7、-1-7.html视频：光盘视频第10章10-1-7.swf最终文件：光盘最终文件第10章10-1-8.html视频：光盘视频第10章10-1-8.swf在设计网页时，CSS样式可以控制字体样式，同时也可以控制字间距和段落样式。在一般情况下，设置字体样式只能对少数文字起作用，对于文字段落来说，还是需要通过设置段落样式来加以控制。10.2.1line-height属性属性行间距行间距在CSS中，可以通过line-height属性对段落的行间距进行设置。line-height的值表示的是两行文字基线之间的距离，既可以设置相对数值，也可以设置绝对数值。line-height属性的基本语法格式如下。l

8、ine-height: 行间距;10.2.2text-indent属性属性段落首段落首行缩进行缩进段落首行缩进是对一个段落第1行文字缩进两个字符进行显示。在CSS样式中是通过text-indent属性进行设置的。text-indent属性的基本语法如下。text-indent: 首行缩进量;实战练习实战练习美化网页中的段落文本美化网页中的段落文本最终文件：光盘最终文件第10章10-2-2.html视频：光盘视频第10章10-2-2.swf10.2.3 text-align属性属性文本水文本水平对齐平对齐在CSS样式中，段落的水平对齐是通过text-align属性进行控制的，水平对齐有4种方式，

9、分别为左对齐、水平居中对齐、右对齐和两端对齐。text-align属性的基本语法如下。text-align: left | center | right | justify;实战实战练习练习设置文本水平设置文本水平对齐对齐10.2.4 vertical-align属性属性文文本垂直对齐本垂直对齐在CSS样式中，文本垂直对齐是通过vertical-align属性进行设置的，常见的文本垂直对齐方式有3种，分别为顶端对齐、垂直居中对齐和底端对齐。vertical-align属性的语法格式如下。vertical-align: baseline | sub | super | top | text-to

10、p | middle | bottom | text-bottom | length; 实战实战练习练习设置文本垂直对齐设置文本垂直对齐最终文件：光盘最终文件第10章10-2-3.html视频：光盘视频第10章10-2-3.swf最终文件：光盘最终文件第10章10-2-4.html视频：光盘视频第10章10-2-4.swf对于网页而言，文字永远都是不可缺少的重要元素，文字也是传递信息的主要手段。在CSS 3.0中新增加了几种有关网页文字控制的新增属性，下面分别对这几种新增的文字控制属性进行介绍。 10.3.1text-overflow 属性属性文本溢出处理文本溢出处理text-overflow

11、属性用于设置是否使用一个省略标记（）标示对象内文本的溢出。text-overflow属性仅是注解，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还需要定义：强制文本在一行内显示（white-space: nowrap）及溢出内容为隐藏（overflow: hidden），只有这样才能实现溢出文本显示省略号的效果。text-overflow属性的语法格式如下。text-overflow: clip | ellipsis;实战实战练习练习控制文本溢出效果控制文本溢出效果最终文件：光盘最终文件第10章10-3-1.html视频：光盘视频第10章10-3-1.s