使用CSS样式表设置图片效果.ppt

使用CSS样式表设置图片效果,回顾,CSS中如何设置文字样式？从哪些方面？在Google公司Logo案例中，它的实现思路是怎样的？CSS中如何设置段落样式？,会使用CSS对图片边框进行设置会使用CSS对图片进行对齐会使用CSS对图片进行剪切会使用CSS实现图片替代文本会使用CSS对图文进行混排图文实例：八仙过海,本讲目标,导入,首先，在网络世界中，各种各样的图片组成了丰富多彩的页面，传达给用户各种信息。其次，图片的使用方式大体分为三种：1、作为单独的图片本身存在；2、作为背景图片存在；3、作为浮动元素存在。本讲中，我们仅涉及到第一种情况，即以 标记的方式存在于网页中，并且占位。,图片边框-1,如上所示，我们发现通过border属性可以为标记的图片添加边框。,border-style:dotted;/*点画线*/border-color:#FF9900;/*边框颜色*/border-width:5px;/*边框粗细*/,问题：边框都是黑色的，风格单一，只能在边框粗细上调整，那CSS对于图片边框都有哪些属性进行设置呢？,案例演示2,案例演示1,图片边框-2,CSS还可以分别设置4个边框的不同样式,border,border-left/*左边框*/border-right/*右边框*/border-top/*上边框*/border-bottom/*下边框*/,border-top-color/*上边框颜色*/border-top-style/*上边框类型*/border-top-width/*上边框粗细*/,如果4个边框都采用右侧的写法会如何呢？,案例演示1,案例演示2,图片的对齐-1,横向水平对齐，分为左、中、右3种,实现图片水平对齐，不能直接对图片设置text-align属性，而是通过对父元素添加该属性实现的。,案例演示,图片的对齐-2,纵向垂直对齐，通过vertical-align属性,案例演示2,案例演示1,图片的剪切-1,在网站设计中，有时候会遇到对一张图片做多处使用的情况。例如在子页面中以200*200尺寸显示，而在首页由于所给的空间不够，只允许显示200*100的尺寸，那该怎么办呢？,CSS能很好的实现图片的剪切,图片的剪切-2,在此，介绍一个新属性：overflow:hidden（将超出容器的部分隐藏起来的作用）,案例演示,图片替代文本,什么时候才会用“图片替代文本”呢？,案例演示,1、使用特殊字体制作的图片作为文章标题更为吸引人，改善阅读环境；2、不破坏原有文本结构，不影响搜索引擎的收录。,图文混排,文章段落中经常需要插入图片，我们通过两种方式对比进行了解：,第一种方式：传统的表格式布局中，插入一个表格，在表格的单元格中插入图片，通过对单元格设置align属性来控制图片居中、居左、居右显示。,第二种方式：在CSS布局中，我们采用新的思路实现，主要是通过对图片设置float属性。,案例演示,图文实例：八仙过海,案例演示,千里之行 始于足下,