Добавление рамки к изображению
Фотографии, используемые в качестве иллюстраций к статье или разме- щаемые в фотоальбоме, выглядят более аккуратно с обрамлением в виде тонкой рамки. Однако добавление рамки в графическом редакторе для каждого изображения займет немало времени, а каждый раз, когда по- требуется изменить толщину или цвет рамки, вы окажетесь перед не- обходимостью повторять этот трудоемкий процесс заново. К счастью, CSS предлагает гораздо более легкий способ выполнения аналогичных задач.
Решение
Добавить рамку к изображению с помощью CSS предельно просто. До- пустим, в документе на рис. 3.1 есть два изображения.
Благодаря следующему правилу к обоим изображениям добавляется сплошная черная рамка толщиной в 1 пиксел:
Рис. 3.1. Просмотр двух изображений в веб-броузере
img {
border-width: 1px; border-style: solid; border-color: #000000;
}
Это правило можно записать в сокращенной форме, например:
chapter03/borderbasic.css (фрагмент)
img {
border: 1px solid #000000;
}
На рис. 3.2. показан результат выполнения данного кода.
Рис. 3.2. С добавленной с помощью CSS рамкой изображение выглядит привлекательнее
Все это замечательно, но ваш документ ведь наверняка содержит изо- бражения, которым черная рамка не нужна. В таком случае можно соз- дать класс для изображений с рамками и применить его по отношению к соответствующим элементам:
chapter03/borderclass.css (фрагмент)
.imgborder {
border: 1px solid #000000;
}
chapter03/borderclass.html (фрагмент)
<img src=”food1.jpg” alt=”food preparation” class=”imgborder” />
Если на странице отображается подборка изображений, например фо- тоальбом, можно задать параметры рамки для элементов, расположен- ных внутри определенного контейнера, допустим, списка с уникаль- ным идентификатором.
chapter03/borderalbum.css (фрагмент)
#album img {
border: 1px solid #000000;
}
chapter03/borderalbum.html (фрагмент)
<ul id=”album”>
<li><img src=”food1.jpg” alt=”food preparation” /></li>
<li><img src=”food2.jpg” alt=”food preparation” /></li>
</ul>
Такой прием избавляет от необходимости добавления атрибута с име- нем класса каждому отдельному изображению в контейнере.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Добавление тени к блоку (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)