HTML自学历程二：关于页面文字及背景的基本设置

文字与背景是一个网页的基础或者叫做基本属性，那么如何做到灵活地选取恰当的搭配形式，就需要我们掌握其基本的设置。

首先我们想到的是文字，对于一个页面，我们要对其选取恰当的尺寸、字形、颜色。

在这之前，我们先提一个标签<font>标签，它是特地用来规定文本的字体、字体尺寸、字体颜色的，他有三个属性，分别为size、face、color,即尺寸、字形、颜色。具体的用法是将文本内容放置于<font></font>中，并将属性及属性值放入<font>标签中，例如：

<font size="20px" face=''verdana" color="red">html5</font>

当然这样相当麻烦，对于网页中的每一段文本内容，假如我们都这样做的话，将会使得增加代码量，这就导致降低了HTML代码的可读性，那么如何解决这种问题呢？

其实呢，我们平时是不会这样用了，HTML有另外的设置方法：对于文本尺寸、字形、颜色，我们分别对应有三种属性：font-size、font-family、color，我们可以将这些属性放置于任意的元素块中，例如我们可以这样：

<p style="font-size:80px;font-family:verdana;color:green">html5</p>

或者我们可以设置样式表，并将这些属性写入样式表中，例如：

<style>       p{font-size:80px;font-family:verdana;color:green}</style>

或者我们也可以建立一个css文件，将所有的样式表放置在其中，例如：

#header{font-size:80px;font-family:verdana;color:green}

除此之外，要注意的是，对于尺寸、颜色的值，我们有不同的表示方式：在<font>标签中，设置文本大小时，即用size属性设置时，其值是数字，且不能带单位，而用font-size，需要用单位，一般为px或者是用百分数表示(除此之外，其值还可以是：xx-small、x-small、small、medium、large x-large、xx-large，它们分别表示不同的大小)；而对于颜色，其的表示方法也是多种多样的，我们可以用十六进制数表示，也可以用颜色的rgb格式表示，甚至我们可以直接写颜色名也是可以的，比如"green"等。

再之，就是网页背景的设置，如何搭配设置网页的背景也是网页设计必须掌握的一项技能：

对于背景设置，我们可以通过一个background属性进行设置，其值可以包含背景颜色、图像的位置、图片的尺寸、是否重复背景图像、背景图像的定位区域、背景的绘制区域、背景图像是否固定或者跟随页面其余部分滚动、要使用的背景图像，我们会想，这个属性为什么可以包含这么多属性值，其实它不单指一个属性，它是几个属性的一个总称或是简称，具体的属性即：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment、background-image。和文本颜色的设置类似，这些属性的用法有两种：放置于任意块中即可或者在样式表中进行设置。以下是各属性的具体用法(以下以样式表为例)：

①background-color(背景颜色)：

div{background-color:bule}

其中颜色的表示方法同上

②background-position(图片的位置):提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

div{background-position:center}

③background-size(图片的尺寸):

div{background-size:80px 60px}

④background-repeat(是否重复背景图片):

div{background-repeat:no-repeat}

⑤background-origin(背景图片的定位区域):

div{background-origin:content-box}

⑥background-clip(规定背景的绘制区域)

div{background-clip:content-box}

⑦background-attachment(背景图像是否固定或者跟随页面其余部分滚动)

div{background-attachment:fixed}

⑧background-image(要是用的背景图片)

div{background-image:url(jkl.jpg)}

对于背景的设置，详见：http://www.w3school.com.cn/cssref/pr_background.asp