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

<p>я в основном пишу длинное эссе с различными изображениями, разбросанными повсюду. мне бы хотелось, чтобы первое изображение было «плавающим: влево», а второе - «плавающим: вправо». я знаю, что могу стилизовать изображения следующим образом:</p><pre><code>img { float: left; } </code></pre><p>это делает каждое изображение в одном стиле. как мне по-разному стилизовать каждое изображение? я пытался поместить каждое изображение в отдельный класс div, чтобы я мог оформить их по-разному, но это не сработало. </p><p>я также понимаю, что я могу стилизовать каждое изображение в теге html, например так:</p><pre><code><img src="abcd.png" alt="raoul hausmann's abcd" align="left" height="300px"> </code></pre><p>я продолжаю слышать, что лучше сохранить стиль во внешней таблице стилей (css) отдельно от html. это тот случай, когда необходимо встроенное моделирование? </p>

<p>вы можете дать каждому изображению класс или идентификатор, который поможет вам определить различные css для каждого изображения, например</p><pre><code><img src="" class="image1"> <img src="" class="image2"> </code></pre><p>в файле css вы можете определить </p><pre><code>.image1 { width:200px; height:200px; } .image2 { width:300px; height:300px; } </code></pre>

<p>присвойте своему изображению класс, и тогда вы сможете стилизовать все изображения с этим классом следующим образом:</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.left { border: solid 5px red; float: left; } .right { border: solid 5px blue; float: right; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><img src="abcd.png" class="left"> <img src="abcd.png" class="right"></code></pre> </div> </div> </p>

<p>все вышеперечисленное прекрасно, я бы предложил только сгруппировать общие настройки изображения в этом случае так, чтобы левый/правый классы содержали только то, что отличается.</p><pre><code>/* 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; } </code></pre>

<p><strong> попробуй это </strong> </p><pre><code>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"> </code></pre><p><em>это приведет к перемещению двух изображений, одно слева и другое справа</em></p>