CSS图像属性概要.ppt

CSS图像属性 图像基本设置 重点难点 图像大小 图像内外边距 图像边框 左漂右漂 图像对齐 背景图像属性 给图像添加投影 一、图像基本设置 1、图像大小设置（width/height） img{ width:150; height:150; } img src=“name.gif 参考1图像大小设置.html 2、图像边框 border-top-width: 1px; border-top-style: solid; border-top-color: #FF0000; border-top:10px solid red; 简写方法： 粗细 样式 颜色 图像边框样式 border-top-style: solid 实线 groove 凹槽 double 双线 ridge 凸槽 dashed 虚线 inset 凹边 dotted 点状线 outset 凸边 边框练习 参考2边框练习.html 3、图像左漂右漂（left/right） img{ float:left; } img src=cup.gif 注意：只能设置左右漂，不能设置居中 用于图文混排 参考3左漂右漂.html 4、设置图像的外边距 img{ margin:数值; } 例如：margin：20px； 表示上下左右边距都为20 margin-top 上边距 margin-right 右边距 margin-bottom 下边距 margin-left 左边距 参考4外边距.html 图像 top left right bottom 书写顺序：上右下左 如何简写？ margin:20px; =margin:20px 20px 20px 20px； margin:30px 40px； =margin:30px 40px 30px 40px; margin:30px 40px 50px; =margin:30px 40px 50px 40px; 省略规则： 如果 margin 只有一个值，按照值的顺序为 margin:top; 如果 margin 只有两个值，按照值的顺序为 margin:top right; 如果 margin 只有三个值，按照值的顺序为 margin:top right bottom; margin练习 Margin:50px; Margin:35px 20px 70px; Margin:50px 90px; Margin:20px 65px; Margin:10px 55px 30px; Margin:20px; Margin:45px 25px 60px; Margin:15px 25px; 5、设置图像的内边距 img{ padding:数值;(边框到内容的距离) } 例如：padding：20px； 表示上下左右边距都为20 padding -top 上内边距 padding -right 右内边距 padding -bottom 下内边距 padding -left 左内边距 img{ border:5px solid #ff0000; padding:10px; } 参考5内边距.html 小技巧： 给图像设置padding时在FF里正常显示，在IE里却不可以，怎样解决这一问题呢？ 方法很简单在代码的开始处写入： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 参考5内边距.html 6、图像水平对齐： 错误方法：img {text-align: center;} 正确方法：