WEB基础03文本格式化_表格样式_浮动定位_显示_列表样

1.文本格式化本章主要讲解如何实现文本的格式化，包括控制文本的字体（如字体大小、字体样式和字体系列等）和设置文本的格式（如文本颜色、文本排列和文本缩进等）。1.1.文本格式化1.1.1.控制字体CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）等，这些属性会直接影响字体及其外观。常用的属性有：1、指定字体（font-family）可以使用font-family属性指定文本的字体，语法如下：1.font-family:name/inherit;如果需要指定字体，则设置值为name，即首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。如果字体名称包含非ASCII字符，就必须声明样式表的编码。这个属性最大的问题在于，如果用户机器上并没有安装所需要的字体，则会显示默认字体。因此，在指定字体时，最好同时指定替代字体。我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器会使用默认字体显示页面。我们可以结合特定字体和通用字体系列来指定字体，如：1.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，表示像素。通过像素设置文本大小，可以对文本大小进行完全控制。比如，我们可以这样设置：1.h1{font-size:60px;}2.h2{font-size:40px;}3.p{font-size:14px;}font-size属性的值还可以设置为“inherit”，规定应该从父元素继承字体尺寸。3、字体加粗（font-weight）font-weight属性用于设置文本的粗细，常用于实现将显示元素的文本中所用的字体加粗。该属性可能的值如表－3所示。表－3font-weight属性的取值使用bold关键字可以将文本设置为粗体。关键字100~900为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。数字400等价于normal，而700等价于bold。如果将元素的加粗设置为bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词lighter会导致浏览器将加粗度下移而不是上移。比如，我们可以这样定义样式规则：1.p.normal{font-weight:normal;}2.p.thick{font-weight:bold;}3.p.thicker{font-weight:900;}然后查看如下代码：1.pclass=normalfont-weight:normal/p2.pclass=thickfont-weight:bold/p3.pclass=thickerfont-weight:900/p上述代码在浏览器中的显示效果如图-2所示。图-2其中，bold是最常用的值，也会遇到使用normal的情况，尤其是在大量加粗文本中创建不同效果的文本时。1.1.2.控制文本格式CSS除了可以设置字体，还可以定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。1、文本颜色（color）color属性用于设置文本的颜色，即元素的前景色。这个颜色还会应用到元素的所有边框，除非被border-color或另外某个边框颜色属性覆盖。没有设置color属性的文本将使用浏览器的默认颜色显示。如果需要使用该属性设置文本颜色，该属性的值可以是颜色名称、rgb值或者十六进制数，其默认值取决于浏览器。比如，我们可以这样设置：1.p{color:rgb(255,255,0);}或者1.p{color:#FFFF00;}2、文本排列（text-align）text-align是一个基本的属性，用于设置一个元素中的文本行互相之间的对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。该属性可能的取值如表－4所示。表－4text-align属性的取值前3个值相当直接，不用额外解释。text-align属性还可能取值justify，我们称为两端对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。这种两端对齐的排列方式经常用于打印。比如，我们可以这样定义样式规则：1.td.leftAlign{text-align:left;}2.td.rightAlign{text-align:right;}3.td.centerAlign{text-align:center;}4.td.justifyAlign{text-align:justify;}然后，查看如下代码：1.tableborder=12.tr3.tdclass=leftAlignWithsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason./td4./tr5.tr6.tdclass=rightAlignWithsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason./td7./tr8.tr9.tdclass=centerAlignWithsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason./td10./tr11.tr12.tdclass=justifyAlignWithsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason./td13./tr14./table上述代码在浏览器中的显示效果如图-3所示。图-3由图－3可以看出，居左或者居右排列后，另外一端会显示为锯齿状（使用默认的字宽和间隔，以单词为单位换行）；而如果使用justify则会显示为两端对齐的效果。3、文字修饰（text-decoration）text-decoration属性用于对文本进行修饰。它允许对文本设置某种效果，如加下划线、上划线或者闪烁等。text-decoration属性可能的取值如表－5所示。表－5text-decoration属性的取值underline会对元素加下划线;而overline的作用恰好相反，会在文本的顶端画一个上划线；值line-through则在文本中间画一个贯穿线;blink会让文本闪烁。还可以在一个规则中结合多种装饰，只需要为text-decoration属性设置多个值，且多个值之间用空格隔开。比如，如果一个段落中的文本既有下划线，又有上划线，我们可以这样定义：1.p{text-decoration:underlineoverline;}none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但某些元素例外。比如，链接默认地会有下划线。因此，如果希望去掉超链接的下划线，可以使用以下CSS来做到这一点：1.a{text-decoration:none;}如果显式地用这样一个规则去掉链接的下划线，那么它与正常文本之间在视觉上的唯一差别可能就是颜色（浏览器往往会为链接设置默认的颜色）。blink值会创建闪烁的文本，但是这通常被认为是不赞成使用的方式，大部分浏览器也不支持它。4、行高（line-height）line-height属性用于设置行间的距离。当处理大量文本时，增加文本行之间的垂直空间量可以提高文档可阅读性，这种空间量称为行间距。在Web页面中增加行间距是非常有用的。比如，如果文本行之间存在更多的空间，当达到一行的末尾之后，更容易发现下一行的起点。line-height属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。行间距是line-height与font-size的计算值之差。行间距会被分为两半，分别加到一个文本行内容的顶部和底部。而可以包含这些内容的最小框就是行框。比如，我们可以这样定义样式规则：1.p{border:1pxsolidred;}2.p.smallLength{line-height:10px;}3.p.bigLength{line-height:30px;}然后，查看如下代码：1.p这是拥有标准行高的段落。在大多数浏览器中默认行高大约是20px。这是拥有标准行高的段落。/p2.pclass=smallLengthlength=10px。这个段落拥有更小的行高。这个段落拥有更小的行高。/p3.pclass=bigLengthlength=30px。这个段落拥有更大的行高。这个段落拥有更大的行高。/p上述代码在浏览器中的显示效果如图-4所示。图-45、首行文本缩进（text-indent）把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本缩进。text-indent属性缩进元素中的首行文本，即使用该属性可以让元素的第一行缩进一个给定的距离。这个属性最常见的用途是将段落的首行缩进，下面的规则会使段落的首行缩进2em：1.p.first{text-indent:2em;}可以为块级元素应用text-indent属性，但无法将该属性应用于行内元素，且图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。text-indent属性除了可以使用长度单位，还包括百分比值。百分数是相对于缩进元素的父元素的宽度。即如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。比如，我们可以这样定义样式规则（为了更好的观察父元素的边界，我们定义了div元素的边框）：1.div{2.width:400px;3.border:1pxsolidred;}4.p.indent{text-indent:20%;}然后，查看如下代码：1.div2.pThisisaparagraph.Thisisaparagraph.Thisisaparagraph./p3.pclass=indent4.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.5./p6./div上述代码在浏览器中的显示效果如图-5所示（缩进值是父元素的20%，即80个像素）：图-52.表格样式2.1.表格常用样式属性2.1.1.表格常用样式属性对于表格而言，它可以使用前面章节中讲述的很多CSS样式（如背景色、边框和字体等），比如，可以使用width属性、hei