文档介绍：第十章用CSS设置图片效果
图片样式
在HTML中可以直接通过<img>标记的border属性值为图片添加边框,从而控制边框的粗细,当设置该值为0时,则显示为没有边框,该方法设置的边框都是黑色,而且风格十分单一,都是实线,仅仅只是在边框粗细上能够进行调整。
在CSS中可以通过border属性为图片添加各式各样的边框,border-style定义边框的样式如虚线、实线或点线等,在Dreamweaver中通过语法提示功能,便可轻松获得各种边框样式的值。如dotted(点画线)、dashed(虚线)、solid(实线)、groove(双线等)等。例:
<style>
<!--
.one{border-style:dotted;border-color:#FF9900;border-width:10px;}
.two{border-style:dashed;border-color:blue;border-width:20px;}
-->
</style>
<body>
<img src="" class="one">
<img src=" " class="two">
</body>
显示效果为第1幅图片设置的是金黄色、10像素宽的点划线,第2幅图片设置的是蓝色、20像素宽的虚线。
在CSS中还可以分别设置4个边框的不同样式,即分别设定border-left、border-right、border-top和border-bottom的样式。例:
<style>
<!--
img{
border-left:dotted #FF990 5px ; border-right:dashed #33 2px ;
border-top:solid #CC00FF 10px;border-bottom:groove #666666 15px;}
-->
</style>
<body>
<img src="">
</body>
CSS控制图片的大小与HTML一样,也是通过width和height两个属性来实现的。所不同的是CSS中可以使用更多的值,如前提到的相对值和绝对值等。例如设置width的值为50%时,图片的宽度将调整为父元素宽度的一半。例:
<style>
.one{width:50%;}
</style>
<body>
<img src="" class="one">
</body>
显示效果时,因为设定的是相对大小(这里即相对于body的宽度),因此当拖动浏览器窗口改变其宽度时,图片的大小也会相应地发生变化。
这里需要指出的是,当仅仅设置了图片的width属性,而没有设置height属性时,图片本身会自动等纵横比缩放,如果只设定height属性也是一样的道理。只有当同时设定width和height属性时才会不等比缩放。
当图片与文字同时出现在页面上的时候,图片的对齐方式就显得尤其的重要。如何能够合理地将图片对齐到理想的位置,成为页面是否整体协调、统一的重要因素。
图片水平对齐的方式与文