HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Здесь мы задаем для всех фрагментов текста, помеченных тегом <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 }