如何使用CSS以不同方式设置多个图像的样式？

Question

我基本上打造了一篇长篇文章,其中散布着各种各样的图像.我希望第一张图片为"float:left",第二张图片为"float:right".我知道我可以像这样设计图像:

img {
float: left;
}

这使得每个图像具有相同的样式.如何对每张图片进行不同的样式设置 我试图将每个图像放在一个不同的div类中,这样我就可以对它们进行不同的设置,但它不起作用.

我也明白,我可以在html标签中设置每个图像的样式,如下所示:

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px">

我一直听说最好将样式保存在外部样式表(CSS)中,与html分开.这是需要内联样式的情况吗？

Answer 1

您可以为每个图像指定一个类或ID，以帮助您为每个图像定义不同的CSS，例如

<img src="" class="image1">
<img src="" class="image2">

在css文件中，您可以定义

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}

Answer 2

尝试这个

img{width: 200px;height:200px;background-color: antiquewhite}
.left{float:left}
.right{float:right}


    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="left">
    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="right">

这将使两张图像浮动，一张在左边，另一张在右边