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

Question

我基本上是在设计一篇散布着各种图像的长文。我希望第一张图片“浮动：左”，第二张图片“浮动：右”。我知道我可以这样设计图像：

 img {
float: left;
}

这使得每个图像都具有相同的风格。如何为每个图像设置不同的样式？我试图将每张图片放在不同的 div 类中，这样我就可以为它们设置不同的样式，但是没有用。

我也明白，我可以在 html 标签中设置每张图片的样式，如下所示：

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

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

原文由 cphil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以给每个图像一个类或 id，这将帮助你为每个图像定义不同的 css，比如

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

在 css 文件中你可以定义

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

原文由 priya786 发布，翻译遵循 CC BY-SA 3.0 许可协议