Приднестровская поддержка XOOPS
Фотографии, используемые в качестве иллюстраций к статье или размещаемые в фотоальбоме, выглядят более аккуратно с обрамлением в виде тонкой рамки. Однако добавление рамки в графическом редакторе для каждого изображения займет немало времени, а каждый раз, когда потребуется изменить толщину или цвет рамки, вы окажетесь перед необходимостью повторять этот трудоемкий процесс заново. К счастью, CSS предлагает гораздо более легкий способ выполнения аналогичных задач.
Решение
Добавить рамку к изображению с помощью CSS предельно просто. Допустим, в документе на рис. 3.1 есть два изображения.
Рис. 3.1. Просмотр двух изображений в веб-браузере
Благодаря следующему правилу к обоим изображениям добавляется сплошная черная рамка толщиной в 1 пиксел:
img {
border-width: 0px;
border-style: solid;
border-color: #000000;
}
Это правило можно записать в сокращенной форме, например:
img {
border: 1px solid #000000;
}
На рис. 3.2. показан результат выполнения данного кода.
Рис. 3.2. С добавленной с помощью CSS рамкой изображение выглядит привлекательнее
Все это замечательно, но ваш документ ведь наверняка содержит изображения, которым черная рамка не нужна. В таком случае можно создать класс для изображений с рамками и применить его по отношению
к соответствующим элементам:
.imgborder {
border: 1px solid #000000;
}
<img src="food1.jpg" alt="приготовление пищи" class="imgborder" />
Если на странице отображается подборка изображений, например фотоальбом, можно задать параметры рамки для элементов, расположенных внутри определенного контейнера, допустим, списка с уникальным идентификатором.
#album img {
border: 1px solid #000000;
}
<ul id=”album”> <li><img src=”food1.jpg” alt=”приготовление пищи” /></li> <li><img src=”food2.jpg” alt=”приготовление пищи” /></li> </ul>
Такой прием избавляет от необходимости добавления атрибута с именем класса каждому отдельному изображению в контейнере.
Отправитель | Нити |
---|
9 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 9 далее... |