网页设计入门--使用css设置图片样式

时间:2024-04-15 14:56:14

一、定义图片边框

方法1:

border-style:dotted(点划线)|dashed(虚线)|solid;

border-color:参数;

border-width:数值;

方法2:

border:style(必须放在第一个位置) color width;

方法3:

border-left-style:solid;

border-right-color:#cacece;

border-bottom-width:2px;

方法4:

border-style:dotted solid dashed double;(上 右 下 左)

border-width:5px 10px;(上下宽度5px,左右宽度10px)

border-color:#2F0000 #003E3E #006000;(上边框颜色 左右边框颜色 下边框颜色)

二、定义图片大小

img{

width:数值;

height:数值;

}(此处的数值也可以为百分比)

 PS:

1、如果width和height都设置,则按设置更改图片大小;

2、如果只有width,则height会根据比例做相应的调整,反之亦然;

3、通过设置img{max-width:数值;},可以设置图片的最大尺寸,如果图片小于最大尺寸,就按原大小显示,如果图片超出最大尺寸,就按最大尺寸显示

三、定义图片的横向对齐

图片的对齐不能直接通过设置图片的text-align属性来定义,而是需要通过设置其父元素的该属性值,使其继承该属性来实现。

例如:

<html>
<head>
<title>my first text html</title>
<style type="text/css">
body{
background:#cecaca;
}
table{
width:80%;
margin:0 auto;
}

.td1{
text-align:left;
}
.td2{
text-align:center;
}
.td3{
text-align:right;
}
</style>
</head>
<body>
<table border="1">
<tr><td class="td1"><img src="picture/bd_logo1.png"></td></tr>
<tr><td class="td2"><img src="picture/bd_logo1.png"></td></tr>
<tr><td class="td3"><img src="picture/bd_logo1.png"></td></tr>
</table>
</body>
</html>

实现结果如下:

四、定义图片的纵向对齐:与文字的对齐方式类似

vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length

五、设置文字环绕效果

float:left|right|none;