HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
UL { list-style-image: url(/markers/dot.gif) }
Значение none убирает графический маркер и возвращает простой, неграфический. Это обычное поведение.
Атрибут стиля list-style-image также можно задавать как для самих списков, так и для отдельных их пунктов.
Атрибут стиля list-style-position позволяет указать местоположение маркера или нумерации в пункте списка:
list-style-position: inside|outside|inherit
Доступных значений здесь два:
— inside — маркер или нумерация находятся как бы внутри пункта списка, являются его частью;
— outside — маркер или нумерация вынесены за пределы пункта списка (это обычное поведение).
Непонятно,
Пример:
OL { list-style-position: inside }
Параметры отображения
Еще одна группа атрибутов стиля управляет тем, как элемент будет отображаться на Web-странице, т. е. будет он блочным или встроенным, и будет ли он отображаться вообще. Эти атрибуты стиля применимы к любым элементам Web-страниц.
Атрибут стиля visibility позволяет указать, будет ли элемент отображаться на Web-странице:
visibility: visible|hidden|collapse|inherit
Он может принимать три значения:
— visible — элемент отображается на Web-странице (это обычное поведение);
— hidden — элемент не отображается на Web-странице, однако под него все еще выделено на ней место. Другими словами, вместо элемента на Web-странице видна пустая "прореха";
— collapse — применим только к строкам, секциям, столбцам и группам столбцов таблицы (о столбцах и группах столбцов пойдет речь в главе 13). Элемент не отображается на Web-странице, и под него не выделяется место на ней (т. е. никаких "прорех"). Однако Web-обозреватель считает, что данный элемент Web- страницы все еще на ней присутствует. Данное значение поддерживают не все Web-обозреватели.
Атрибут стиля visibility применяется довольно редко и только для создания специальных эффектов, наподобие исчезающего или появляющегося элемента Web-страницы. Используется он всегда совместно с соответствующим поведением (о поведении Web-страниц пойдет речь в части III).
Атрибут стиля display весьма примечателен. Он позволяет задать вид элемента Web-страницы: будет он блочным, встроенным или вообще пунктом списка.
Пример:
display: none|inline|block|inline-block|list-item|run-in|table|inline-table|table-caption|table-column|table-column-group|table-header-group|table-row-group|table-footer-group|table-row|table-cell|inherit
Доступных значений у этого атрибута стиля очень много.
— none — элемент вообще не будет отображаться на Web-странице, словно он и не задан в ее HTML-коде.
— inline — встроенный элемент.
— block — блочный элемент.
— inline-block — блочный элемент, который будет "обтекаться" содержимым соседних блочных элементов.
— list-item — пункт списка.
— run-in — встраивающийся элемент. Если за таким элементом следует блочный элемент, он становится частью данного блочного элемента (фактически — встроенным в него элементом), в противном случае он сам становится блочным элементом.
— table — таблица.
— inline-table — таблица, отформатированная как встроенный элемент. (Оказывается, мы все-таки можем поместить таблицу в абзац! Только кому это нужно…)
— table-caption — заголовок таблицы.
— table-column — столбец таблицы (подробнее о столбцах таблицы и формирующих их тегах мы поговорим в главе 13).
— table-column-group —
группа столбцов таблицы (подробнее о группах столбцов и формирующих их тегах мы поговорим в главе 13).— table-header-group — секция заголовка таблицы.
— table-row-group — секция тела таблицы.
— table-footer-group — секция завершения таблицы.
— table-row — строка таблицы.
— table-cell — ячейка таблицы.
ВНИМАНИЕ!
Некоторые значения атрибута стиля display определенные Web-обозреватели могут не поддерживать.
Значение по умолчанию атрибута стиля display зависит от конкретного элемента Web-страницы. Так, для абзаца значением по умолчанию будет block, а для графического изображения (которое, как мы знаем из главы 4, является встроенным элементом) — inline.
Вот пример комбинированного стиля, позволяющего определенным графическим изображениям отображаться как блочные элементы:
IMG.block { display: block }
А вот стиль, после применения которого пункты списков станут встроенными элементами и будут выводиться в одну строку:
LI { display: inline }
Еще один пример:
hidden { display: none }
Применение к элементу Web-страницы данного стиля делает элемент невидимым. Более того, на самой Web-странице даже не останется никакого признака того, что данный элемент на ней присутствовал.
В большинстве практических случаев достаточно значений none, block и inline атрибута стиля display. Остальные значения слишком специфичны, чтобы часто их применять.
Представление для нашего Web-сайта, часть 2
Что ж, продолжим заниматься представлением для Web-страниц нашего Web-сайта. Зададим для них параметры абзацев и списков. Снова сформулируем список параметров, которые мы применим к Web-страницам.
— Выравнивание текста в абзацах — полное.
— Выравнивание текста в заголовках — по левому краю. Выровненные по левому краю заголовки читаются лучше выровненных по центру.
— Выравнивание текста в больших цитатах — по левому краю. Так мы дополнительно выделим цитаты.
— Выравнивание текста в теге адреса — по правому краю. Сведения об авторских правах зачастую выравнивают именно так.
— Маркеры у пунктов списков — белый кружок. Придадим стильности нашим спискам.
Исходя из этого, внесем в соответствующие стили, определенные в таблице стилей main.css, следующие изменения:
P { font-size: 12pt; text-align: justify }
Фактически мы изменили только стиль переопределения тега , добавив в него атрибут стиля, задающий полное выравнивание. Остальные стили останутся без изменений, и в соответствующих им элементах Web-страниц (в том числе в заголовках и больших цитатах) выравнивание будет обычным — по левому краю.
После этого добавим в конец таблицы стилей следующий CSS-код:
ADDRESS { text-align: right }
UL { list-style-type: circle }
Здесь мы создали стили переопределения тегов <ADDRESS> и <UL>. Первый объединится с аналогичным стилем, созданным нами в главе 8, и дополнит его параметрами выравнивания (по правому краю). Второй стиль задаст вид маркера для пунктов маркированного списка — белый кружок.