Мы рассмотрели только значения атрибута стиля list-style-type, предлагаемые стандартом CSS 3. Однако стандарт CSS 2 предусматривал еще несколько значений, которые до сих пор поддерживаются Web-обозревателями. Вы можете найти их на Web-странице https://developer.mozilla.org/en/CSS/list-style-type.
Атрибут стиля list-style-type можно задавать как для самих списков, так и для отдельных пунктов списков. В последнем случае создается список, в котором пункты имеют разные маркеры или нумерацию. Иногда это может пригодиться.
Вот определение маркированного списка с маркером в виде квадратика:
UL { list-style-type: square }
А в листинге 9.1 мы задали такой же маркер для одного из пунктов маркированного списка.
Листинг 9.1
.squared { list-style-type: square }
. . .
<UL>
<LI>Первый пункт</LI>
<LI CLASS="squared">Второй пункт (с другим маркером)</LI>
<LI>Третий пункт</LI>
</UL>
Атрибут стиля list-style-image позволяет задать в качестве маркера пунктов списка какое-либо графическое изображение (создать графический маркер).
В этом случае значение атрибута стиля list-style-type, если таковой задан, игнорируется:
list-style-image: none|<интернет-адрес файла изображения>|inherit
Интернет-адрес файла с графическим маркером задается в таком же формате, что и интернет-адрес файла фонового изображения (см. главу 8):
UL { list-style-image: url(/markers/dot.gif) }
Значение none убирает графический маркер и возвращает простой, неграфический. Это обычное поведение.
Атрибут стиля list-style-image также можно задавать как для самих списков, так и для отдельных их пунктов.
Атрибут стиля list-style-position позволяет указать местоположение маркера или нумерации в пункте списка:
list-style-position: inside|outside|inherit
Доступных значений здесь два:
- inside - маркер или нумерация находятся как бы внутри пункта списка, являются его частью;
- outside - маркер или нумерация вынесены за пределы пункта списка (это обычное поведение).
Непонятно, зачем нужен данный атрибут стиля, ведь списки, в которых маркер или нумерация вынесены за пределы пунктов, лучше читаются. Ну, раз он присутствует в стандарте CSS, значит, так тому и быть...
Пример:
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 }
Фактически мы изменили только стиль переопределения тега <P>, добавив в него атрибут стиля, задающий полное выравнивание. Остальные стили останутся без изменений, и в соответствующих им элементах Web-страниц (в том числе в заголовках и больших цитатах) выравнивание будет обычным - по левому краю.
После этого добавим в конец таблицы стилей следующий CSS-код:
ADDRESS { text-align: right }
UL { list-style-type: circle }
Здесь мы создали стили переопределения тегов <ADDRESS> и <UL>. Первый объединится с аналогичным стилем, созданным нами в главе 8, и дополнит его параметрами выравнивания (по правому краю). Второй стиль задаст вид маркера для пунктов маркированного списка - белый кружок.
Сохраним таблицу стилей и откроем Web-страницу index.htm в Web-обозревателе. Не бог весть какие изменения, но Web-странице они явно пошли на пользу.
Мы можем еще немного поэкспериментировать с изученными в этой главе атрибутами стилей. Правда, эксперименты долго не продлятся - слишком мало мы изучили атрибутов. Ну ничего, в следующей главе будет где разгуляться!..
Создание полосы навигации
Напоследок создадим для наших Web-страниц нормальную полосу навигации. Сейчас она у нас слишком уж простенькая.
Еще в главе 6 мы узнали, что полоса навигации может быть горизонтальной или вертикальной, может формироваться в одном абзаце, с помощью набора абзацев, списка или таблицы. Для набора абзацев каждая гиперссылка полосы навигации представляет собой один абзац, для списка - отдельный его пункт, а для таблицы - отдельную ее ячейку. В данный момент наша полоса навигации представляет собой один абзац.
Давайте выберем для формирования полосы навигации список - так сейчас поступают очень часто. И соответственно переделаем HTML-код, формирующий полосу навигации.
В главе 6, создавая первую полосу навигации, мы забыли добавить в нее гиперссылку, указывающую на Web-страницу index.htm, которая содержит собственно справочник по HTML. Но правила хорошего тона Web-дизайна требуют, чтобы полоса навигации содержала гиперссылки на все Web-страницы Web-сайта или, по крайней мере, на важнейшие. Поэтому добавим соответствующую гиперссылку в полосу навигации; сделаем это самостоятельно.
Листинг 9.2 содержит фрагмент HTML-кода Web-страницы index.htm, формирующий новую полосу навигации.
Листинг 9.2
<UL>
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm">Примеры</A></LI>
<LI><A HREF="about.htm">О разработчиках</A></LI>
</UL>
Одно из важнейших правил Web-дизайна - полоса навигации должна отличаться от обычного текста. А полоса навигации, сформированная на основе списка, должна отличаться от обычного списка. Как это сделать? С помощью соответствующих стилей.
Сформулируем список параметров для нашей новой полосы навигации.
- Шрифт - Arial. Пусть полоса навигации будет отлична от обычного текста.
- Размер шрифта - 14 пунктов. Полоса навигации должна быть заметна.
- Символы шрифта - только прописные. Так полоса навигации станет еще заметнее.
- Маркер - отсутствует. В полосе навигации маркеры не нужны.
Поскольку полоса навигации будет присутствовать на каждой Web-странице в единственном экземпляре, для ее оформления мы применим именованный стиль (см. главу 7). Дадим ему имя navbar. CSS-код приведен в листинге 9.3.
Листинг 9.3
#navbar { font-family: Arial, sans-serif; font-size: 14pt; text-transform: uppercase; list-style-type: none }
Поместим этот код в самом конце таблицы стилей main.css.
Чтобы привязать именованный стиль к тегу, следует указать его имя в качестве значения атрибута тега ID - это мы знаем из главы 7. Так и сделаем:
<UL ID="navbar">
. . .
Осталось сохранить Web-страницу и таблицу стилей и проверить получившийся результат в Web-обозревателе. Что ж, новая полоса навигации заметно лучше старой.
Параметры курсора
CSS предоставляет нам одну очень интересную возможность - указание вида курсора мыши, который он примет при наведении на данный элемент Web-страницы. Это может быть полезно при создании специальных эффектов.
Атрибут стиля cursor устанавливает форму курсора мыши при наведении его на данный элемент Web-страницы. Данный атрибут можно применить к любому элементу Web-страницы, как блочному, так и встроенному:
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit
Как видим, возможных значений у атрибута cursor очень много, к тому же многие из них на практике применяются крайне редко. Поэтому мы рассмотрим только самые необходимые.
- auto - Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.
- default - курсор по умолчанию, обычно стрелка. none - курсор мыши вообще не отображается. help - стрелка с вопросительным знаком.
- pointer - "указующий перст". Обычное поведение при наведении курсора мыши на гиперссылку.
- progress - стрелка с небольшими песочными часами. Обозначает, что в данный момент работает какой-то фоновый процесс.
- wait - песочные часы. Обозначает, что в данный момент Web-обозреватель занят.
- text - текстовый курсор. Обычное поведение при наведении курсора мыши на фрагмент текста.
Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь.
Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации:
#navbar LI { cursor: pointer }
Что дальше?
В настоящей главе мы разобрались с атрибутами стиля, задающими параметры абзацев, списков и отображения элементов Web-страницы. Их немного, но при должном применении они могут заметно улучшить наши Web-творения.
В следующей главе мы познакомимся с блочными контейнерами - "коллегами" знакомых нам по главе 8 встроенных контейнеров. Мы выясним, как можно расположить их на Web-странице в нужном нам порядке и какие атрибуты стиля CSS для этого следует применять. Блочные контейнеры - чрезвычайно мощный инструмент, и мы уделим им много времени.
А еще в следующей главе мы всерьез займемся Web-дизайном.
ГЛАВА 10. Контейнерный Web-дизайн
В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.
Теперь мы займемся Web-дизайном. Согласитесь - наши Web-странички, несмотря на созданное нами шикарное представление, выглядят все еще крайне непрезентабельно. Настала пора оформить их как положено.
А для этого нам придется изучить новые элементы Web-страниц - блочные контейнеры. Правда, они не такие уж новые - с их встроенными "коллегами" мы по- знакомились еще в главе 8. Но именно блочные контейнеры дадут нам в руки инструмент современного Web-дизайна.
Разумеется, не обойдется и без дополнительных атрибутов стилей, с помощью которых мы сможем задать необходимые параметры блочных контейнеров (и других блочных элементов). Эти атрибуты стиля позволяют задать размеры и местоположение блочных контейнеров на Web-странице.
А напоследок мы получим от CSS очередной сюрприз - средства управления переполнением. Они пригодятся нам в случаях, если содержимое контейнера не помещается в нем, и не только...
Блочные контейнеры
Как ясно из названия, блочный контейнер может хранить только блочные элементы: абзацы, заголовки, большие цитаты, теги адреса, текст фиксированного форматирования, таблицы, аудио- и видеоролики. Блочный контейнер может содержать как один блочный элемент, так и несколько.
Блочный контейнер формируется с помощью парного тега <DIV>, внутри которого помещают HTML-код, формирующий содержимое контейнера (листинги 10.1-10.3).
В листинге 10.1 мы поместили в блочный контейнер заголовок и два абзаца.
Листинг 10.1
<DIV>
<H3>Это заголовок</H3>
<P>Это первый абзац.<P>
<P>Это второй абзац.<P>
</DIV>
Листинг 10.2 иллюстрирует блочный контейнер, содержащий таблицу.
Листинг 10.2
<DIV>
<TABLE>
<CAPTION>Это таблица</CAPTION>
<TR>
<TH>Это первый столбец</TH>
<TH>Это второй столбец</TH>
</TR>
. . .
</TABLE>
</DIV>
А блочный контейнер, приведенный в листинге 10.3, может похвастаться самым "богатым" содержимым.
Листинг 10.3
<DIV STYLE="text-align: center">
<VIDEO SRC="film.ogg" CONTROLS>
</VIDEO>
<P>Щелкните кнопку воспроизведения, чтобы просмотреть фильм.</P>
</DIV>
Во-первых, мы поместили в него видеоролик и абзац с текстом, предлагающим на- чать просмотр этого видеоролика. Во-вторых, мы привязали к блочному контейнеру встроенный стиль, задающий выравнивание текста по центру. Отметим при этом, что по центру также будет выровнен и сам видеоролик.
Блочные контейнеры применяют значительно чаще, чем встроенные. Именно на блочных контейнерах основан контейнерный Web-дизайн, о котором сейчас пойдет разговор.
Основы контейнерного Web-дизайна
Контейнерный Web-дизайн известен уже довольно давно. В настоящее время он постепенно вытесняет более старые разновидности Web-дизайна. И тому есть много причин.