网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS属性的应用.pptx

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。CSS3的属性CSS属性的应用《网页设计与制作教程Web前端开发第7版》

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.8CSS属性的应用5.8.1设置图像样式CSS样式中有关图像控制的常用属性，见表5-3。

5.8CSS属性的应用1.图像缩放【例5-20】设置图像缩放，本例文件5-20.html的显示效果，如图5-23所示。

5.8CSS属性的应用!DOCTYPEhtmlhtmlheadmetacharset=utf-8title设置图像的缩放/titlestyletype=text/css#box{padding:10px;width:500;height:200px;border:2pxdashed#FF8C00;}img.per{width:30%;/*相对宽度为30%*/height:40%;/*相对高度为40%*/}img.pixel{width:180px;/*绝对宽度为180px*/height:200px;/*绝对高度为200px*/}/style/headbodydivid=boximgsrc=images/sunshine.jpg!--图像的原始大小--imgsrc=images/sunshine.jpgclass=per!--相对于父元素缩放的大小--imgsrc=images/sunshine.jpgclass=pixel!--绝对像素缩放的大小--/div/body/html

5.8CSS属性的应用2.图像边框例如以下示例代码：imgsrc=images/sunshine.jpgborder=0!--显示为没有边框--imgsrc=images/sunshine.jpgborder=1!--设置边框的粗细为1px--imgsrc=images/sunshine.jpgborder=2!--设置边框的粗细为2px--imgsrc=images/sunshine.jpgborder=3!--设置边框的粗细为3px--通过浏览器的解析，图像的边框粗细从左至右依次递增，效果如图5-24所示。

5.8CSS属性的应用【例5-21】设置图像边框，本例文件5-20.html的显示效果，如图5-25所示。

5.8CSS属性的应用!DOCTYPEhtmlhtmlheadmetacharset=utf-8title/titlestyletype=text/css.test1{border-style:dotted;/*点画线边框*/border-color:#fd8e47;/*边框颜色为桔红色*/border-width:4px;/*边框粗细为4px*/margin:5px;}.test2{border-style:dashed;/*虚线边框*/border-color:blue;/*边框颜色为蓝色*/border-width:2px;/*边框粗细为2px*/margin:5px;}.test3{border-style:soliddotteddasheddouble;/*4边的线型依次为实线、点画线、虚线和双线边框*/border-color:redgreenbluepurple;/*4边的颜色依次为红色、绿色、蓝色和紫色*/border