Основы CSS

Учебник CSS: · Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Основы HTML

Основы CSS3

Форматирование картинок

Изображения являются очень мощным средством повышения эффективности веб-страницы (если, конечно, с умом ими пользоваться). Правильно отформатированная картинка значительно повышает читабельность и наглядность информации, представленной на сайте.

Используйте атрибуты размера картинки: height, width. Они задают высоту и ширину картинки и браузер при загрузке веб-страницы "знает" сколько места нужно отвести под изображение. Если эти данные не указать, то при загрузке страницы будет происходить "тряска" страницы, пока она полностью не загрузится.

Не пренебрегайте атрибутом alt, который содержит текстовое описание картинки. Сейчас этот атрибут очень активно используется поисковыми системами для поиска по изображениям. Если правильно описать картинку, то можно получить дополнительный приток посетителей, которые просматривают изображения с сайтов (а таких становится все больше и больше).

В теге картинки <img> можно задавать при помощи атрибута border толщину рамки вокруг картинки. Но гораздо более гибкое оформление рамки изображений дает CSS:

none - без рамки;
hidden - невидимая рамка;
dotted - точечная рамка;
dashed - штриховая рамка;
solid - линия;
double - двойная линия;
groove - контур рамки заглублен (3D-эффект);
ridge - контур рамки выступает (3D-эффект);
inset - внутренняя поверхность рамки заглублена (3D-эффект);
outset - внутренняя поверхность рамки выступает (3D-эффект).

Пример использования border в картинках: Пример №13

HTML-код страницы:

CSS файл:

CSS позволяет определять отдельные элементы рамок:

border-top - верх рамки;
border-bottom - низ рамки;
border-right - правая сторона рамки;
border-left - левая сторона рамки.

С помощью этих четырех параметров можно установить значения для отдельных сторон рамок. За параметром надо указать значения толщины, вида и цвета рамки.

Пример использования отдельных сторон border в картинках: Пример №14

HTML-код страницы не изменился по сравнению с прошлым примером, только лишь подключен другой лист стилей.

CSS файл:

body  {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: black; font-size: 8pt;}
H1 {color: green; font-size: 130%;}
p {text-indent: 15px; font-size: 10pt; text-align: justify;}
a:link {FONT-SIZE:9pt; color: olive; text-decoration:none; font-family: Verdana, Arial;}
a:visited {FONT-SIZE:9pt; color: maroon; text-decoration:none; font-family: Verdana, Arial;}
a:active {FONT-SIZE:9pt; color: #ff0000; text-decoration:none; font-family: Verdana, Arial;}
a:hover {FONT-SIZE:9pt; color: #ff0000; text-decoration:underline; font-family: Verdana, Arial;font-weight : bold;}
.text1{text-indent: 5px; font-size: 10pt; text-align: left; color:navy}
.img1{border-top: 1px dashed black;}
.img2{
border: 1px dotted black;
border-bottom-color: red; 
border-left-width: 2mm;}
.img3{border-bottom: 1px dashed black; border-bottom-style: solid;}
.img4{border-left: 4px outset red;}
.img5{
border-top: 1mm solid green; 
border-bottom: 1mm solid green; 
border-right: 2mm dotted red; 
border-left: 2mm dotted blue;
}

Как видите, любые форматирования рамок можно комбинировать, чтобы одновременно форматировать несколько рамок. Обратите внимание на класс img2 - в котором сначала заданы базовые значения для всех сторон рамки, а потом указано форматирование для сторон, где оно отличается от основного.

В начало страницы