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

Posted 2023-03-06

【中文标题】如何使用 CSS 为多个图像设置不同的样式？

【英文标题】：How can I use CSS to style multiple images differently?

【发布时间】：2015-02-26 03:38:28

【问题描述】：

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

img 
float: left;

这使得每张图片都具有相同的风格。如何以不同的方式设置每个图像的样式？我尝试将每个图像放在不同的 div 类中，以便我可以对它们进行不同的样式设置，但它不起作用。

我也明白，我可以在 html 标记中设置每个图像的样式，如下所示：

<img src="ABCD.png"  align="left" >

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

【问题讨论】：

似乎你走在了正确的轨道上——将类放在包含图像的 div 上是什么“没有用”？你能告诉我们你做了什么以及发生了什么吗？顺便说一句，使用 img 标签上的 height 属性指定高度不再是首选方法；请改用height CSS 属性。与align 相同。

@torazaburo 我把“class=__”放在了错误的地方，但这里的所有答案都为我清除了。感谢您确认html标签中有关height属性的信息，我感觉不对。

【参考方案1】：

试试这个

imgwidth: 200px;height:200px;background-color: antiquewhite
.leftfloat:left
.rightfloat:right


    <img src="ABCD.png"  class="left">
    <img src="ABCD.png"  class="right">

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

【参考方案2】：

给你的图片一个类，然后你可以用这个类为所有图片设置样式，如下所示：

.left 
  border: solid 5px red;
  float: left;


.right 
  border: solid 5px blue;
  float: right;

<img src="ABCD.png" class="left">
<img src="ABCD.png" class="right">

【参考方案3】：

以上都很好，我只建议在这种情况下将图片的常用设置分组，以便左/右类只包含不同的内容。

/* Group the common attributesso that you only need to set it once */
.picture, .leftPicture, .rightPicture 
    border: 2px dotted gray;
    width: 200px;


.leftPicture 
    float:left;


.rightPicture 
    float:right;

【讨论】：

如何在 html 标签中对它们进行分组？我知道如何像这样放置一个类： 我不知道如何将“.Picture”类合并到 html 中。

您只能使用 .leftPicture，我包括 .picture 作为不需要对齐的普通图像的示例。 HTML ..class="leftPicture".. 我在 CSS 中进行了分组。您可以在 HTML 中执行此操作（删除 .picture 旁边对 leftPicture 和 rightPicture 的引用，然后将 CSS ..class="image leftPicture".. 中的两个类分配给相同的效果。

【参考方案4】：

您可以为每个图像指定一个类或 id，这将帮助您为每个图像定义不同的 css，例如

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

在css文件中可以定义

.image1

width:200px;
height:200px;

.image2

width:300px;
height:300px;