设置图片样式
图片是网页中不可缺少的内容,它能使页面更加丰富多彩,能让人更直观地感受到网页所要传达给浏览者的信息。下面将详细介绍CSS设置图片风格样式的方法,包括图片的边框和图片的缩放等等。
在HTML中,大家都知道,图片即img元素,作为HTML的一个独立对象,需要占据一定的空间。因此,img元素在页面中的风格样式仍然用盒模型来设计。
1.设置图片边框
在HTML中可以直接通过<img>标记的border属性值为图片添加边框,属性值为边框的粗细,以像素为单位,从而控制边框的粗细。当设置border属性值为0时,则显示没有边框。
例如:
<img src="001.jpg" border="0"> <!--显示为没有边框-->
<img src="001.jpg" border="1"> <--显示边框的粗细为 1px-->
<img src="001.jpg" border="2"> <--显示边框的粗细为 2px-->
<img src="001.jpg" border="3"> <--显示边框的粗细为 3px-->
<img src="001.jpg" border="4"> <--显示边框的粗细为 4px-->
通过浏览器的解析,图片的边框粗细从左至右依次递增,效果如下:
通过浏览器的解析,图片的边框粗细依次递增,效果如上。
然而使用这种方法有很大的限制,即所有的边框都只能是黑色,而且风格十分单一,都是实线,只是在外边框粗细上能够进行调整。
如果希望改变边框的颜色,或者换成虚线边框,仅仅依靠HTML是不够的,是无法实现的。下面将会讲到如何使用CSS样式美化图片的边框。
例如:
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.demo1{
border-style:dotted; /*点画线边框*/
border-color: #996600; /*边框颜色为金黄色*/
border-width: 4px; /*边框粗细为4px*/
margin:2px;
}
.demo2{
border-style:dashed; /*虚线边框*/
border-color: blue; /*边框颜色为蓝色*/
border-width: 2px; /*边框粗细为2px*/
margin:2px;
}
.demo3{
border-style:solid dotted dashed double; /*4边的线型依次为实线,点画线,虚线和双线边框*/
border-color:red green blue purple; /*4边的颜色依次为红色,绿色,蓝色和紫色*/
border-width: 1px 2px 3px 4px; /*4边的边框粗细依次为1px 2px 3px 4px*/
margin:2px;
}
</style>
</head>
<body>
<img src="21.jpg" class="demo1">
<img src="21.jpg" class="demo2">
<img src="21.jpg" class="demo3">
</body>
</html>
效果如下:
如果希望分别设置4条边框的不同样式,在CSS中也是可以实现的,只需要分别设定 border-left、border-right、border-top、border-bottom的样式即可,依次对应于左、右、上、下4条边框。
2.设置图片缩放
使用CSS样式控制图片的大小,可以通过width 和height两个属性来实现。需要注意的是,当width和height两个属性的取值使用百分比数值时,它是相对于父元素而言的。如果将这两个属性设置为相对body的宽度或高度,就可以实现当浏览器窗口改变时,图片大小也发生相应变化的效果。
设置图片的缩放如下:
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.demo1{
width:30%;
height:40%;
}
.demo2{
width:150px;
height:150px;
}
</style>
</head>
<body>
<div >
<img src="21.jpg" >
<img src="21.jpg" class="demo1">
<img src="21.jpg" class="demo2">
</div>
</body>
</html>
效果如下:
说明:
在demo1中定义width和height两个属性的取值为百分比数值,该数值是相对与div容器而言的,而不是相对于图片本身。
demo2中定义width和height 两个属性的取值为绝对像素值,图片将按照定义的像素值显示大小。