《WEB基础03文本格式化表格样式shg》由会员分享，可在线阅读，更多相关《WEB基础03文本格式化表格样式shg（52页珍藏版）》请在金锄头文库上搜索。
1、1. 文文本格式式化本章主要要讲解如如何实现现文本的的格式化化，包括括控制文文本的字字体（如如字体大大小、字字体样式式和字体体系列等等）和设设置文本本的格式式（如文文本颜色色、文本本排列和和文本缩缩进等）。1.1. 文本本格式化化1.1.1. 控制字字体CSS 字体属属性定义义文本的的字体系系列、大大小、加加粗、风风格（如如斜体）等等，这些些属性会会直接影影响字体体及其外外观。常常用的属属性有：1、指定定字体（ffontt-faamilly）可以使用用fonnt-ffamiily属属性指定定文本的的字体，语语法如下下：1. fontt-fammilyy:namme/inhheriit;如果需要
2、要指定字字体，则则设置值值为naame，即即首选字字体的名名称。如如果字体体名称有有多个单单词，即即中间有有空格，则则需要将将字体名名称用一一对单引引号或者者双引号号包围起起来。如如果字体体名称包包含非AASCIII字符符，就必必须声明明样式表表的编码码。这个属性性最大的的问题在在于，如如果用户户机器上上并没有有安装所所需要的的字体，则则会显示示默认字字体。因因此，在在指定字字体时，最最好同时时指定替替代字体体。我们可以以为foont-fammilyy属性指指定多种种字体，且且多种字字体之间间用逗号号隔开，这这样可以以为页面面指定一一个字体体列表。如如果用户户机器没没有第一一种字体体，则浏浏览
3、器会会查找字字体列表表中的下下一种字字体作为为替代字字体显示示。如果果找遍了了字体列列表还是是没有可可以使用用的字体体，浏览览器会使使用默认认字体显显示页面面。我们可以以结合特特定字体体和通用用字体系系列来指指定字体体，如：1. h1 fonnt-fammilyy: Geeorggia, seeriff;如果用户户机器上上没有安安装 GGeorrgiaa，但安安装了 Timmes 字体（sseriif 字字体系列列中的一一种字体体），浏浏览器就就可能对对 元素使使用 TTimees。尽尽管 TTimees 与与 Geeorggia 并不完完全匹配配，但至至少足够够接近。2、字体体大小（ffon
4、tt-siize ）fontt-siize 属性用用来设置置文本的的大小。如如果没有有规定字字体大小小，普通通文本（比比如段落落）的默默认大小小是 116 像像素 (16ppx=11em)。可以使用用多种方方式指定定这个属属性的值值：绝对对大小、相相对大小小、长度度单位和和百分比比。其中中，如果果使用长长度单位位来设置置字体大大小，还还可以分分别使用用相对单单位和绝绝对单位位。长度是指指采用一一种长度度单位来来表达字字体的大大小。可可使用的的绝对单单位如表表1所所示。表1 长度的的绝对单单位图1给给出了使使用长度度的绝对对单位来来设置字字体大小小的效果果。图-1也可以使使用相对对单位的的长度来
5、来设置字字体大小小，可使使用的相相对单位位如表2所示示。表2 长度的的相对单单位如果需要要使用相相对单位位来设置置大小，我我们可以以使用ppx，表表示像素素。通过过像素设设置文本本大小，可可以对文文本大小小进行完完全控制制。比如如，我们们可以这这样设置置：1. h1 fonnt-sizze:60ppx;2. h2 fonnt-sizze:40ppx;3. p fonnt-sizze:14ppx;fontt-siize 属性的的值还可可以设置置为“inhheriit”，规定定应该从从父元素素继承字字体尺寸寸。3、字体体加粗（ffontt-weeighht）fontt-weeighht属性性用于设
6、设置文本本的粗细细，常用用于实现现将显示示元素的的文本中中所用的的字体加加粗。该属性可可能的值值如表3所示示。表3 fonnt-wweigght属属性的取取值使用 bboldd 关键键字可以以将文本本设置为为粗体。关键字 1000 9000 为字字体指定定了 99 级加加粗度。如如果一个个字体内内置了这这些加粗粗级别，那那么这些些数字就就直接映映射到预预定义的的级别，1100 对应最最细的字字体变形形，9000 对对应最粗粗的字体体变形。数数字 4400 等价于于 noormaal，而而 7000 等等价于 bolld。如果将元元素的加加粗设置置为 bboldder，浏浏览器会会设置比比所继承
7、承值更粗粗的一个个字体加加粗。与与此相反反，关键键词 llighhterr 会导导致浏览览器将加加粗度下下移而不不是上移移。比如，我我们可以以这样定定义样式式规则：1. p.noormaal fonnt-weiightt:norrmall;2. p.thhickk fonnt-weiightt:bolld;3. p.thhickker fonnt-weiightt:9000;然后查看看如下代代码：1. fonnt-weiightt:norrmall2. fonnt-weiightt:bolld3. fonnt-weiightt:9000上述代码码在浏览览器中的的显示效效果如图图-2所所示。图-
8、2其中，bboldd是最常常用的值值，也会会遇到使使用noormaal的情情况，尤尤其是在在大量加加粗文本本中创建建不同效效果的文文本时。1.1.2. 控制文文本格式式CSS除除了可以以设置字字体，还还可以定定义文本本的外观观。通过过文本属属性，可可以改变变文本的的颜色、字字符间距距、对齐齐文本、装装饰文本本、对文文本进行行缩进等等。1、文本本颜色（ccoloor）coloor 属属性用于于设置文文本的颜颜色，即即元素的的前景色色。这个个颜色还还会应用用到元素素的所有有边框，除除非被 borrderr-coolorr 或另另外某个个边框颜颜色属性性覆盖。没有设置置collor属属性的文文本将使
9、使用浏览览器的默默认颜色色显示。如如果需要要使用该该属性设设置文本本颜色，该该属性的的值可以以是颜色色名称、rrgb 值或者者十六进进制数，其其默认值值取决于于浏览器器。比如，我我们可以以这样设设置：1. p collor: rggb(2255,2555,0);或者1. p collor: #FFFFFF00;2、文本本排列（ttextt-allignn）textt-allignn 是一一个基本本的属性性，用于于设置一一个元素素中的文文本行互互相之间间的对齐齐方式。该属性通通过指定定行框与与哪个点点对齐，从从而设置置块级元元素内文文本的水水平对齐齐方式。该该属性可可能的取取值如表表4所所示。表
10、4 texxt-aaliggn属性性的取值值前 3 个值相相当直接接，不用用额外解解释。textt-allignn属性还还可能取取值 jjusttifyy，我们们称为两两端对齐齐。在两两端对齐齐文本中中，文本本行的左左右两端端都放在在父元素素的内边边界上。然然后，调调整单词词和字母母间的间间隔，使使各行的的长度恰恰好相等等。这种种两端对对齐的排排列方式式经常用用于打印印。比如，我我们可以以这样定定义样式式规则：1. td.llefttAliign texxt-aliign:lefft;2. td.rrighhtAllignn texxt-aliign:rigght;3. td.ccentter
11、AAliggn texxt-aliign:cennterr;4. td.jjusttifyyAliign texxt-aliign:jusstiffy;然后，查查看如下下代码：1. 2. 3. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraal ttimees iin aa seeasoon.4. 5. 6. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraa
12、l ttimees iin aa seeasoon.7. 8. 9. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraal ttimees iin aa seeasoon.10. 11. 12. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraal ttimees iin aa seeasoon.13. 14. 上述代码码在浏览览器中的的显示效效果如图图-3所所
13、示。图-3由图33可以看看出，居居左或者者居右排排列后，另另外一端端会显示示为锯齿齿状（使使用默认认的字宽宽和间隔隔，以单单词为单单位换行行）；而而如果使使用juustiify则则会显示示为两端端对齐的的效果。3、文字字修饰（ttextt-deecorratiion）textt-deecorratiion 属性用用于对文文本进行行修饰。它它允许对对文本设设置某种种效果，如如加下划划线、上上划线或或者闪烁烁等。textt-deecorratiion属属性可能能的取值值如表5所示示。表5 texxt-ddecoorattionn属性的的取值undeerliine 会对元元素加下下划线;而ovver
14、llinee 的作作用恰好好相反，会会在文本本的顶端端画一个个上划线线；值 linne-tthrooughh 则在在文本中中间画一一个贯穿穿线;bblinnk 会会让文本本闪烁。还可以在在一个规规则中结结合多种种装饰，只只需要为为texxt-ddecoorattionn属性设设置多个个值，且且多个值值之间用用空格隔隔开。比如，如如果一个个段落中中的文本本既有下下划线，又又有上划划线，我我们可以以这样定定义：1. p texxt-deccoraatioon:undderllinee ovverllinee;nonee 值会会关闭原原本应用用到一个个元素上上的所有有装饰。通通常，无无装饰的的文本是是默认外外观，但但某些元元素例外外。比如如，链接接默认地地会有下下划线。因因此，如如果希望望去掉超超链接的的下划线线，可以以使
