it-swarm.com.ru

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

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

img {
float: left;
}

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

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

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

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

6
cphil

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

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

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

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

Присвойте своему изображению класс, и тогда вы сможете стилизовать все изображения с этим классом следующим образом:

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

1
Bill

Все вышеперечисленное прекрасно, я бы предложил только сгруппировать общие настройки изображения в этом случае так, чтобы левый/правый классы содержали только то, что отличается.

/* 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;
}
0
Marius Vorster

Попробуй это  

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

это приведет к перемещению двух изображений, одно слева и другое справа

0
sanoj lawrence