2.4 网页的主体标记body

网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置,包括网页的背景设置、文字属性设置和链接设置等。

2.4.1 网页背景色bgcolor

对大多数浏览器而言,其默认的背景颜色为白色或灰白色。使用<body>标记的bgcolor属性可以为整个网页定义背景颜色。

语法:

image039_3

说明:

在该语法中的body就是页面的主体标记,bgcolor的值可以是一个已命名的颜色,也可以是十六进制的颜色值。

举例:

image039_4

在代码中加粗部分的代码标记是为页面设置背景颜色,在浏览器中预览效果,如图2.4所示。

image040_1

图2.4 设置页面的背景颜色

背景颜色在网页上非常常见,如图2.5所示的网页使用了大面积的黄色背景。

image040_2

图2.5 使用背景颜色的网页

2.4.2 网页背景图片background

使用恰当的图片作为背景,能够使页面看上去更加生动美观。使用background属性可以将图片设置为背景,还可以设置背景图片的平铺方式、显示方式等。

语法:

image040_3

说明:

图片的地址可以是相对地址,也可以是绝对地址。在默认情况下,用户可以省略此属性,这时图片会按照水平和垂直的方向不断重复出现,直到铺满整个页面。

举例:

image041_1

在代码中加粗部分的代码标记为设置的网页背景图片,在浏览器中预览可以看到背景图像,如图2.6所示。

image041_2

图2.6 页面的背景图像

在网络上除了可以看到各种背景色的页面之外,还可以看到一些以图片作为背景的网页,如图2.7所示的网页使用了背景图像。

image041_3

图2.7 使用了背景图像的网页

2.4.3 文字颜色text

可以通过text标记来设置文字的颜色。在没有对文字的颜色进行单独定义时,这一属性可以对页面中所有的文字起作用。

语法:

image042_1

说明:

在该语法中,text的属性值与设置页面背景色的相同。

举例:

image042_2

在代码中加粗部分的代码标记为设置的文字颜色,在浏览器中预览可以看到文档中文字的颜色,如图2.8所示。

image042_3

图2.8 设置文字的颜色

在网页中需要根据网页整体色彩的搭配来设置文字的颜色,如图2.9所示的文字和整个网页的颜色相协调。

image043_1

图2.9 文字的颜色

超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的,正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多,在默认情况下,浏览器以蓝色作为超链接文字的颜色,访问过的文字则颜色变为暗红色。可以通过link参数修改链接文字的颜色。

语法:

image043_2

说明:

这一属性的设置与前面几个设置颜色的参数类似,都是与body标签放置在一起,表明它对网页中所有未单独设置的元素起作用。

举例:

image043_3

在代码中加粗部分的代码标记是为链接文字设置颜色,在浏览器中预览效果,可以看到链接的文字已经不是默认的蓝色,如图2.10所示。

image044_1

图2.10 设置链接文字的颜色

使用alink可以设置正在访问的文字颜色,举例如下。

image044_2

在代码中加粗部分的代码标记是为单击链接的文字时设置颜色,在浏览器中预览效果,可以看到单击链接的文字时,文字已经改变了颜色,如图2.11所示。

image044_3

图2.11 单击链接文字时的颜色

使用vlink可以设置访问后的链接文字的颜色,举例如下。

image044_4

在代码中加粗部分的代码标记是为链接的文字设置访问后的颜色,在浏览器中预览效果,可以看到单击链接后文字的颜色已经发生改变,如图2.12所示。

image045_2

图2.12 访问后的链接文字的颜色

在网页中,一般文字上的超链接都是蓝色(当然,也可以自己设置成其他颜色),文字下面有一条下画线。当移动鼠标指针到该超链接上时,鼠标指针就会变成一只手的形状,这时候用鼠标左键单击,就可以直接跳到与这个超链接相连接的网页。如果已经浏览过某个超链接,这个超链接的文本颜色就会发生改变,图2.13所示为网页中的超链接文字颜色。

image045_3

图2.13 网页中的超链接文字颜色

2.4.5 边距margin

在网页中可以设置页面与浏览器边框之间的距离,包括上边距和左边距。

语法:

image045_4

说明:

在默认情况下,边距的值以像素为单位。

举例:

image046_1

在代码中加粗部分的代码标记是设置上边距和左边距,在浏览器中预览效果,可以看出定义的边距效果,如图2.14所示。

image046_2

图2.14 设置的边距效果

image03提示

一般网站的页面左边距和上边距都设置为0,这样看起来页面不会有太多的空白。