Курс CSS. Урок 53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns.
Стандарт CSS3 позволяет использовать многоколоночный режим просмотра информации, похожий на тот, который используется в газетах и журналах.
Затронем теорию вопроса.
В таблице ниже представлены описания всех свойств, относящихся к многоколоночному режиму просмотра информации (Multiple Columns).
Теперь попробуем отобразить информацию в газетно журнальном стиле.
Рассмотрим классы объекта:
Предположим, что главный редактор (ГлавРед) захотел, чтобы колонки разделялись более явно и их должно быть две, а не три, как раньше. Примерно вот так:
Классы для достижения этого эффекта:
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_053_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_053_001.zip ← скачайте пример, чтобы установить на свой сайт...
Затронем теорию вопроса.
NN | Свойство | Гугль Хром | FireFox | IE | Safari | Opera |
---|---|---|---|---|---|---|
53 | column-count | -webkit- | -moz- | 10 | -webkit- | 11.1 |
45 | column-gap | -webkit- | -moz- | 10 | -webkit- | 11.1 |
46 | column-rule | -webkit- | -moz- | 10 | -webkit- | 11.1 |
В таблице ниже представлены описания всех свойств, относящихся к многоколоночному режиму просмотра информации (Multiple Columns).
NN | Свойство | Описание |
---|---|---|
1 | column-count | Определяет количество колонок, на которое будет разбит текст. |
2 | column-fill | Определяет, как заполнять колонки. |
3 | column-gap | Определяет расстояния между колонками. |
4 | column-rule | Сокращенная запись всех свойств column-rule-*. |
5 | column-rule-color | Определяет цвет правила между колонками. |
6 | column-rule-style | Определяет стиль правила между колонками. |
7 | column-rule-width | Определяет ширину правила между колонками. |
8 | column-span | Определяет, сколько колонок элемента будут проходить. |
9 | column-width | Определяет ширину колонок. |
10 | columns | Сокращенная запись всех свойств column-*. |
Теперь попробуем отобразить информацию в газетно журнальном стиле.
Официант моментально выполнил приказание, и Мига принялся
листать принесенную им телефонную книгу. Он быстро нашел
раздел, где были напечатаны фамилии на букву "к", и сказал:
-- Смотрите: Клопс, Большая Собачья улица, дом N 70. Как
только стемнеет, мы должны быть у этого Клопса и сделать обыск
в его саду. Вы, Козлик, тоже поедете с нами. Для вас найдется
работа.
Вскоре желтый автомобиль господина Жулио можно было увидеть
в Змеином переулке, возле магазина разнокалиберных товаров, а с
наступлением темноты он уже мчался по Большой Собачьей улице.
Возле дома N 70 автомобиль остановился, и из него вышли четверо
полицейских с потайными фонариками и резиновыми электрическими
дубинками в руках. Самые догадливые читатели, наверно, уже
догадались, что это были не настоящие полицейские, а всего лишь
переодетые в полицейскую форму Жулио, Мига и Незнайка с
Козликом.
Мига сразу же подошел к воротам, посмотрел в щель и, заметив
свет в окнах дома, принялся громко стучать дубинкой в калитку.
Через некоторое время дверь в доме открылась, из нее вышел Фикс
с ружьем в руках и зашлепал в своих шлепанцах по дорожке.
-- Кто стучит? -- спросил он, подойдя к калитке.
-- Полиция! -- заявил Мига. -- Открывайте немедленно!
Услыхав слово "полиция", Фикс растерялся и моментально
открыл калитку. Увидев перед собой четырех полицейских в
блестящих касках, он перепутался до такой степени, что затрясся
всем телом и уронил ружье.
-- Вы арестованы! -- сказал Мига и направил ему прямо в
глаза луч фонаря.
В это же время Жулио подскочил к нему сзади, накинул на шею
удавку и ловко скрутил за спиной руки.
-- За-за-за что я арестован? -- спросил, заикаясь от страха.
Фикс.
-- За то, что задаете идиотские вопросы, -- объяснил Мига.
-- Но позвольте... -- начал было Фикс.
Больше он ничего не успел сказать, так как Жулио тут же
заткнул ему рот резиновым кляпом.
-- Вы простите. Незнайка, что мы обошлись с этим олухом
несколько грубовато, -- сказал Мига, -- но иначе нельзя было,
так как он мог выпалить в нас из ружья. Прошу вас покараулить
здесь у калитки, а когда нужно будет, мы позовем вас... Ну, а
ты марш к дому, и чтоб не было никакого писка! -- приказал Мига
Фиксу и толкнул его сзади ногой.
Фикс покорно зашагал по тропинке. В это время из дома
выскочил другой слуга господина Клопса -- Фекс. Не успел он и
слова сказать, как руки у него были скрючены, а во рту торчал
резиновый кляп.
Сам господин Клопс сидел в это время дома и, ничего не
подозревая, попивал какао из большой голубой чашки. Неожиданно
дверь отворилась, и он увидел, как в комнату ввалились трое
полицейских, а с ними Фикс и Фекс со связанными руками и
заткнутыми ртами. От испуга Клопс широко раскрыл рот и
опрокинул чашку с горячим какао прямо себе на брюки.
-- Ни с места! Вы арестованы! -- заявил Мига. -- В полицию
поступили сведения, что вы промышляете скупкой краденого и
прячете у себя жуликов.
-- Да что вы! -- замахал Клопс руками.
-- Запирательство бесполезно, -- сказал Мига. -- Мы должны
произвести обыск.
Рассмотрим классы объекта:
.news_053_p01 { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; padding:10px; margin:10px; border:3px solid #B7F777; border-radius:10px; box-shadow: 6px 7px 5px #979797; }
Предположим, что главный редактор (ГлавРед) захотел, чтобы колонки разделялись более явно и их должно быть две, а не три, как раньше. Примерно вот так:
В приемной между тем появилась представительница одной из
рекламных фирм. На ней было узенькое ярко-зеленое платье, на
голове такой же ярко-зеленый модный берет, из-под которого
выбивались в разные стороны космы. Видно было, что, пока она
продиралась сквозь толпу на улице, прическа ее претерпела
значительные изменения. Лицо у нее было строгое и решительное,
с прямым, остроконечным, несколько красноватым носом и
крошечными серыми глазками, в которых светилось упрямство. В
руках она держала несколько фанерных плакатов, укрепленных на
палках, на груди висел небольшой фотографический аппарат в
кожаном футляре. Подбежав к Незнайке, она сунула ему в руки
плакат, на котором было написано: Жалеть не будут коротышки И
не потратят деньги зря, Коль будут все жевать коврижки
Конфетной фабрики "Заря".
Отскочив шага на два-три назад, она навела на Незнайку
фотографический аппарат и сделала снимок. Увидев это, Мига
окончательно вышел из себя. Он подскочил к Незнайке, вырвал у
него из рук плакат и со злостью швырнул его на пол, после чего
подскочил к представительнице рекламной фирмы и дал ей пинка
ногой. Представительница, однако, не пожелала остаться в долгу
и в свою очередь дала ему пинка, ударила по голове плакатом,
плюнув, в довершение всего, на рукав пиджака.
Полнив такой отпор, Мига затрясся от негодования.
-- Вон отсюда! -- закричал он, приходя в бешенство. --
Уберите ее, или я за себя не отвечаю! Вон все отсюда!
Прекратите телевизионную передачу сейчас же! Вы должны
заключить с нами контракт и уплатить деньги. Мы не обязаны
показывать вам космонавта бесплатно!
Классы для достижения этого эффекта:
.news_053_p02 { -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2; -moz-column-gap:60px; /* Firefox */ -webkit-column-gap:60px; /* Safari and Chrome */ column-gap:60px; -moz-column-rule:5px ridge #00FF00; /* Firefox */ -webkit-column-rule:5px ridge #00FF00; /* Safari and Chrome */ column-rule:5px ridge #00FF00; padding:10px; margin:10px; border:3px solid #B7F777; border-radius:10px; box-shadow: 6px 7px 5px #979797; }
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_053_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_053_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.