第6章 用CSS设置图片样式

用CSS设置图片样式
在网页中插入图片：在标准XHTML文档中嵌入图片的方式和传统的HTML嵌入图片的方式一样，都是使用img标签。

使用img标签嵌入图片的语法：
<img src=”picture.jpg” />
其中，src属性是指要插入的图片所在文件夹的位置，可以是相对地址，也可以是绝对地址。

控制图片的大小：CSS提供的width和height属性用于控制图片的宽度和高度。

使用width和height属性的语法：
width:picwidth;
height:picheigth;
其中，picwidth和picheight可以用任何长度单位进行设置。

通常情况下使用像素为单位。

使用像素控制图片宽高：img{width:150px;height:150px;} /*设置图片宽为150像素，高为150像素*/
使用百分比控制图片宽高：img{width:50%,height:50%;} /*使用百分比设置图片宽高。

*/
单独设置图片的宽度或高度：单独设置图片的宽度后，图片就按照宽度缩放，而高度是按照宽度的缩放比例自动变化。

整张图片在缩放后比例不变。

单独设置图片的高度，得到的结果也一样。

如：
img{width:200px;} /*设置图片的宽度为200像素*/
img{height:200px;} /*设置图片的高度为200像素*/
给图片添加边框：为放置在网页上的图片增加边框可以使图片的边界清晰，排布整齐，也可使图片更美观。

CSS提供的border属性为图片添加边框。

使用border属性的语法：
border-width:width; /*设置边框的宽度*/
border-style:style; /*设置边框的样式*/
border-color:color; /*设置边框的颜色*/
其中border-width是指边框的宽度，width可以用任何长度单位设置；border-style是指边框的样式，style指的是设置边框样式；border-color是指边框的颜色，color可以用任何颜色单位设置。

图片不显示的解决办法：由于网络传输等问题会造成网页上某些图片不能显示。

使用img标签的alt属性能给图片增添替换文字。

在图片不能显示的情况下，该替换文字就会出现在浏览器中。

使用img标签的alt属性的语法：
<img src=”picture.jpg” alt=”替换的文字” />
给图片增加链接：在网页上的图片常常被作为一个超链接。

可以使用a标签和img标签给图片增加链接。

使用a标签和img标签给图片增加链接的语法：
<a href=”url”><img src=”picture.jpg” /></a>
其中，在a标签中的href属性的url可以用任意网页地址代替。