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

《WEB基础03文本格式化_表格样式_浮动定位_显示_列表样.docx》由会员分享，可在线阅读，更多相关《WEB基础03文本格式化_表格样式_浮动定位_显示_列表样.docx（43页珍藏版）》请在三一办公上搜索。

1、1. 文本格式化本章主要讲解如何实现文本的格式化，包括控制文本的字体（如字体大小、字体样式和字体系列等）和设置文本的格式（如文本颜色、文本排列和文本缩进等）。1.1. 文本格式化1.1.1. 控制字体CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）等，这些属性会直接影响字体及其外观。常用的属性有：1、指定字体（font-family）可以使用font-family属性指定文本的字体，语法如下：1. font-family:name/inherit;如果需要指定字体，则设置值为name，即首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包

2、围起来。如果字体名称包含非ASCII字符，就必须声明样式表的编码。这个属性最大的问题在于，如果用户机器上并没有安装所需要的字体，则会显示默认字体。因此，在指定字体时，最好同时指定替代字体。我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器会使用默认字体显示页面。我们可以结合特定字体和通用字体系列来指定字体，如：1. h1 font-family: Georgia, serif;如果用户机器上没有安装 Geor

3、gia，但安装了 Times 字体（serif 字体系列中的一种字体），浏览器就可能对 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。2、字体大小（font-size ）font-size 属性用来设置文本的大小。如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。可以使用多种方式指定这个属性的值：绝对大小、相对大小、长度单位和百分比。其中，如果使用长度单位来设置字体大小，还可以分别使用相对单位和绝对单位。长度是指采用一种长度单位来表达字体的大小。可使用的绝对单位如表1所示。表1 长度的绝对单位图1给出了使用长度

4、的绝对单位来设置字体大小的效果。图-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属性用于设置文本的粗细，常用于实现将显示元素的文本中所用的字体加粗

5、。该属性可能的值如表3所示。表3 font-weight属性的取值使用 bold 关键字可以将文本设置为粗体。关键字 100 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。比如，我们可以这样定义样式规则：1. p.normal font-weight:normal;2

6、. p.thick font-weight:bold;3. p.thicker font-weight:900;然后查看如下代码：1. font-weight:normal2. font-weight:bold3. font-weight:900上述代码在浏览器中的显示效果如图-2所示。图-2其中，bold是最常用的值，也会遇到使用normal的情况，尤其是在大量加粗文本中创建不同效果的文本时。1.1.2. 控制文本格式CSS除了可以设置字体，还可以定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。1、文本颜色（color）color 属性用于设

7、置文本的颜色，即元素的前景色。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。没有设置color属性的文本将使用浏览器的默认颜色显示。如果需要使用该属性设置文本颜色，该属性的值可以是颜色名称、rgb 值或者十六进制数，其默认值取决于浏览器。比如，我们可以这样设置：1. p color: rgb(255,255,0);或者1. p color: #FFFF00;2、文本排列（text-align）text-align 是一个基本的属性，用于设置一个元素中的文本行互相之间的对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式

8、。该属性可能的取值如表4所示。表4 text-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

9、-align:justify;然后，查看如下代码：1. 2. 3. With sunshine, water, and careful tending, roses will bloom several times in a season.4. 5. 6. With sunshine, water, and careful tending, roses will bloom several times in a season.7. 8. 9. With sunshine, water, and careful tending, roses will bloom several times in

10、 a season.10. 11. 12. With sunshine, water, and careful tending, roses will bloom several times in a season.13. 14. 上述代码在浏览器中的显示效果如图-3所示。图-3由图3可以看出，居左或者居右排列后，另外一端会显示为锯齿状（使用默认的字宽和间隔，以单词为单位换行）；而如果使用justify则会显示为两端对齐的效果。3、文字修饰（text-decoration）text-decoration 属性用于对文本进行修饰。它允许对文本设置某种效果，如加下划线、上划线或者闪烁等。text-

11、decoration属性可能的取值如表5所示。表5 text-decoration属性的取值underline 会对元素加下划线;而overline 的作用恰好相反，会在文本的顶端画一个上划线；值 line-through 则在文本中间画一个贯穿线;blink 会让文本闪烁。还可以在一个规则中结合多种装饰，只需要为text-decoration属性设置多个值，且多个值之间用空格隔开。比如，如果一个段落中的文本既有下划线，又有上划线，我们可以这样定义：1. p text-decoration:underline overline;none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文

12、本是默认外观，但某些元素例外。比如，链接默认地会有下划线。因此，如果希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：1. a text-decoration: none;如果显式地用这样一个规则去掉链接的下划线，那么它与正常文本之间在视觉上的唯一差别可能就是颜色（浏览器往往会为链接设置默认的颜色）。blink 值会创建闪烁的文本，但是这通常被认为是不赞成使用的方式，大部分浏览器也不支持它。4、行高（line-height）line-height 属性用于设置行间的距离。当处理大量文本时，增加文本行之间的垂直空间量可以提高文档可阅读性，这种空间量称为行间距。在Web页面中增加行间距是

13、非常有用的。比如，如果文本行之间存在更多的空间，当达到一行的末尾之后，更容易发现下一行的起点。line-height 属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。行间距是line-height 与 font-size 的计算值之差。行间距会被分为两半，分别加到一个文本行内容的顶部和底部。而可以包含这些内容的最小框就是行框。比如，我们可以这样定义样式规则：1. p border:1px solid red;2. p.smallLength line-height: 10px;3. p.bigLength line-height: 30px;然后，查看如下代码

14、：1. 这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 20px。这是拥有标准行高的段落。2. length=10px。这个段落拥有更小的行高。这个段落拥有更小的行高。3. length=30px。这个段落拥有更大的行高。这个段落拥有更大的行高。上述代码在浏览器中的显示效果如图-4所示。图-45、首行文本缩进（text-indent）把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。text-indent 属性缩进元素中的首行文本，即使用该属性可以让元素的第一行缩进一个给定的距离。这个属性最

15、常见的用途是将段落的首行缩进，下面的规则会使段落的首行缩进 2 em：1. p.first text-indent: 2em;可以为块级元素应用 text-indent属性，但无法将该属性应用于行内元素，且图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。text-indent 属性除了可以使用长度单位，还包括百分比值。百分数是相对于缩进元素的父元素的宽度。即如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。比如，我们可以这样定义样式规则（为了更好的观察父元素的边界，我们定义了

16、 元素的边框）：1. div 2. width: 400px;3. border:1px solid red;4. p.indent text-indent: 20%;然后，查看如下代码：1. 2. This is a paragraph.This is a paragraph.This is a paragraph.3. 4. This is a paragraph.This is a paragraph.This is a paragraph.5. 6. 上述代码在浏览器中的显示效果如图-5所示（缩进值是父元素的 20%，即 80 个像素）：图-52. 表格样式2.1. 表格常用样式属性2

17、.1.1. 表格常用样式属性对于表格而言，它可以使用前面章节中讲述的很多CSS样式（如背景色、边框和字体等），比如，可以使用 width 属性、height 属性设置单元格的大小；可以使用border 属性设置单元格的边框；可以使用padding 属性控制表格中内容与边框的距离；可以使用background 属性设置表格或者单元格的背景色以及背景图像；还可以使用文本格式化相关的样式属性来定义表格中的文本。需要注意的是，除了background-color 属性和height 属性之外，最好避免将这些属性用于 元素。因为这些属性用于表行时，浏览器对它们的支持并没有像它们用于单个单元格时那么好。2

18、.1.2. 垂直方向对齐vertical-align 属性用于设置元素的垂直对齐方式，当操作内联元素时（比如图像或者普通文本），该属性非常有用。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性可能的取值有很多，但是该属性在用于表格单元格中的内容垂直对齐方式时可取的值如表6所示。表6 vertical-align属性的取值vertical-align 属性在用于表格单元格中的内容垂直对齐方式时，可以设置为顶部top、中部middle和底部bottom三个值。比如，我们定义如下样式规则：1. .top vertical-align:top;2. .m

19、iddle vertical-align:middle;3. .bottom vertical-align:bottom;4. td width:200px;height:80px;border:1px solid red;然后，在页面的主体中添加如下代码：1. 2. 3. some text4. some text5. 6. 7. some text8. some text9. 10. 上述代码在浏览器中的显示效果如图-6所示。图-6表格单元格中内容的垂直对齐方式的默认值为middle，因此，图1中表格的第一列的两个单元格中的文本都是垂直居中显示；而设置了top 值和bottom 值以后，可

20、以设置单元格中内容位于单元格顶部或者底部显示。另外，默认情况下，单元格中的文本在水平方向上居左显示，可以使用text-align 属性来修改其水平对齐方式。2.2. 表格特有样式属性除了上一节中讲述的那些属性以外，还有一些属性是只与表格相关的。这些仅与表格相关的样式属性可以极大的改善表格的外观。2.2.1. 边框合并从在前面的示例中不难发现，如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框（见图-6）。如果需要合并相邻的边框，则可以使用border-collapse 属性。border-collapse 属性设置是否将表格边框折叠为单一边框，即是否被合并为一个单一的边框，还是

21、像在标准的 HTML 中那样分开显示。border-collapse 属性可能的取值如表7所示。表7 border-collapse 属性的取值border-collapse 属性的值如果设置为separate 值或者不设置，浏览器会独立显示每一个单元格的边框，即使两个相邻单元格具有不同类型的边框。border-collapse 属性的值如果设置为collapse 值，则会对边框进行合并，即会基于一组内置的复杂规则来决定显示哪一个边框。一般情况下，浏览器会对边框进行折叠。比如，我们定义如下样式规则：1. table border:2px dotted black;2. td width:200

22、px;height:50px;3. table.separate border-collapse:separate;4. table.collapse border-collapse:collapse;5. td.solid border:3px solid silver;6. td.dashed border:3px dashed gray;然后，在页面的主体中添加如下代码：1. border-collapse:separate2. 3. 4. 第1行第1列5. 第1行第2列6. 7. 8. 第2行第1列9. 第2行第2列10. 11. 12. 13. border-collapse:col

23、lapse14. 15. 16. 第1行第1列17. 第1行第2列18. 19. 20. 第2行第1列21. 第2行第2列22. 23. 上述代码在浏览器中的显示效果如图-7所示。图-7为了更好的查看效果，图-7中的相邻单元格使用了不同样式的边框。图-7中的第一个表格的border-collapse 属性使用了separate 值，则表格的边框、各单元格的边框都独立显示，即使相邻的单元格的边框样式不同。第二个表格的border-collapse 属性使用了collapse 值，相邻的边框则会发生合并，边框会互相折叠。由图可见，实线边框的优先级高于虚线边框。2.2.2. 边框边距由前面的示例不难

24、发现，在表格中的单元格之间存在一定的间距，如果希望控制这个间距，则可以使用border-spacing 属性。border-spacing 属性设置相邻单元格的边框间的距离，但是仅限于分隔单元格边框，即border-collapse 属性为separate 值的情况下，也称为边框分离模式。该属性的值可以是长度单位或者单词 inherit。如果设置为长度，则可以使用px、cm等单位，但是不允许使用负值；如果设置为inherit值，表示规定应该从父元素继承 border-spacing 属性的值。设置border-spacing 属性的值为长度值时，可以为该属性指定一个或者两个值。如果指定一个值，

25、则该值同时应用于水平和垂直间距；如果指定两个值，那么第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开。比如，我们定义如下样式规则：1. table border:2px dotted gray;2. td 3. background-color:#f0f0f0;4. width:200px;5. height:50px;6. border-collapse:separate;7. border:1px solid black;8. table.singleSpacing border-spacing:5px;9. table.doubleSpacing border-spac

26、ing:10px 20px;然后，在页面的主体中添加如下代码：1. 2. 设置一个值3. 4. 第1行第1列5. 第1行第2列6. 7. 8. 第2行第1列9. 第2行第2列10. 11. 12. 13. 14. 设置两个值15. 16. 第1行第1列17. 第1行第2列18. 19. 20. 第2行第1列21. 第2行第2列22. 23. 上述代码在浏览器中的显示效果如图-8所示。图-8由图-8可以看出，第一个表的border-spacing 属性只设置了一个值为5px，则单元格边框之间的垂直和水平间隔均为5 像素；而第二个表的border-spacing 属性设置了两个值，则单元格边框之间

27、的水平间距为10 像素，而垂直间距较大，为20 像素。需要注意的是，为了尽量能够在各浏览器中得到一致的显示效果，最好为 元素设置border-spacing 属性，而不是单元格等其他元素。3. 浮动定位3.1. 定位概述3.1.1. 定位概述CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局，还可以将布局的一部分与另一部分重叠，这样可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，即可以定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，而且各浏览器对 CSS2 中定位的支持远胜于对其它方面的支

28、持。CSS 有三种基本的定位机制：普通流定位、浮动和绝对定位。其中，使用position 属性和偏移属性可以实现普通流定位（包括相对定位）和绝对定位（包括固定定位）；使用float 属性可以实现浮动定位。其他属性为辅助属性。在后面的章节中，我们会详细讲解普通流定位、相对定位、绝对定位和浮动。3.1.2. 普通流定位默认情况下，通过使用称为普通流的方式在页面中布局元素。在普通流中定位，页面中的块级元素框从上到下一个接一个地排列，且每一个块级元素都会出现在一个新行中（比如 元素、 元素），元素框之间的垂直距离是由框的垂直外边距计算出来的。内联元素将在一行中从左到右排列水平布置，不需要从新行开始。可

29、以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。为了更好的理解普通流定位模式，我们定义如下样式规则：1. p 2. height:70px;3. border:1px solid gray;4. margin-top:20px;5. padding-top:10px;6. div 7. height:70px;8. border:2px dashed black;9. margin-top:20px;10. padding

30、-top:10px;11. b 12. height:50px;13. border:2px dotted red;14. margin-top:20px;15. padding-top:10px;然后在页面的主体中添加如下代码：1. This is the first block element.2. This is the second block element.3. This is paragraph one.上述代码在浏览器中的显示效果如图-9所示。图-9由图9可以看出，每个块级元素（段落和 元素）按照在代码中书写的顺序逐一出现在一个不同的行中，而 、 和 这些内联元素则位于块级元素

31、中的同一行，且按照从左到右的顺序出现。对于块级元素，可以设置边框、高度、宽度、外边距和内边距；而对于内联元素，即使设置高度和外边距，也没有实际效果，只能设置内边距（见 元素的显示效果）。如果希望让元素的位置与在普通流位置中出现的位置不同，则需要使用定位属性来实现。使用position 属性可以更改定位模式为相对定位、绝对定位和固定定位，还可以使用偏移属性来实现元素框位置的偏移；或者使用float属性来实现浮动定位。3.2. 浮动定位3.2.1. 浮动概述浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的

32、外边缘碰到包含框或另一个浮动框的边框为止。使用浮动可以修改元素原有的定位方式，尤其在一些需要设置多个块级元素同行排列的情况下会非常有用。3.2.2. 浮动定位由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。为了更好的理解浮动的作用，我们先用一些示意图解释浮动的效果，然后在使用float 属性来实现这些效果。首先，请看图10。包含框中有三个元素框，如果把框 1 向右浮动，则它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：图-10然后，我们查看图11。图-11由图11可以看出，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左

33、边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失（如图11中的左图所示）。而如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框（如图11中的右图所示）。而如果包含框太窄或者浮动框的高度不同，会出现什么现象呢？我们查看图12。图-12由图12可以看出，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块会自动向下移动，直到有足够的空间（如图12中的左图所示）；而如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”（如图12中的右图所示）。3.2.3. float 属性如果需

34、要指示框浮动在包含框的左边或者右边，我们可以通过 float 属性来实现。float 属性定义元素在哪个方向浮动。float 属性可能的取值如表8 所示。表8float属性的取值比如，我们定义如下样式规则：1. div 2. height:100px;3. background-color:#f0f0f0;4. border:1px solid gray;5. margin:10px 0px 0px 10px;6. font-size:24px; 7. div.float float:right;然后，在页面的主体中添加如下代码：1. 框12. 框23. 框3上述代码在浏览器中的显示效果如图-

35、13所示。图-13由图13可以看出，设置框 2 向右浮动后，它会停靠在页面的右边框，而框 3 位于框 2浮动前的位置，就像框 2 不存在一样。但是因为没有指定元素框的宽度，则浮动框会尽可能的窄，就如同框 2 的效果。因此，指定元素的 float 属性后，最好设置元素的 width 属性，用于指示浮动框占用包含框的宽度。我们修改 元素的样式规则，为其加上宽度：1. div 2. width:100px;3. height:100px;4. background-color:#f0f0f0;5. border:1px solid gray;6. margin:10px 0px 0px 10px;7

36、. font-size:24px; 8. div.float float:right;图-14给出了上述代码在浏览器中的显示效果。图-143.2.4. clear 属性出现在其他元素中的图形和文本元素称为浮动元素，而 clear 属性用于设置一个元素的侧面是否允许其他的浮动元素。clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样。clear 属性可能的取值如表9 所示。表9

37、clear属性的取值其中，none 值为默认值，不进行清理，即会出现文本围绕的效果；而如果声明为左边或右边清除，表示框的哪些边不应该挨着浮动框，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。比如，我们定义如下样式规则（为两个浮动元素框定义不同的高度）：1. p 2. height:200px;3. border:1px solid gray;4. margin:20px 0px 0px 20px;5. font-size:24px;6. div 7. width:100px;8. border:1px solid gray;9. margin:20px 0px 0px 20px

38、;10. font-size:24px;11. background-color:#f0f0f0;12. div.floatLeft 13. float:left;14. height:150px;15. div.floatRight 16. float:right;17. height:100px;然后，在页面主体中添加如下代码：1. 左侧浮动框2. 右侧浮动框3. This is paragraph.This is paragraph.This is paragraph.This is paragraph.此时，虽然先定义 元素再添加段落 元素，但是因为两个 元素分别设置了向左和向右浮动，

39、则段落 元素会向上移，且出现文本包围浮动框的效果，如图15所示。图-15如果不希望实现图15所示的文本围绕效果，则可以设置段落元素的 clear 属性。如果需要清除右侧浮动框，则可以设置clear属性为值right ，即段落元素的右边不允许有浮动元素。修改样式规则如下：1. p 2. height:200px;3. border:1px solid gray;4. margin:20px 0px 0px 20px;5. font-size:24px;6. clear:right;图16给出了修改样式规则后的代码在浏览器中的显示效果。图-16由图16可以看出，设置了段落的clear 属性为rig

40、ht 值以后，为段落元素添加上外边距以实现清除右边浮动框的效果。但是因为左边浮动框的高度大于右边浮动框，左边依然有文本围绕浮动框的效果。因此，如果需要完全清除文本围绕的效果，则可以设置清除左侧浮动框（左侧浮动框的高度大于右侧浮动框，可以添加足够的上外边距）；或者设置clear 属性为both 值。为此，我们修改样式规则如下：1. p 2. height:200px;3. border:1px solid gray;4. margin:20px 0px 0px 20px;5. font-size:24px;6. clear:both;图17给出了修改样式规则后的代码在浏览器中的显示效果。图-174. 显示4.1. 显示方式4.1.1. 显示方式相信学到这里的时候，你已经对“一切皆为框”这句话有了深刻的理解：页面上所有的元素都可以显示为框。不过，像 、 或 元素常常被称为块级元素，这意味着这些元素显示为一块内容，即“块框”；与之相反， 和 等元素称为“内联元素”或者“行内元素”，这是因为它们的内容显示在行中，即“行内框”。4.1.2. display 属性除了默认的显示效果之外，我们还可以使用 display 属性来修改元素框的显示方式，即改变生成的框的类型。该属性可能的取值如表 - 10 所示。表10 display属性的