web基础03文本格式化表格样式.docxVIP

1. 文本格式化 本章主要讲解如何实现文本的格式化，包括控制文本的字体（如字体大小、字体样式和字体系列等）和设置文本的格式（如文本颜色、文本排列和文本缩进等）。 1.1. 文本格式化 1.1.1. 控制字体 CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）等，这些属性会直接影响字体及其外观。常用的属性有： 1、指定字体（font-family） 可以使用font-family属性指定文本的字体，语法如下： font-family:name/inherit; 如果需要指定字体，则设置值为name，即首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。如果字体名称包含非ASCII字符，就必须声明样式表的编码。 这个属性最大的问题在于，如果用户机器上并没有安装所需要的字体，则会显示默认字体。因此，在指定字体时，最好同时指定替代字体。 我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器会使用默认字体显示页面。 我们可以结合特定字体和通用字体系列来指定字体，如： h1 {font-family: Georgia, serif;} 如果用户机器上没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），浏览器就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。 2、字体大小（font-size ） font-size 属性用来设置文本的大小。如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。 可以使用多种方式指定这个属性的值：绝对大小、相对大小、长度单位和百分比。其中，如果使用长度单位来设置字体大小，还可以分别使用相对单位和绝对单位。 长度是指采用一种长度单位来表达字体的大小。可使用的绝对单位如表－1所示。 表－1 长度的绝对单位 图－1给出了使用长度的绝对单位来设置字体大小的效果。 图-1 也可以使用相对单位的长度来设置字体大小，可使用的相对单位如表－2所示。 表－2 长度的相对单位 如果需要使用相对单位来设置大小，我们可以使用px，表示像素。通过像素设置文本大小，可以对文本大小进行完全控制。比如，我们可以这样设置： h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;} font-size 属性的值还可以设置为“inherit”，规定应该从父元素继承字体尺寸。 3、字体加粗（font-weight） font-weight属性用于设置文本的粗细，常用于实现将显示元素的文本中所用的字体加粗。 该属性可能的值如表－3所示。 表－3 font-weight属性的取值 使用 bold 关键字可以将文本设置为粗体。 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。 如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。 比如，我们可以这样定义样式规则： p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} 然后查看如下代码： p class=normalfont-weight:normal/p p class=thickfont-weight:bold/p p class=thickerfont-weight:900/p 上述代码在浏览器中的显示效果如图-2所示。 图-2 其中，bold是最常用的值，也会遇到使用normal的情况，尤其是在大量加粗文本中创建不同效果的文本时。 1.1.2. 控制文本格式 CSS除了可以设置字体，还可以定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。 1、文本颜色（color） color 属性用于设置文本的颜色，即元素的前景色。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。 没有设置color属性的文本将使用浏览器的默认颜色显示。如果需要使用该属性设置