HTML+CSS+Javascript网站制作案例教程第8章 设置文本的CSS属性.pptVIP

8.1.1　字体font-family 属性 在HTML中提供了字体样式设置的功能，在HTML语言中文字样式是通过font face=“字体名称”来设置的，而在CSS样式中则是通过font-family属性来进行设置的。 8.1.2　字体大小font-size 属性 在网页应用中，字体大小的区别可以起到突出网站主题的作用。字体大小可以是相对大小也可以是绝对大小。在CSS样式中，可以通过设置font-size 属性来控制字体的大小。 8.1.3　字体颜色color 属性 在HTML页面中，通常在页面的标题部分或者需要浏览者注意的部分使用不同的颜色，使其与其他文字有所区别，从而能够吸引浏览者的注意。在CSS 样式中，文字的颜色是通过color属性进行设置的。 课堂案例——定义网页中文字 课堂案例：定义网页中文字 最终文件：光盘\最终文件\第8章\8-1-3.html 视频：光盘\视频\第8章\8-1-3.swf 8.1.5　字体样式font-style 属性 所谓字体样式，也就是平常所说的字体风格，在Dreamweaver中有3种不同的字体样式，分别是正常、斜体和偏斜体。在CSS中，字体的样式是通过font-style属性进行定义的。 8.1.4　字体粗细font-weight 属性 在HTML页面中，将字体加粗或变细是吸引浏览者注意的另一种方式，同时还可以使网页的表现形式更多样。在CSS样式中通过font-weight属性对字体的粗细进行控制。 8.1.6　英文字体大小写text-transform 属性 英文字体大小写转换是CSS提供的非常实用的功能之一，其主要通过设置英文段落的text-transform属性来定义。 课堂案例——设置网页中文字的加粗和倾斜样式 课堂案例：设置网页中文字的加粗和倾斜样式 最终文件：光盘\最终文件\第8章\8-1-5.html 视频：光盘\视频\第8章\8-1-5.swf 8.1.7　文字修饰text-decoration 属性 在网站页面的设计中，为文字添加下画线、顶画线和删除线是美化和装饰网页的一种方法。在CSS样式中，可以通过text-decoration属性来实现这些效果。 课堂案例——定义网页中英文字母大小写 课堂案例：定义网页中英文字母大小写 最终文件：光盘\最终文件\第8章\8-1-6.html 视频：光盘\视频\第8章\8-1-6.swf 课堂案例——为网页中的文字添加下画线、顶画线和删除线效果 课堂案例：为网页中的文字添加下画线、顶画线和删除线效果 最终文件：光盘\最终文件\第8章\8-1-7.html 视频：光盘\视频\第8章\8-1-7.swf 在设计网页时，CSS样式可以控制字体样式，同时也可以控制字间距和段落样式。但在大多数情况下，文字样式只能对少数文字起作用，对于段落文字来说，还需要通过专门的段落样式进行控制。 8.2.1　字间距word-spacing 属性 在CSS样式中，字间距的控制是通过letter-spacing属性来进行调整的，该属性既可以设置相对数值，也可以设置绝对数值，但在大多数情况下使用相对数值进行设置。 8.2.2　行间距line-height 属性 在CSS中，可以通过line-height属性对段落的行间距进行设置。line-height的值表示的是两行文字基线之间的距离，既可以设置相对数值，也可以设置绝对数值。 通常在静态页面中，字体的大小使用的是绝对数值，从而达到页面整体的统一，但在一些论坛或者博客等用户可以自由定义字体大小的网页中，使用的则是相对数值，从而便于用户通过设置字体大小来改变相应行距。 课堂案例——设置段落文本字间距 课堂案例：设置段落文本字间距 最终文件：光盘\最终文件\第8章\8-2-1.html 视频：光盘\视频\第8章\8-2-1.swf 8.2.3　段落首字下沉 首字下沉也称首字放大，一般应用在报纸、杂志或者网页上的一些文章中，开篇的第一个字都会使用首字下沉的效果进行排版，以此来吸引浏览者的目光。在CSS样式中，首字下沉是通过对段落中的第一个文字单独设置CSS 样式来实现的。 课堂案例——设置网页中的文本行间距 课堂案例：设置网页中的文本行间距 最终文件：光盘\最终文件\第8章\8-2-2.html 视频：光盘\视频\第8章\8-2-2.swf 8.2.4　段落首行缩进text-indent 属性 段落首行缩进在一些文章开头通常都会用到。段落首行缩进是对一个段落的第1行文字缩进两个字符进行显示。在CSS样式中，是通过text-indent属性进行设置的。 课堂案例——在网页中实现段落文字首字下沉 课堂案例：在网页中实现段落文字首字下沉 最终文件：光盘\最终文件\第8章\8-2-3.html 视频：光盘\视频\第8章\8