《基础文本格式化表格样式浮动定位显示列表样.pdf》由会员分享，可在线阅读，更多相关《基础文本格式化表格样式浮动定位显示列表样.pdf（48页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1.1.文本格式化文本格式化本章重要讲解如何实现文本的格式化，涉及控制文本的字体（如字体大小、字体样式和字体系列等）和设立文本的格式（如文本颜色、文本排列和文本缩进等）。1.1.1.1.文本格式化文本格式化1.1.1.1.1.1.控制字体控制字体CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）等，这些属性会直接影响字体及其外观。常用的属性有：1 1、指定字体（、指定字体（font-familyfont-family）可以使用 font-family 属性指定文本的字体，语法如下：1.font-family:name/inherit;假如需要指定字体，则设立值为 name，即首选字
2、体的名称。假如字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。假如字体名称包含非 ASCII 字符，就必须声明样式表的编码。这个属性最大的问题在于，假如用户机器上并没有安装所需要的字体，则会显示默认字体。因此，在指定字体时，最佳同时指定替代字体。我们可认为 font-family 属性指定多种字体，且多种字体之间用逗号隔开，这样可认为页面指定一个字体列表。假如用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体作为替代字体显示。假如找遍了字体列表还是没有可以使用的字体，浏览器会使用默认字体显示页面。我们可以结合特定字体和通用字体系列来指定字体，如：1.
3、h1 font-family:Georgia,serif;假如用户机器上没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），浏览器就也许对 元素使用 Times。尽管 Times 与Georgia 并不完全匹配，但至少足够接近。2 2、字体大小（、字体大小（font-sizefont-size）font-size 属性用来设立文本的大小。假如没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素(16px=1em)。可以使用多种方式指定这个属性的值：绝对大小、相对大小、长度单位和比例。其中，假如使用长度单位来设立字体大小，还可以分别使用相对单位和绝
4、对单位。长度是指采用一种长度单位来表达字体的大小。可使用的绝对单位如表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 3、
5、字体加粗（、字体加粗（font-weightfont-weight）font-weight 属性用于设立文本的粗细，常用于实现将显示元素的文本中所用的字体加粗。该属性也许的值如表3 所示。表3 font-weight 属性的取值使用 bold 关键字可以将文本设立为粗体。关键字 100 900 为字体指定了 9 级加粗度。假如一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 相应最细的字体变形，900 相应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。假如将元素的加粗设立为 bolder，浏览器会设立比所继承值更粗的一个字体加粗。与此
6、相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。比如，我们可以这样定义样式规则：1.p.normal font-weight:normal;2.p.thick font-weight:bold;3.p.thicker font-weight:900;:900;然后查看如下代码：1.font-weight:normal/2.font-weight:bold/3.font-weight:900/:900 上述代码在浏览器中的显示效果如图-2 所示。图-2其中，bold 是最常用的值，也会碰到使用 normal 的情况，特别是在大量加粗文本中创建不同效果的文本时。1.1.2.1.1
7、.2.控制文本格式控制文本格式CSS 除了可以设立字体，还可以定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。1 1、文本颜色（、文本颜色（colorcolor）color 属性用于设立文本的颜色，即元素的前景色。这个颜色还会应用到元素的所有边框，除非被 border-color 或此外某个边框颜色属性覆盖。没有设立 color 属性的文本将使用浏览器的默认颜色显示。假如需要使用该属性设立文本颜色，该属性的值可以是颜色名称、rgb 值或者十六进制数，其默认值取决于浏览器。比如，我们可以这样设立：1.p color:rgb(255,255,0);
8、(255,255,0);或者1.p color:#FFFF00;2 2、文本排列（、文本排列（text-aligntext-align）text-align 是一个基本的属性，用于设立一个元素中的文本行互相之间的对齐方式。该属性通过指定行框与哪个点对齐，从而设立块级元素内文本的水平对齐方式。该属性也许的取值如表4 所示。表4 text-align 属性的取值前 3 个值相称直接，不用额外解释。text-align 属性还也许取值 justify，我们称为两端对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。这种两端对齐的排列方式
9、经常用于打印。比如，我们可以这样定义样式规则：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.2.3.With sunshine,water,and carefultending,roses will bloom several times inin a season./.4./5.6.With sunshine,water,and carefult
10、ending,roses will bloom several times inin a season./.7./8.9.With sunshine,water,and carefultending,roses will bloom several times inin a season./.10./11.12.With sunshine,water,and carefultending,roses will bloom several times inin a season./.13./14./上述代码在浏览器中的显示效果如图-3 所示。图-3由图3 可以看出，居左或者居右排列后，此外一端会
11、显示为锯齿状（使用默认的字宽和间隔，以单词为单位换行）；而假如使用 justify 则会显示为两端对齐的效果。3 3、文字修饰（、文字修饰（text-decorationtext-decoration）text-decoration 属性用于对文本进行修饰。它允许对文本设立某种效果，如加下划线、上划线或者闪烁等。text-decoration 属性也许的取值如表5 所示。表5 text-decoration 属性的取值underline 会对元素加下划线;而 overline 的作用恰好相反，会在文本的顶端画一个上划线；值 line-through 则在文本中间画一个贯穿线;blink 会让文
12、本闪烁。还可以在一个规则中结合多种装饰，只需要为 text-decoration 属性设立多个值，且多个值之间用空格隔开。比如，假如一个段落中的文本既有下划线，又有上划线，我们可以这样定义：1.p text-decoration:underline overline;none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但某些元素例外。比如，链接默认地会有下划线。因此，假如希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：1.a text-decoration:none;假如显式地用这样一个规则去掉链接的下划线，那么它与正常文本之间在视觉上的唯一差别也许就是
13、颜色（浏览器往往会为链接设立默认的颜色）。blink 值会创建闪烁的文本，但是这通常被认为是不赞成使用的方式，大部分浏览器也不支持它。4 4、行高（、行高（line-heightline-height）line-height 属性用于设立行间的距离。当解决大量文本时，增长文本行之间的垂直空间量可以提高文档可阅读性，这种空间量称为行间距。在 Web 页面中增长行间距是非常有用的。比如，假如文本行之间存在更多的空间，当达成一行的末尾之后，更容易发现下一行的起点。line-height 属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。行间距是 line-height
14、 与 font-size 的计算值之差。行间距会被分为两半，分别加到一个文本行内容的顶部和底部。而可以包含这些内容的最小框就是行框。比如，我们可以这样定义样式规则：1.p border:1px solid red;2.p.smallLength line-height:10px;3.p.bigLength line-height:30px;然后，查看如下代码：1.这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 20px。这是拥有标准行高的段落。/2.length=10px。这个段落拥有更小的行高。这个段落拥有更小的行高。/3.length=30px。这个段落拥有更大的行高。这个段落拥有
15、更大的行高。/上述代码在浏览器中的显示效果如图-4 所示。图-45 5、首行文本缩进（、首行文本缩进（text-indenttext-indent）把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。text-indent 属性缩进元素中的首行文本，即使用该属性可以让元素的第一行缩进一个给定的距离。这个属性最常见的用途是将段落的首行缩进，下面的规则会使段落的首行缩进 2 em：1.p.first text-indent:2em;可认为块级元素应用 text-indent 属性，但无法将该属性应用于行内
16、元素，且图像之类的替换元素上也无法应用 text-indent 属性。但是，假如一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。text-indent 属性除了可以使用长度单位，还涉及比例值。百分数是相对于缩进元素的父元素的宽度。即假如将缩进值设立为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。比如，我们可以这样定义样式规则（为了更好的观测父元素的边界，我们定义了 元素的边框）：1.div 2.width:400px;3.border:1px solid red;4.p.indent text-indent:20%;20%;然后，查看如下代码：1.2.This
17、 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.表格样式表格样式2.1.2.1.表格常用样式属性表格常用样式属性2.1.1.2.1.1.表格常用样式属性表格常用样式属性对于表格而言，它可以使用前面章节中讲述的很多 CSS 样式（如背景色、边框和字体等），比如，可以使用 width 属性、h
18、eight 属性设立单元格的大小；可以使用 border 属性设立单元格的边框；可以使用 padding 属性控制表格中内容与边框的距离；可以使用 background 属性设立表格或者单元格的背景色以及背景图像；还可以使用文本格式化相关的样式属性来定义表格中的文本。需要注意的是，除了 background-color 属性和 height 属性之外，最佳避免将这些属性用于 元素。由于这些属性用于表行时，浏览器对它们的支持并没有像它们用于单个单元格时那么好。2.1.2.2.1.2.垂直方向对齐垂直方向对齐vertical-align 属性用于设立元素的垂直对齐方式，当操作内联元素时（比如图像或
19、者普通文本），该属性非常有用。在表单元格中，这个属性会设立单元格框中的单元格内容的对齐方式。vertical-align 属性也许的取值有很多，但是该属性在用于表格单元格中的内容垂直对齐方式时可取的值如表6 所示。表6 vertical-align 属性的取值vertical-align 属性在用于表格单元格中的内容垂直对齐方式时，可以设立为顶部 top、中部 middle 和底部 bottom 三个值。比如，我们定义如下样式规则：1.top vertical-align:top;2.middle vertical-align:middle;3.bottom vertical-align:bo
20、ttom;4.td width:200px;height:80px;border:1px solid red;然后，在页面的主体中添加如下代码：1.2.3.some text/4.some text/5./6.7.some text/8.some text/9./10./上述代码在浏览器中的显示效果如图-6 所示。图-6表格单元格中内容的垂直对齐方式的默认值为 middle，因此，图1 中表格的第一列的两个单元格中的文本都是垂直居中显示；而设立了 top 值和 bottom值以后，可以设立单元格中内容位于单元格顶部或者底部显示。此外，默认情况下，单元格中的文本在水平方向上居左显示，可以使用te
21、xt-align 属性来修改其水平对齐方式。2.2.2.2.表格特有样式属性表格特有样式属性除了上一节中讲述的那些属性以外，尚有一些属性是只与表格相关的。这些仅与表格相关的样式属性可以极大的改善表格的外观。2.2.1.2.2.1.边框合并边框合并从在前面的示例中不难发现，假如设立了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框（见图-6）。假如需要合并相邻的边框，则可以使用 border-collapse 属性。border-collapse 属性设立是否将表格边框折叠为单一边框，即是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。border-collapse
22、属性也许的取值如表7 所示。表7 border-collapse 属性的取值border-collapse 属性的值假如设立为 separate 值或者不设立，浏览器会独立显示每一个单元格的边框，即使两个相邻单元格具有不同类型的边框。border-collapse 属性的值假如设立为 collapse 值，则会对边框进行合并，即会基于一组内置的复杂规则来决定显示哪一个边框。一般情况下，浏览器会对边框进行折叠。比如，我们定义如下样式规则：1.table border:2px dotted black;2.td width:200px;height:50px;3.table.separate bo
23、rder-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 行第 1 1 列/5.第 1 1 行第 2 2 列/6./7.8.第 2 2 行第 1 1 列/9.第 2 2 行第 2 2 列/10./11./12./13.border-collapse:collapse14.15.
24、16.第 1 1 行第 1 1 列/17.第 1 1 行第 2 2 列/18./19.20.第 2 2 行第 1 1 列/21.第 2 2 行第 2 2 列/22./23./上述代码在浏览器中的显示效果如图-7 所示。图-7为了更好的查看效果，图-7 中的相邻单元格使用了不同样式的边框。图-7 中的第一个表格的 border-collapse 属性使用了 separate 值，则表格的边框、各单元格的边框都独立显示，即使相邻的单元格的边框样式不同。第二个表格的 border-collapse 属性使用了 collapse 值，相邻的边框则会发生合并，边框会互相折叠。由图可见，实线边框的优先级高
25、于虚线边框。2.2.2.2.2.2.边框边距边框边距由前面的示例不难发现，在表格中的单元格之间存在一定的间距，假如希望控制这个间距，则可以使用 border-spacing 属性。border-spacing 属性设立相邻单元格的边框间的距离，但是仅限于分隔单元格边框，即 border-collapse 属性为 separate 值的情况下，也称为边框分离模式。该属性的值可以是长度单位或者单词 inherit。假如设立为长度，则可以使用px、cm 等单位，但是不允许使用负值；假如设立为 inherit 值，表达规定应当从父元素继承 border-spacing 属性的值。设立 border-s
26、pacing 属性的值为长度值时，可认为该属性指定一个或者两个值。假如指定一个值，则该值同时应用于水平和垂直间距；假如指定两个值，那么第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开。比如，我们定义如下样式规则：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
27、.table.doubleSpacing border-spacing:10px 20px;然后，在页面的主体中添加如下代码：1.2.设立一个值/3.4.第 1 1 行第 1 1 列/5.第 1 1 行第 2 2 列/6./7.8.第 2 2 行第 1 1 列/9.第 2 2 行第 2 2 列/10./11./12./13.14.设立两个值/15.16.第 1 1 行第 1 1 列/17.第 1 1 行第 2 2 列/18./19.20.第 2 2 行第 1 1 列/21.第 2 2 行第 2 2 列/22./23./上述代码在浏览器中的显示效果如图-8 所示。图-8由图-8 可以看出，第一个
28、表的 border-spacing 属性只设立了一个值为5px，则单元格边框之间的垂直和水平间隔均为 5 像素；而第二个表的 border-spacing 属性设立了两个值，则单元格边框之间的水平间距为 10 像素，而垂直间距较大，为 20 像素。需要注意的是，为了尽量可以在各浏览器中得到一致的显示效果，最佳为 元素设立 border-spacing 属性，而不是单元格等其他元素。3.3.浮动定位浮动定位3.1.3.1.定位概述定位概述3.1.1.3.1.1.定位概述定位概述CSS 为定位提供了一些属性，运用这些属性，可以建立列式布局，还可以将布局的一部分与另一部分重叠，这样可以完毕数年来通常
29、需要使用多个表格才干完毕的任务。定位的基本思想很简朴，即可以定义元素框相对于其正常位置应当出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口自身的位置。显然，这个功能非常强大，并且各浏览器对 CSS2 中定位的支持远胜于对其它方面的支持。CSS 有三种基本的定位机制：普通流定位、浮动和绝对定位。其中，使用 position 属性和偏移属性可以实现普通流定位（涉及相对定位）和绝对定位（涉及固定定位）；使用 float 属性可以实现浮动定位。其他属性为辅助属性。在后面的章节中，我们会具体讲解普通流定位、相对定位、绝对定位和浮动。3.1.2.3.1.2.普通流定位普通流定位默认情况下，通过使用称
30、为普通流的方式在页面中布局元素。在普通流中定位，页面中的块级元素框从上到下一个接一个地排列，且每一个块级元素都会出现在一个新行中（比如 元素、元素），元素框之间的垂直距离是由框的垂直外边距计算出来的。内联元素将在一行中从左到右排列水平布置，不需要从新行开始。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。但是，设立行高可以增长这个框的高度。为了更好的理解普通流定位模式，我们定义如下样式规则：1.p 2.height:70px;3.border:1px so
31、lid 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-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
32、.This is paragraph one.上述代码在浏览器中的显示效果如图-9 所示。图-9由图9 可以看出，每个块级元素（段落和 元素）按照在代码中书写的顺序逐个出现在一个不同的行中，而、和 这些内联元素则位于块级元素中的同一行，且按照从左到右的顺序出现。对于块级元素，可以设立边框、高度、宽度、外边距和内边距；而对于内联元素，即使设立高度和外边距，也没有实际效果，只能设立内边距（见 元素的显示效果）。假如希望让元素的位置与在普通流位置中出现的位置不同，则需要使用定位属性来实现。使用 position 属性可以更改定位模式为相对定位、绝对定位和固定定位，还可以使用偏移属性来实现元素框位置的
33、偏移；或者使用 float 属性来实现浮动定位。3.2.3.2.浮动定位浮动定位3.2.1.3.2.1.浮动概述浮动概述浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边沿碰到包含框或另一个浮动框的边框为止。使用浮动可以修改元素原有的定位方式，特别在一些需要设立多个块级元素同行排列的情况下会非常有用。3.2.2.3.2.2.浮动定位浮动定位由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在同样。为了更好的理解浮动的作用，我们先用一些示意图解释浮动的效果，然后在使用 floa
34、t 属性来实现这些效果。一方面，请看图10。包含框中有三个元素框，假如把框 1 向右浮动，则它脱离文档流并且向右移动，直到它的右边沿碰到包含框的右边沿：图-10然后，我们查看图11。图-11由图11 可以看出，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边沿碰到包含框的左边沿。由于它不再处在文档流中，所以它不占据空间，事实上覆盖住了框 2，使框 2 从视图中消失（如图11 中的左图所示）。而假如把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，此外两个框向左浮动直到碰到前一个浮动框（如图11 中的右图所示）。而假如包含框太窄或者浮动框的高度不同，会出现什么现象呢？我们查
35、看图12。图-12由图12 可以看出，假如包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块会自动向下移动，直到有足够的空间（如图12 中的左图所示）；而假如浮动元素的高度不同，那么当它们向下移动时也许被其它浮动元素“卡住”（如图12 中的右图所示）。3.2.3.float3.2.3.float 属性属性假如需要指示框浮动在包含框的左边或者右边，我们可以通过 float 属性来实现。float 属性定义元素在哪个方向浮动。float 属性也许的取值如表8 所示。表8float 属性的取值比如，我们定义如下样式规则：1.div 2.height:100px;3.background-co
36、lor:#f0f0f0;4.border:1px solid gray;5.margin:10px 0px 0px 10px;6.font-size:24px;7.div.float float:right;然后，在页面的主体中添加如下代码：1.框 1/1 2.框 2/2 3.框 3/3 上述代码在浏览器中的显示效果如图-13 所示。图-13由图13 可以看出，设立框 2 向右浮动后，它会停靠在页面的右边框，而框 3 位于框 2 浮动前的位置，就像框 2 不存在同样。但是由于没有指定元素框的宽度，则浮动框会尽也许的窄，就如同框 2 的效果。因此，指定元素的 float 属性后，最佳设立元素的
37、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.font-size:24px;8.div.float float:right;图-14 给出了上述代码在浏览器中的显示效果。图-143.2.4.clear3.2.4.clear 属性属性出现在其他元素中的图形和文本元素称为浮动元素，而 clear 属性用于设立一个元素的侧面是否允
38、许其他的浮动元素。clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2中，这是通过自动为清除元素（即设立了 clear 属性的元素）增长上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增长清除空间，而外边距自身并不改变。不管哪一种改变，最终结果都同样。clear 属性也许的取值如表9 所示。表9 clear 属性的取值其中，none 值为默认值，不进行清理，即会出现文本围绕的效果；而假如声明为左边或右边清除，表达框的哪些边不应当挨着浮动框，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。比如，我们定义如下样式规则（为两个浮动元素框定义不同的高
39、度）：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;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:100
40、px;然后，在页面主体中添加如下代码：1.左侧浮动框/2.右侧浮动框/3.This is paragraph.This is paragraph.This is paragraph.This isparagraph./.此时，虽然先定义 元素再添加段落 元素，但是由于两个 元素分别设立了向左和向右浮动，则段落 元素会向上移，且出现文本包围浮动框的效果，如图15 所示。图-15假如不希望实现图15 所示的文本围绕效果，则可以设立段落元素的 clear属性。假如需要清除右侧浮动框，则可以设立 clear 属性为值 right，即段落元素的右边不允许有浮动元素。修改样式规则如下：1.p 2.heig
41、ht:200px;3.border:1px solid gray;4.margin:20px 0px 0px 20px;5.font-size:24px;6.clear:right;图16 给出了修改样式规则后的代码在浏览器中的显示效果。图-16由图16 可以看出，设立了段落的 clear 属性为 right 值以后，为段落元素添加上外边距以实现清除右边浮动框的效果。但是由于左边浮动框的高度大于右边浮动框，左边仍然有文本围绕浮动框的效果。因此，假如需要完全清除文本围绕的效果，则可以设立清除左侧浮动框（左侧浮动框的高度大于右侧浮动框，可以添加足够的上外边距）；或者设立clear属性为 both
42、值。为此，我们修改样式规则如下：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.显示显示4.1.4.1.显示方式显示方式4.1.1.4.1.1.显示方式显示方式相信学到这里的时候，你已经对“一切皆为框”这句话有了深刻的理解：页面上所有的元素都可以显示为框。但是，像、或 元素经常被称为块级元素，这意味着这些元素显示为一块内容，即“块框”；与之相反，和 等元素称为“内联元素”或
43、者“行内元素”，这是由于它们的内容显示在行中，即“行内框”。4.1.2.display4.1.2.display 属性属性除了默认的显示效果之外，我们还可以使用 display 属性来修改元素框的显示方式，即改变生成的框的类型。该属性也许的取值如表-10 所示。表10 display 属性的取值由表-10 可以看出，我们可以用 display 属性定义建立布局时元素生成的显示框类型。1 1、blockblock 值值假如将 display 属性设立为 block，可以让行内元素（比如 元素）表现得像块级元素同样。比如，我们定义如下样式规则：1.a 2.width:100px;3.height:
44、30px;4.border:1px solid gray;5.background-color:#f0f0f0;6.text-align:center;7.a.displayAsBlock display:block;然后，在页面的主体中添加如下代码：1.链接 11链接 2/2.链接 1/1 3.链接 2/2 上述代码在浏览器中的显示效果如图-18 所示。图-18由图-18 可知，设立了 元素的显示类型为 block 之后，该元素就显示为块级元素的效果，可以定义高度和宽度，且会自动换行。2 2、inlineinline 值值假如将 display 属性设立为 inline，可以让块级元素（比如
45、 元素）表现得像内联元素同样。比如，我们定义如下样式规则：1.p 2.width:100px;3.height:50px;4.border:1px solid gray;5.background-color:#f0f0f0;6.text-align:center;7.p.displayAsInline display:inline;然后，在页面的主体中添加如下代码：1.普通段落/2.段落 1/1 3.段落 2/2 上述代码在浏览器中的显示效果如图-19 所示。图-19由图-19 可知，设立了 元素的显示类型为 inline 之后，该元素就显示为内联元素的效果，定义的高度和宽度失效，且不会自动换
46、行。3 3、inline-blockinline-block 值值inline-block 值表达行内块元素，是 CSS2.1 新增的值。为了更好的理解此属性值的作用，我们添加如下样式规则：1.p.displayAsInlineBlock display:inline-block;然后，在页面的主体中添加如下代码：1.普通段落 1/1 2.段落 1/1 3.段落 22 4.段落 3/3 5.段落 4/4 上述代码在浏览器中的显示效果如图-20 所示。图-20由图-20 可知，设立了 元素的显示类型为 inline-block 之后，多个段落元素仍然显示在同一行，但是在同一行内的段落元素表现的如
47、同块级元素，即可认为其定义高度和宽度，会占据相应的空间（如段落 3 和段落 4）。4 4、nonenone 值值可以通过把 display 属性设立为 none，让生成的元素主线没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。比如，我们继续定义如下样式规则：1.p.noDisplay display:none;然后，在页面的主体中添加如下代码：1.普通段落 1/1 2.普通段落 2/2 3.普通段落 3/3 上述代码在浏览器中的显示效果如图-21 所示。图-21由图-21 可知，设立了 元素的显示类型为 none 之后，该元素就不再显示，且不占用空间，就像没有定义过同样。由这
48、些示例可以看出，我们可以使用 display 属性来定义元素生成的显示框类型，从而实现页面布局中的某些特殊显示效果。4.2.4.2.光标光标4.2.1.4.2.1.光标光标默认情况下，光标会根据用户的操作发生改变。比如，当鼠标悬停在一个链接上时，光标将从指针形状变为手状形状；当鼠标悬停在文本区域时，会显示 I形状；而当鼠标悬停在一个按钮上时，光标会显示为箭头。可以使用 cursor 属性指定显示给用户的鼠标光标类型（形状）。比如，当一个图像可以被点击，甚至可以作为表单上的提交按钮时，则可以使用此属性修改光标的形状为手状，这样可认为用户提供一种可视化的暗示，提醒他们可以单击该图像。4.2.2.c
49、ursor4.2.2.cursor 属性属性cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，该属性常用的取值有：auto、default、pointer、crosshair、move、text、wait、help 和 URL 等。其中，auto 值表达由浏览器自动根据元素类型设立光标形状，而 default、pointer、crosshair、move、text、wait 和 help 都容易理解，不再赘述。url 值是指可认为元素定义一个自定义的图标作为光标形状，只是使用url时，最佳在列表的末端始终定义一种普通的光标，这样，当没有由 URL 定义的可用光标时还可以替
50、代显示普通光标。比如，我们可以这样定义：1.div.definedCursor cursor:url(image/s1.cur)default;default;5.5.列表样式列表样式5.1.5.1.列表样式列表样式5.1.1.5.1.1.列表项标志列表项标志 list-style-typelist-style-type在设立列表的外观中，最简朴、最常用同时也是被各浏览器支持的最佳的属性就是设立列表项的标志类型。list-style-type 属性用于控制列表中列表项标志的样式。该属性的取值需要依据列表的类型。例如，在一个无序列表中，列表项的标志是出现在各列表项旁边的圆点，而在有序列表中，标志