Оформление картинок CSS

Оформление картинок CSS

Оформление картинок CSS Тематические порталы Портал CSS • Портал Веб-разработчиков

Как и любой элемент расположенный на странице, картинки можно оформлять при помощи каскадных стилей CSS. Картинки, фотографии - важный элемент расположенный на той или иной странице, так как они привлекает особое внимание посетителей сайта.

Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.

Настройки картинок CSS

Все картинки в CSS автоматический именуются тэгом "img" и в фигурных скобках задаются все необходимые параметры к рисунку, например:

img {
border: 1px solid gray;
float: left;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
}

Где:

• border - линия обрамляющая картинку, её толщина, тип и цвет.
• float - выравнивание картинки в блоке или на странице в целом, параметры right - выравнивание справа, left - выравнивание - слева.
• margin-left - отступ от картинки слева, задаётся в пикселях - px
• margin-top - отступ от картинки сверху, задаётся в пикселях - px
• margin-bottom - отступ от картинки снизу, задаётся в пикселях - px

Получаем:

Имейте в виду, что в таком случае все картинки на сайте, кроме тех, к которым присвоены уникальные имена, будут оформлены согласно заданным параметрам, прописанным атрибуту "img".

Отступы задаются, чтобы текст вокруг картинки не "прилипал" со всех сторон. Эти параметры будут ко всем картинкам размещённых на всех страницах, которые подключены к основному CSS файлу.

Ко всему прочему, в HTML можно картинку размещать внутри отдельного блока "DIV" присвоить ему отдельное имя, например "image":

<div id="image"><img src="http://www.wikijournal.ru/image.jpeg"></div>

Это позволит задавать параметры именно к данной картинке, а также можно задать специальные параметры к данному блоку, чтобы картинка располагалась в рамке, при помощи CSS задаём параметры к картинке и к блоку "DIV", в котором она находится:

img {
border: 1px solid gray;
}

#image {
border: 1px solid gray;
float: left;
padding: 4px;
background: #FAFAFA; 
}

В данном случае именно блок DIV регулирует все настройки:

• border - линия блока, в котором находится картинка.
• float - выравнивание блока с картинкой.
• padding - внутренние отступы блока для создания эффекта рамки.
• background - цвета фона рамки.

Получаем:

К рамке можно также применять значение CSS параметр border-radius (Например: border-radius: 3px;), который сделает рамку немного закруглённой и внесёт особый дизайн картинок на сайте.

Примечание

Если же возникли трудности и есть какие-либо вопросы, как оформить картинки размещённые на сайте или определённой странице, то можно задать вопрос в специально созданной теме про CSS на нашем форуме.