轻松学HTMLCSS之课件

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

2、面我们就来讲解如何在网页中嵌入图片。轻松学HTMLCSS之为了在页面上显示图片，我们需要使用源属性src。src指“source”（来源）的缩写。源属性的值是图片的URL地址。定义图片的语法是：轻松学HTMLCSS之如果用户的浏览器速度很慢，网页设计者可以在页面中为其插入一张低分辨率的图像以供显示。src和lowsrc定义的图片并不能共存，当src定义的图片不显示时，才会显示lowsrc定义的图片。定义语法如下： 轻松学HTMLCSS之alt属性用来为图片定义一串预备的可替换的文本。替换文本属性的值是用户定义的。定义语法如下：轻松学HTMLCSS之在网页设计过程中，可以自行定义图片的高度和宽度

3、，排列位置等，使得图片为整个网页添加效果。下面我们就来详细如何对图片进行调整。轻松学HTMLCSS之为了在网页中能够更好的显示图片，我们常常设定图片的宽度和高度。定义语法如下：轻松学HTMLCSS之图片和文字之间的排列通过align属性来设定。图片的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图片与一行文字的相对位置对齐。定义语法如下：轻松学HTMLCSS之以下描述的是空间位置，这里使用图形和文字作为参考。“基线” 、“底部” 、“绝对底部” 效果相同，是指图片底端和文字的底端对齐。“顶端” 、“文本上方”方式

4、是指图片顶端和文字行最高字符的顶端对齐。“中间” 方式是指图片的中间线和文字的底端对齐。“绝对中间”是指图片的中间线和文字的中间线对齐。轻松学HTMLCSS之其中，图片的顶端、中间、底端的位置如图4.4所示。文字的顶端、中间、底端的位置如图4.5所示。轻松学HTMLCSS之默认的图片是没有边框的，通过属性可以为图片添加边框线。我们可以设置边框线的宽度，但边框的颜色是不可以调整。当图片上没有添加链接的时候，边框的颜色为黑色；当图片添加了链接时，边框的颜色和链接文字的颜色一致，默认为深蓝色。定义语法如下：轻松学HTMLCSS之图像和文字之间的距离是可以调整的，使用属性hspace调整图像和文字之间

5、的左右距离，属性vspace调整图像和文字之间的上下距离。这样可以非常有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。定义语法如下：轻松学HTMLCSS之在网页制作过程中，背景的设置多种多样，可以用纯色作为背景，也允许使用背景图像创建相当复杂的效果。要把图片放入背景，有两种方式设置，下面我们分别来介绍在HTML中和CSS中的设置方式。轻松学HTMLCSS之背景图片指的是在网页背景中插入图片。我们可以根据自身要求进行定义，下面我们就来介绍如何为网页背景添加图片。1.在HTML中，我们使用background属性，对背景图片进行设置。定义语法如下：轻松学HTMLCSS之2.在CSS中，我们

6、通常使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值，定义语法如下：轻松学HTMLCSS之背景图片的应用范围非常广。不仅可以用于body中对整个网页背景进行定义，还可以对网页内部元素进行定义，如段落背景等。下面我们就来详细介绍背景图片的应用范围。1.段落背景图片的应用2.行内元素背景图片的应用轻松学HTMLCSS之如果需要在页面上对背景图片进行平铺，可以使用background-repeat属性。属性值repeat导致图片在水平垂直方向上都平铺，与以往背景图片的

7、通常做法一样。repeat-x和repeat-y分别导致图片只在水平或垂直方向上重复，no-repeat则不允许图片在任何方向上平铺。定义语法规则如下：轻松学HTMLCSS之background-position属性来改变图片在背景中的位置。定义语法规则如下：轻松学HTMLCSS之为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。下面逐一进行介绍。1.定位关键字：位置关键字可以按任何顺序出现，只要保证不超过两个关键字一个对应水平方向，另一个对应垂直方向。轻松学HTMLCSS之2.百分数值：百分数值的表现方式更为复杂，定义语法规则如下：3.长度值：长度值是从元素内边距区左上角的偏移。偏移点是图片的左上角。定义语法规则如下：轻松学HTMLCSS之如果文档比较长，那么当文档向下滚动时，背景图片也会随之滚动。当文档滚动到超过图片的位置时，图片就会消失。而background-attachment属性就是防止这种滚动的。通过这个属性，可以调节图片相对于可视区是固定的（fixed），因此不会受到滚动的影响。定义语