第3章CSS文字样式设计与速成.PDFVIP

第3 章 CSS 文字样式设计与速成 文字是一个页面内容的灵魂，因为大多数的页面都是通过文字传达信息的，所以对文 字的渲染可以起到对页面更好的修饰作用，而好的文字渲染既可给人带来感官享受，也可 使人阅读得更舒服更清晰。 在这一章将开始学习如何控制文字的样式，其中包括Web 编程的一些主要概念。通过 这章的知识点以及实例的分析，使得对CSS 标签如何控制文字样式有一定的认识，从而达 到能够排列出丰富的CSS 文字效果的目的。 3.1 CSS 3 文字样式 在这一节学习如何为文字添加 CSS 样式，包括 CSS 的一些常用的文字设置。例如， 文字的字体、文字的大小、文字的类型、文字的粗细、文字的颜色、链接的样式、文字的 布局以及文字的阴影等。另外，还将学习CSS 3 新增的文字样式的控制方法。 3.1.1 字体 CSS 提供font-family 属性来控制文字的字体类型，通常使用的汉字字体有宋体、黑体 和楷体等，通常使用的外文字体有Arial 和Times New Roman 等。 如表3.1 所示是Dreamweaver 默认的font-family 属性的字体集合。 表3.1 默认的font-family属性的字体集合列表 Dreamweaver默认的font-family属性的字体 宋体 新宋体 Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace Georgia, Times New Roman, Times, serif Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif 黑体 楷体_GB2312 仿宋_GB2312 从上面的表格可以看到，其中有的属性使用了逗号隔开，其意思为：当浏览器没有第 一个字体库时，会使用下一个备选的字体库。例如，如果font-family 属性设置为：Times New 第1 篇 DIV+CSS 布局速成 Roman,Times,serif，则浏览器会寻找第一个存在的字体库。 除此以外，Dreamweaver 还提供其他的字体属性，可以通过“编辑字体列表”设置框 来增加或者删除默认的字体属性。如图3.1 所示即为软件“编辑字体列表”的界面。 图3.1 编辑字体列表 下面是一个设置文字字体的简单示例，通过本示例，可以熟悉常用的字体类型，通常 只要知道5～6 种字体的大概形状就可以了。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312/ title 文字字体设置 /title style type=text/css !-- div { border:#FF0000 2px solid; /*设置div 标签的边框颜色和实线大小*/ width:300px; /*设置div 标签的宽度*/ text-align:center; /*设置div 标签的文本对齐方式*/