Как я могу использовать CSS для стилизации нескольких изображений по-разному?

Question

Я в основном пишу длинное эссе с различными изображениями, разбросанными повсюду. Я бы хотел, чтобы первое изображение было "плавать: влево", а второе - "плавать: вправо". Я знаю, что могу стилизовать изображения следующим образом:

img {
float: left;
}

Это делает каждое изображение в одном стиле. Как мне по-разному стилизовать каждое изображение? Я пытался поместить каждое изображение в отдельный класс div, чтобы я мог оформить их по-разному, но это не сработало.

Я также понимаю, что я мог бы стилизовать каждое изображение в HTML-теге, например так:

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

Я продолжаю слышать, что лучше сохранить стиль во внешней таблице стилей (CSS) отдельно от HTML. Это тот случай, когда необходимо встроенное моделирование?

Answer 1

Вы можете дать каждому изображению класс или идентификатор, которые помогут вам определить различные CSS для каждого изображения, например

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

в файле CSS вы можете определить

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

Answer 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">

Answer 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;
}

Answer 4

Попробуй это

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">

это приведет к появлению двух изображений: слева и справа.

Answer 5