#html #css
#HTML #css
Вопрос:
У меня следующая структура html:
<div id="bookshelf">
<img src="images/bookshelf.png" id="background_img" />
<img src="images/book-cover-people.png"/>
<img src="images/sports_cover.png" />
<img src="images/travels_book_cover.png" />
<img src="images/photoalbum_cover.png"/>
</div>
и я хочу установить свойства css по-разному для каждого изображения. как я могу указать в файле css, что для одного изображения мне нужны определенные свойства, а для другого изображения мне нужны другие.
в настоящее время то, что я делаю, это:
#bookshelf img {
width: 90%;
height: 90%;
background-size: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
но это изменяет свойства каждого изображения внутри раздела bookshelf, а не конкретных изображений.
Комментарии:
1. Вы могли бы сделать это с помощью классов, идентификаторов, индекса, src… что бы вы ни хотели. Вы пробовали что-нибудь?#
2. я не знаю, как установить его в css. в этом случае я попробовал с помощью #bookshelf img, который устанавливает каждый img внутри div, я хочу иметь возможность помещать туда идентификатор изображения, чтобы он влиял только на него.
3. Хорошо.. вы можете присвоить каждому изображению идентификатор и использовать его в своем CSS. Нравится
#background_img { ... }
4. это сработало. css имеет так много разных возможностей
Ответ №1:
Лучшим способом было бы использовать id
атрибут для каждого изображения, уникальный для каждого img
элемента.
Возьмите:
<div id="bookshelf">
<img src="images/bookshelf.png" id="background_img" id="one" />
<img src="images/book-cover-people.png" id="two"/>
<img src="images/sports_cover.png" id="three" />
<img src="images/travels_book_cover.png" id="four" />
<img src="images/photoalbum_cover.png" id="five"/>
</div>
теперь вы можете использовать следующий селектор для установки свойств, общих для всех изображений:
#bookshelf img {}
и следующие селекторы для стилей, применимых к отдельным изображениям:
#one { }
#two { }
#three { }
#four { }
#five { }
Комментарии:
1. Нет необходимости иметь 2 идентификатора в селекторе.
img#one
сделал бы вместо#bookshelf img#one
2. даже просто #one будет иметь тот же эффект, если на странице не будет другого элемента с тем же идентификатором
3. @SamDenton да, вы правы, нет необходимости
img
, потому что на странице может быть только один#one
. Идентификаторы должны быть уникальными.4. Другой элемент на той же странице с тем же идентификатором будет недействительным.
5. извините, думал о классе abbout, так как это все, что я действительно использую
Ответ №2:
<div id="bookshelf">
<img src="images/bookshelf.png" id="imageOne" />
<img src="images/book-cover-people.png" id="imageTwo" />
<img src="images/sports_cover.png" id="imageThree" />
<img src="images/travels_book_cover.png" id="imageFour" />
<img src="images/photoalbum_cover.png" id="imageFive" />
</div>
<style>
#bookshelf #imageOne{}
#bookshelf #imageTwo{}
#bookshelf #imageThree{}
#bookshelf #imageFour{}
#bookshelf #imageFive{}
</style>
You can do this way too.
Комментарии:
1. Это неправильное использование class, если только не должно быть других групп изображений, которым требуется такой же стиль. Атрибуты идентификатора были бы правильным и эффективным способом достижения той же цели.
2. @michaelward82 Да. через 7 лет я увидел свой собственный ответ и рассмеялся. В то время я был новичком, когда опубликовал этот ответ. Я согласен, что атрибуты идентификатора были бы правильным подходом для достижения цели. Сейчас я отредактировал этот ответ.