商务网页第15课.pptxVIP

4.3 用CSS设置图像效果使用CSS设置图像，会取得更好的显示效果。在CSS中引用图像主要分为嵌入排列图像、浮动图像、背景图像3种应用场景。 4.3.1 引用图像采用CSS引用图像需要在HTML文档头中定义CSS样式，可以采用内部样式和外部样式。如果采用CSS外部样式，外部样式有CSS文件存放路径和图像文件存放路径，需要注意文件引用的位置。在CSS中引用图像需要使用图像标签选择符“img”或自定义的类选择符、ID选择符，及其相关属性。CSS中图像样式的设置方法为选择符｛属性1:属性1值;属性2:属性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）CSS常用的图像属性如表4.7所示。表4.7 CSS设置图像常用属性表采用CSS引用图像，根据选择符的定义形式不同，引用方法也不同：img src=图像名img class=类选择符 src=图像名img id=id选择符 src=图像名htmlheadtitleCSS引用图像示例/titlestyle .floatright { height: auto; float:right; } .big { height:260px; } .small { height: 60px; }/style/headbody h2 align=centerCSS引用图像示例/h2 p img class=floatright src=photo/photo1.jpg/ br img class=big src=photo/photo1.jpg/ img class=small src=photo/photo1.jpg/ br img class=small src=photo/photo1.jpg/ /p /body/html4.3.2 图文混排在HTML中，图文混排比较困难。但在CSS中，可以实现很好的图文混排效果。文字环绕是网页中最常见的图文混排形式，设置文字环绕图文混排需要使用图像选择符“img”及其“float”属性，将图像和文本放在同一个文字类容器中。设置方法为img{float:属性值;属性1:属性1值;属性2:属性2值;……}定义好图像样式后，在引用图像和文本的时候，将文本和图像放在一个容器中即可，引用的方法为p img src=图像文件名/ 文本内容/phtmlheadtitleCSS设置图文混排/titlestyle img{ float:right; width:200px; } p{ font-family:楷体; font-size:18px; }/style/headbodyimg src=photo/photo1.jpg/在HTML中，图文混排比较困难。但在CSS中，可以实现很好的图文混排效果。文字环绕是网页中最常见的图文混排形式，设置文字环绕图文混排需要使用图像选择符“img”及其“float”属性，以及文字类选择符及其相关属性。/body/html4.3.3 设置背景图像在HTML中设置网页背景图片的方式为body background=图片URL，而在CSS中设置背景图片的属性为“background-image”，该属性不但可以设置网页背景图片，还可用于设置表格、表格单元的背景图像。在CSS中设置背景图像需要使用容器类标签（如网页、表格、表格单元等）选择符，及其“background-image”属性，以及其他相关属性。常见的CSS背景图像属性如表4.8所示。表4.8 CSS背景图像常见属性表属性值描述background文件路径名称在一个声明中设置所有的背景属性background-image文件路径名称设置元素的背景图像background-sizepixels%covercontain固定数值百分比把背景图像扩展至完全覆盖背景区域把图像扩展至最大尺寸以完全适应内容区域background-positiontop lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right设置