Вход/Регистрация
HTML 5, CSS 3 и Web 2.0. Разработка современных 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) задают сразу все параметры линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule|-webkit-column-rule: <толщина> <стиль> <цвет>

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

Листинг П9

#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: thin dotted #B1BEC6;

— webkit-column-rule: thin dotted #B1BEC6 }

  • Читать дальше
  • 1
  • ...
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: