轻松学HTMLCSS之x

《轻松学HTMLCSS之x》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章图片网页中的图片具有直观和美化的作用，是网页设计中必不可少的元素。它既是文字表达的有力补充，又是网页美化装饰中最具渲染力的元素。这一章我们将讲解如何在网页中插入图片，美化图片等内容，从而使网页丰富多彩更显生动，进而激发出浏览者的兴趣。4.1网页图片格式图片的格式有很多。但常见的网页图片格式只有三种：GIF、JPG、PNG。下面详细讲解图片的这三种格式。1.GIF格式：GIF格式的文件后缀名是.gif。2.JPG格式：JPG格式的文件后缀名是.jpg。3.PNG格式：PNG格式的文件后缀名是.png。4.2图片的构建在HTML

2、中，图片由标签定义。是空标签，它只包含属性，并且没有闭合标签。下面我们就来讲解如何在网页中嵌入图片。4.2.1选择路径（src）为了在页面上显示图片，我们需要使用源属性src。src指“source”（来源）的缩写。源属性的值是图片的URL地址。定义图片的语法是：4.2.2设定低分辨率（lowsrc）如果用户的浏览器速度很慢，网页设计者可以在页面中为其插入一张低分辨率的图像以供显示。src和lowsrc定义的图片并不能共存，当src定义的图片不显示时，才会显示lowsrc定义的图片。定义语法如下：4.2.3设定

3、替换文本（alt）alt属性用来为图片定义一串预备的可替换的文本。替换文本属性的值是用户定义的。定义语法如下：4.3调整图片在网页设计过程中，可以自行定义图片的高度和宽度，排列位置等，使得图片为整个网页添加效果。下面我们就来详细如何对图片进行调整。4.3.1选择宽度和高度为了在网页中能够更好的显示图片，我们常常设定图片的宽度和高度。定义语法如下：4.3.2设定排列（align）图片和文字之间的排列通过align属性来设定。图片的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右

4、；而相对文字对齐方式是指图片与一行文字的相对位置对齐。定义语法如下：4.3.2设定排列（align以下描述的是空间位置，这里使用图形和文字作为参考。“基线”、“底部”、“绝对底部”效果相同，是指图片底端和文字的底端对齐。“顶端”、“文本上方”方式是指图片顶端和文字行最高字符的顶端对齐。“中间”方式是指图片的中间线和文字的底端对齐。“绝对中间”是指图片的中间线和文字的中间线对齐。4.3.2设定排列（align其中，图片的顶端、中间、底端的位置如图4.4所示。文字的顶端、中间、底端的位置如图4.5所示。4.3.3设定边框（border

5、）默认的图片是没有边框的，通过属性可以为图片添加边框线。我们可以设置边框线的宽度，但边框的颜色是不可以调整。当图片上没有添加链接的时候，边框的颜色为黑色；当图片添加了链接时，边框的颜色和链接文字的颜色一致，默认为深蓝色。定义语法如下：4.3.4设定水平间距和垂直间距图像和文字之间的距离是可以调整的，使用属性hspace调整图像和文字之间的左右距离，属性vspace调整图像和文字之间的上下距离。这样可以非常有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。定义语法如下：4.4网页背景图片在网页制作过程中，背景的设置多种多样，可

6、以用纯色作为背景，也允许使用背景图像创建相当复杂的效果。要把图片放入背景，有两种方式设置，下面我们分别来介绍在HTML中和CSS中的设置方式。4.4.1为网页背景添加图片背景图片指的是在网页背景中插入图片。我们可以根据自身要求进行定义，下面我们就来介绍如何为网页背景添加图片。1.在HTML中，我们使用background属性，对背景图片进行设置。定义语法如下：为网页背景添加图片2.在CSS中，我们通常使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。如果需

7、要设置一个背景图像，必须为这个属性设置一个URL值，定义语法如下：4.4.2指定背景图片应用的范围背景图片的应用范围非常广。不仅可以用于body中对整个网页背景进行定义，还可以对网页内部元素进行定义，如段落背景等。下面我们就来详细介绍背景图片的应用范围。1.段落背景图片的应用2.行内元素背景图片的应用4.4.3指定图片平铺方式如果需要在页面上对背景图片进行平铺，可以使用background-repeat属性。属性值repeat导致图片在水平垂直方向上都平铺，与以往背景图片的通常做法一样。repeat-x和repeat-y分别导致图

8、片只在水平或垂直方向上重复，no-repeat则不允许图片在任何方向上平铺。定义语法规则如下：4.4.4为背景图片定位background-position属性来改变图片在背景中的位置。定义语法规则如下：为background-position属性