HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

<позиция 1 значение 1>[/<позиция 1 значение 2>] [<позиция 2 значение 1>[/<позиция 2 значение 2>][<позиция 3 значение 1>[/<позиция 3 значение 2>] [<позиция 4 значение 1>[/<позиция 4 значение 2>]]]]

Как видим, каждая позиция может содержать как одно значение, так и пару значений, разделенных слэшем /. Если она содержит одно значение, это значение задаст радиус скругления и по горизонтали, и по вертикали. Если же в позиции указать два значения, разделив их слэшем, первое задаст радиус скругления по горизонтали, второе — по вертикали.

Кроме того, можно указать от одной до четырех позиций.

— Если указана одна позиция, она задаст радиус скругления всех углов рамки.

— Если указаны две позиции, первая задаст радиус скругления верхнего левого и нижнего правого углов рамки, а вторая — верхнего правого и нижнего левого углов.

— Если указаны три позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого и нижнего левого, а третья — нижнего правого угла.

— Если указаны четыре позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого, третья — нижнего правого, а четвертая — нижнего левого угла.

Пример иллюстрирует листинг П2.

Листинг П2

#navbar LI { padding: 5px 10px;

margin: 10px 0px;

border: thin solid #B1BEC6;

— moz-border-radius: 3px/1px 3px/1px 0px 0px;

border-radius: 3px/1px 3px/1px 0px 0px;

— webkit-border-radius: 3px/1px 3px/1px 0px 0px;

cursor: pointer }

Здесь мы задаем для пунктов "внешних" списков, формирующих полосу навигации, рамки со скругленными верхними углами. Радиус скругления их по горизонтали будет 3 пиксела, а по вертикали — 1 пиксел.

Выделение со скругленными углами

Сказавший "а" да скажет "б"! Позволивший создавать рамки со скругленными углами да позволит скруглять углы у выделения!

Расширение CSS — moz-outline-radius-topleft задает радиус скругления верхнего левого угла выделения:

— moz-outline-radius-topleft: <значение>

Радиус скругления может быть задан в любой единице измерения, поддерживаемой CSS.

Для указания радиуса скругления остальных углов выделения применяются расширения CSS, перечисленные далее.

— moz-outline-radius-topright — радиус скругления верхнего правого угла выделения.

— moz-outline-radius-bottomright — радиус скругления нижнего правого угла выделения.

— moz-outline-radius-bottomleft — радиус скругления нижнего левого угла выделения.

Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела.

Листинг П3 иллюстрирует пример.

Листинг П3

DFN { outline: thin dotted #B1BEC6;

— moz-outline-radius-topleft: 3px;

— moz-outline-radius-topright: 3px;

— moz-outline-radius-bottomright: 3px;

— moz-outline-radius-bottomleft: 3px }

Здесь мы задаем для всех фрагментов текста, помеченных тегом <DFN>, выделение, все углы которого имеют радиус скругления 3 пиксела.

Расширение CSS — moz-outline-radius позволяет задать радиусы скругления сразу для всех углов выделения:

— moz-outline-radius: <значение 1> [<значение 2> [<значение 3>[<значение 4>]]]|inherit

Здесь можно указать от одного до четырех значений.

— Если указано одно значение, оно задаст радиус скругления всех углов выделения.

— Если указаны два значения, первое задаст радиус скругления верхнего левого и нижнего правого углов выделения, а второе — верхнего правого и нижнего левого углов.

— Если указаны три значения, первое задаст радиус скругления верхнего левого угла выделения, второе — верхнего правого и нижнего левого, а третье — нижнего правого угла.

— Если указаны четыре значения, первое задаст радиус скругления верхнего левого угла выделения, второе — верхнего правого, третье — нижнего правого, а четвертое — нижнего левого угла.

Эти расширения CSS поддерживаются только Firefox и не включены в стандарт CSS 3.

Пример:

DFN { outline: thin dotted #B1BEC6;

— moz-outline-radius: 3px }

Многоколоночная верстка

Многоколоночная верстка — это то, чего давно не хватало в Web-дизайне. Отдельные энтузиасты уже давно реализовывали ее с помощью таблиц или контейнеров.

Но теперь у них есть "законные" средства разбить текст на произвольное число колонок, воспользовавшись особыми расширениями CSS.

Расширения CSS — moz-column-count (Firefox) и — webkit-column-count (Web-обозреватели на программном ядре Webkit) задают желаемое число колонок для многоколоночной верстки:

— moz-column-count|-webkit-column-count: <число колонок>|auto

Реальное число колонок, которое выведет Web-обозреватель, может быть другим; например, на Web-странице может не оказаться места для указанного числа колонок или для размещения текста может потребоваться меньше колонок, чем было указано.

Значение auto, судя по всему, отменяет многоколоночную верстку. Пример:

#cmain { — moz-column-count: 2;

— webkit-column-count: 2 }

Здесь мы задаем для контейнера cmain две колонки.

Расширения CSS — moz-column-width (Firefox) и — webkit-column-width (Web-обозреватели на программном ядре Webkit) задают желаемую ширину колонок:

— moz-column-width|-webkit-column-width: <ширина колонок>|auto

Реальная ширина колонок, установленная Web-обозревателем, может быть больше или меньше и будет зависеть от ширины элемента Web-страницы, содержимое которого верстается в несколько колонок.

Значение auto возвращает управление шириной колонок Web-обозревателю. Листинг П4 иллюстрирует пример.

Листинг П4

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px }

Задаем для контейнера cmain ширину колонок в 300 пикселов.

Расширения CSS — moz-column-gap (Firefox) и — webkit-column-gap (Web-обозреватели на программном ядре Webkit) задают ширину пространства между колонками:

— moz-column-gap|-webkit-column-gap: <ширина пространства между колонками>|normal

Значение normal задает ширину пространства между колонками по умолчанию. Ее величина зависит от Web-обозревателя.

Листинг П5 иллюстрирует пример.

Листинг П5

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm }

В листинге П5 задаем для контейнера cmain ширину пространства между колонками 5 мм.

Расширения CSS — moz-column-rule-width (Firefox) и — webkit-column-rule-width (Web-обозреватели на программном ядре Webkit) задают толщину линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule-width|-webkit-column-rule-width: thin|medium|thick|<толщина линий между колонками>

Здесь доступны те же значения, что и для атрибутов стиля, задающих толщину линий рамки и выделения (см. главу 11).

Листинг П6 иллюстрирует пример.

Листинг П6

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule-width: thin;

— webkit-column-rule-width: thin }

Теперь между колонками в контейнере cmain будут проведены тонкие линии.

Расширения CSS — moz-column-rule-style (Firefox) и — webkit-column-rule-style (Web-обозреватели на программном ядре Webkit) задают стиль линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule-style|-webkit-column-rule-style:

none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Здесь доступны те же значения, что и для атрибутов стиля, задающих стиль линий рамки и выделения (см. главу 11).

Листинг П7 иллюстрирует пример.

Листинг П7

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule-width: thin;

— webkit-column-rule-width: thin;

— moz-column-rule-style: dotted;

— webkit-column-rule-style: dotted }

Теперь между колонками в контейнере cmain будут проведены тонкие точечные линии.

Расширения CSS — moz-column-rule-color (Firefox) и — webkit-column-rule-color

(Web-обозреватели на программном ядре Webkit) задают цвет линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule-color|-webkit-column-rule-color: <цвет линий между колонками>

Листинг П8 иллюстрирует пример.

Листинг П8

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule-width: thin;

— webkit-column-rule-width: thin;

— moz-column-rule-style: dotted;

— webkit-column-rule-style: dotted;

— moz-column-rule-color: #B1BEC6;

— webkit-column-rule-color: #B1BEC6 }

Теперь между колонками в контейнере cmain будут проведены тонкие точечные линии светло-синего цвета.

Расширения CSS — moz-column-rule (Firefox) и — webkit-column-rule (Web- обозреватели на программном ядре Webkit) задают сразу все параметры линий, которыми колонки будут отделяться друг от друга: