CSS图像属性课件

CSS图像属性

图像基本设置重点难点图像大小图像内外边距图像边框左漂右漂图像对齐背景图像属性给图像添加投影一、图像基本设置1、图像大小设置（width/height）img{width:150;height:150;}<imgsrc=“name.gif">参考1图像大小设置.html2、图像边框

border-top-width:1px; border-top-style:solid; border-top-color:#FF0000;border-top:10px

solidred;简写方法：粗细样式颜色图像边框样式border-top-style:solid实线groove凹槽double双线ridge凸槽dashed虚线inset凹边dotted点状线outset凸边边框练习参考2边框练习.html3、图像左漂右漂（left/right）

img{

float:left;

}

<imgsrc="cup.gif">注意：只能设置左右漂，不能设置居中用于图文混排参考3左漂右漂.html4、设置图像的外边距

img{margin:数值;}例如：margin：20px；表示上下左右边距都为20margin-top上边距

margin-right右边距

margin-bottom下边距

margin-left左边距参考4外边距.html图像topleftrightbottom书写顺序：上右下左如何简写？margin:20px;=margin:20px20px20px20px；margin:30px40px；=margin:30px40px30px40px;margin:30px40px50px;=margin:30px40px50px40px;

省略规则：如果margin只有一个值，按照值的顺序为margin:top;如果margin只有两个值，按照值的顺序为margin:topright;如果margin只有三个值，按照值的顺序为margin:toprightbottom;margin练习Margin:50px;Margin:35px20px70px;Margin:50px90px;Margin:20px65px;Margin:10px55px30px;Margin:20px;Margin:45px25px60px;Margin:15px25px;5、设置图像的内边距

img{padding:数值;(边框到内容的距离)}例如：padding：20px；表示上下左右边距都为20

padding-top上内边距

padding-right右内边距

padding-bottom下内边距

padding-left左内边距img{border:5pxsolid#ff0000;padding:10px;}参考5内边距.html小技巧：给图像设置padding时在FF里正常显示，在IE里却不可以，怎样解决这一问题呢？方法很简单在代码的开始处写入：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">参考5内边距.html6、图像水平对齐：错误方法：img{text-align:center;}正确方法：p/div{text-align:center;}<p或div><imgsrc=“one.jpg”/></p或/div>7、图像旁的文字垂直对齐：vertical-align:top/middle/bottom;参考6水平对齐.html参考7垂直对齐.html二、背景图像1、设置背景图像

<styletype="text/css">body{background-image:url(images/bg.gif)；}</style>参考8背景图像.html2、设置背景图像平铺

background-repeat:

repeat水平垂直两个方向平铺

no-repeat不平铺

repeat-x水平方向平铺

repeat-y垂直方向平铺参考9背景图像平铺.html3、设置背景颜色

background-color:#3399ff；4、设置背景图像的位置

background-position:bottomright；注意：一个值表示水平方向位置，一个值表示垂直方向位置。参考10背景颜色.html参考11、12背景图像位置.html5、设置图像背景滚动/固定

background-attachment:scroll/fixed；body{background-image:url(images/bg.gif);background-attachment:fixed;}参考13背景固定文字滚动.html6、背景样式简写background-image:url(images/bg.gif)；background-repeat:no-repeat；background-color:#3399ff；background-position:bottom

right；backgroun