商务网页第15课课件.ppt

1、4.3 用CSS设置图像效果l 使用CSS设置图像，会取得更好的显示效果。在CSS中引用图像主要分为嵌入排列图像、浮动图像、背景图像3种应用场景。4.3.1 引用图像l 采用CSS引用图像需要在HTML文档头中定义CSS样式，可以采用内部样式和外部样式。如果采用CSS外部样式，外部样式有CSS文件存放路径和图像文件存放路径，需要注意文件引用的位置。l 在CSS中引用图像需要使用图像标签选择符“img”或自定义的类选择符、ID选择符，及其相关属性。l CSS中图像样式的设置方法为选择符属性1:属性1值;属性2:属性2值;l CSS常用的图像属性如表4.7所示。表4.7 CSS设置图像常用属性表属

2、性值描述widthpixels%图像宽度，可以按照像素或者百分比的形式表达heightpixels%图像高度，可以按照像素或者百分比的形式表达floatleftRightnone元素向左浮动元素向右浮动元素不浮动borderPixels边框的宽度值Thin细边框Medium中等宽度边框Thick粗边框double双边框color设定边框的颜色marginpixels外边距，按照上、右、下、左的外边距顺序定义，例如：“5px 6px 3px 7px”表示上5右6下3左7（px）“5px 6px”表示上5右6（px）“5px”表示4个外边距均为5（px）l 采用CSS引用图像，根据选择符的定义形式

3、不同，引用方法也不同：CSS引用图像示例.floatright height:auto;float:right;.big height:260px;.small height:60px;CSS引用图像示例 4.3.2 图文混排l 在HTML中，图文混排比较困难。但在CSS中，可以实现很好的图文混排效果。l 文字环绕是网页中最常见的图文混排形式，设置文字环绕图文混排需要使用图像选择符“img”及其“float”属性，将图像和文本放在同一个文字类容器中。设置方法为imgfloat:属性值;属性1:属性1值;属性2:属性2值;l 定义好图像样式后，在引用图像和文本的时候，将文本和图像放在一个容器中即

4、可，引用的方法为 文本内容CSS设置图文混排 img float:right;width:200px;p font-family:楷体;font-size:18px;在HTML中，图文混排比较困难。但在CSS中，可以实现很好的图文混排效果。文字环绕是网页中最常见的图文混排形式，设置文字环绕图文混排需要使用图像选择符“img”及其“float”属性，以及文字类选择符及其相关属性。4.3.3 设置背景图像l 在HTML中设置网页背景图片的方式为，而在CSS中设置背景图片的属性为“background-image”，该属性不但可以设置网页背景图片，还可用于设置表格、表格单元的背景图像。l 在CSS中

5、设置背景图像需要使用容器类标签（如网页、表格、表格单元等）选择符，及其“background-image”属性，以及其他相关属性。常见的CSS背景图像属性如表4.8所示。表4.8 CSS背景图像常见属性表属性值描述background文件路径名称在一个声明中设置所有的背景属性background-image文件路径名称设置元素的背景图像background-sizepixels%covercontain固定数值百分比把背景图像扩展至完全覆盖背景区域把图像扩展至最大尺寸以完全适应内容区域background-positiontop lefttop centertop rightcenter le

6、ftcenter centercenter rightbottom leftbottom centerbottom right设置背景图像的开始位置x%y%从左上角计算容器的百分比值。第1个值是水平位置，第2个值是垂直位置。左上角是 0%0%。右下角是100%100%。如果您仅规定了一个值，另一个值将是50%。xpos ypos从左上角计算容器的像素坐标，第1个值是水平位置，第2个值是垂直位置。左上角是“0 0”，单位是像素或任何其他的CSS单位。如果仅规定了一个值，另一个值将是50%，可以混合使用%和position值background-repeatrepeatrepeat-xrepeat

7、-y no-repeat图像重复（平铺），在position的位置重复图像横向重复图像纵向重复不重复background-clipborder-boxpadding-boxcontent-box背景被裁剪到边框盒背景被裁剪到内边框背景被裁剪到内容框background-originpadding-boxborder-boxcontent-box背景图像相对于内边框来定位背景图像相对于边框盒来定位背景图像相对于内容框来定位属性值描述l CSS设置背景图像样式的方法为background-image:url(图像名称);属性1:属性1值;属性2:属性2值;l 在HTML中的引用方法为或者 或者l

8、采用CSS外部链接样式设置背景图像，代码分为HTML文档、CSS文档两部分。（1）HTML代码如下：CSS设置背景图像示例 CSS设置背景图像示例（2）CSS代码（保存在cssbackground.css文件中）如下：body background-image:url(./photo/img1.jpg);background-size:cover;background-repeat:no-repeat;练习：制作一个采用CSS技术设置图像的网页，写出完整的HTML及CSS代码，具体要求如下。（1）采用内部样式制作。（2）采用标签选择符定义图像的显示样式：图像文件名为“img1.gif”，存放在网页源文件同级目录下，图像宽度300px，图像向左浮动。（3）采用标签选择符定义网页背景图像样式，背景图像名称为“img2.jpg”，存放在网页源文件同级目录下。（4）制作主文档，按照背景图像样式设置背景图像（img2.jpg）；定义段落，首先在段落中按照图像选择符样式引用图像文件“img1.gif”，然后显示一段文本，文本的内容为“文字环绕是网页中最常见的图文混排形式，设置文字环绕图文混排需要使用图像选择符img及其float属性，将图像和文本放在同一个文字类容器中”。