第10章 文字与背景设置.ppt

在制作网站页面时，可以通过CSS控制文字样式，对文字的字体、大小、颜色、粗细、斜体、下画线、顶画线和删除线等属性进行设置。使用CSS控制文字样式的最大好处是，可以同时为多段文字赋予同一CSS样式，在修改时只需修改某一个CSS样式，即可同时修改应用该CSS样式的所有文字。 10.1.1　font-family属性——字体 在HTML中提供了字体样式设置的功能，在HTML语言中文字样式是通过font face=”字体名称”来设置的，而在CSS样式中则是通过font-family属性来进行设置的。font-family属性的语法格式如下。 font-family: name1,name2,name3…; 10.1.2　font-size属性——字体大小 在网页应用中，字体大小的区别可以起到突出网站主题的作用。字体大小可以是相对大小也可以是绝对大小。在CSS样式中，可以通过设置font-size属性来控制字体的大小。font-size属性的基本语法如下。 font-size: 字体大小; 在设置字体大小时，可以使用绝对大小单位也可以使用相对大小单位。 10.1.3　color属性——字体颜色 在HTML页面中，通常在页面的标题部分或者需要浏览者注意的部分使用不同的颜色，使其与其他文字有所区别，从而能够吸引浏览者的注意。在CSS样式中，文字的颜色是通过color属性进行设置的。color属性的基本语法如下。 color: 颜色值; 实战练习——设置网页文字基本效果 10.1.4　 font-weight属性——字体粗细 在HTML页面中，将字体加粗或是变细是吸引浏览者注意的另一种方式，同时还可以使网页的表现形式更多多样。在CSS样式中通过font-weight属性对字体的粗细进行控制。定义字体粗细font-weight属性的基本语法如下。 font-weight: normal | bold | bolder | lighter | inherit | 100~900; 最终文件：光盘\最终文件\第10章\10-1-3.html 视频：光盘\视频\第10章\10-1-3.swf 10.1.5　 font-style属性——字体样式 所谓字体样式，也就是平常所说的字体风格，在Dreamweaver中有3种不同的字体样式，分别是正常、斜体和偏斜体。在CSS中，字体的样式是通过font-style属性进行定义的。定义字体样式font-style属性的基本语法如下。 font-style: normal | italic | oblique; 实战练习——设置网页文字的加粗和倾斜效果 10.1.6　 text-transform属性——英文字体大小写 text-transform属性可以实现转换页面中英文字体的大小写格式，是非常实用的功能之一。text-transform属性的基本语法如下。 text-transform: capitalize | uppercase | lowercase; 实战练习——设置网页中英文字体大小写 最终文件：光盘\最终文件\第10章\10-1-5.html 视频：光盘\视频\第10章\10-1-5.swf 最终文件：光盘\最终文件\第10章\10-1-6.html 视频：光盘\视频\第10章\10-1-6.swf 10.1.7　text-decoration属性——文字修饰 在网站页面的设计中，为文字添加下画线、顶画线和删除线是美化和装饰网页的一种方法。在CSS样式中，可以通过text-decoration属性来实现这些效果。text-decoration属性的基本语法如下。 text-decoration: underline | overline | line-through; 实战练习——为网页文字添加修饰 10.1.8　letter-spacing属性——字符间距 在CSS样式中，字间距的控制是通过letter-spacing属性来进行调整的，该属性既可以设置相对数值，也可以设置绝对数值，但在大多数情况下使用相对数值进行设置。letter-spacing属性的语法格式如下。 letter-spacing: 字符间距; 实战练习——设置中文字符间距 最终文件：光盘\最终文件\第10章\10-1-7.html 视频：光盘\视频\第10章\10-1-7.swf 最终文件：光盘\最终文件\第10章\10-1-8.html 视频：光盘\视频\第10章\10-1-8.swf 在设计网页时，CSS样式可以控制字体样式，同时也可以控制字间距和段落样式。在一般情况下，设置字体样式只能对少数文字起作用，对于文字段落来说，还是需要通过设置段落样式来加以控制。 10.2.1　line-height属性——行间距 在