Есть один интересный дизайнерский трюк, который делает все изображения на
вашем сайте более стильными и придает ощущение, что ваш сайт оформлен в едином
стиле. Давайте рассмотрим, в чем же он заключается.
На каждом сайте есть область, где находится основное содержание, текстовая
информация и определенные изображения к этой текстовой информации. Давайте
назовем эту область «область сайта с основным содержанием». Кроме того, есть и
другие части сайта: навигационное меню, где располагаются ссылки для перехода в
другие разделы и область логотипа, где располагается изображение – логотип для
сайта.
На следующем изображении вы можете наглядно увидеть, что это конкретно за
области сайта.
Хорошо, допустим, что с этим мы разобрались. Теперь давайте вернемся к той
теме, с которой мы начинали. Дизайнерский трюк будет заключаться в том, что все
изображения, которые будут появляться в «области сайта с основным содержанием»,
должны автоматически обрамляться вот в такую красивую рамочку:
Как добиться такого эффекта? Ответ на этот вопрос, вы можете найти, если
дочитаете эту статью до конца.
Делается это все с помощью стилей CSS. Нужно прописать всего лишь несколько
строк кода и все изображения на вашем сайте, в определенной области (в которой
вы только захотите) сразу же будут обрамлены в красивую рамку. Для этого нам
понадобится сделать всего два шага.
Шаг №1.
Итак, первое, что для этого нужно сделать, это заключить область сайта, в
которой изображения должны иметь такую рамку в специальную конструкцию:
<div id="content">
….
Здесь будет html-код и рисунки
….
</div>
Шаг №2.
Откройте файл style.css, который содержит стили CSS для вашего сайта и
пропишите туда следующие строки:
#content img {
border: 1px solid #C3D9FF;
padding: 5px;
}
Это выражение обозначает, что всем тэгам <img> (они отвечают за
отображение рисунков), которые находятся внутри конструкции <div
id="content">, будет присвоена рамочка размером в 1 пиксель, сплошная и
светло-голубого цвета (border: 1px solid #C3D9FF;) и сделан отступ со всех
сторон в 5 пикселей (padding: 5px;).
Вот и все. Как видите, нет ничего сложного. Проделав два этих простых шага,
вы придаете вашему сайту эффект стильности и аккуратности.
Удачи и пусть ваши сайты будут красивыми и полезными!
| 
