Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

— 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. Там все просто и наглядно, так что не ошибетесь.

Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации: