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

Удалим из контейнера cmain код, который создает абзац с гиперссылками, указывающими на Web-страницы — описания тегов, и относящийся к нему заголовок. Надобности в них больше нет.

Сохраним исправленную Web-страницу index.htm и откроем ее в Web-обозревателе. Ниже пункта "HTML" "внешнего" списка, формирующего полосу навигации, мы увидим пункты только что созданного вложенного списка.

Вложенный список в полосе навигации выглядит просто ужасно. Поэтому, не откладывая дела в долгий ящик, приступим к созданию для него представления.

Поскольку мы существенно увеличили размер полосы навигации, может наступить такой момент, когда она станет больше контейнера cnavbar. Так что первым делом зададим для этого контейнера подходящее поведение при переполнении, дополнив соответствующий ему именованный стиль (листинг 11.8).

Листинг 11.8

#cnavbar { width: 250px; height: 570px; float: left; overflow: auto; margin-right: 10px }

Теперь сформулируем требования к вложенному списку и его пунктам.

— Маркер пунктов вложенного списка — отсутствует.

— Вложенный список, формирующий полосу гиперссылок, сдвинуть влево на 30 пикселов. Так мы ликвидируем образовавшееся после удаления маркеров свободное пространство.

— Внешний отступ у вложенного списка сверху — 10 пикселов. Так мы отделим его от пункта "внешнего" списка, в который он вложен.

— Размер шрифта у пунктов вложенного списка — 10 пунктов. Раз уж вложенный список является как бы "подчиненным", то пусть его пункты будут набраны шрифтом меньшего размера.

— Отступы и рамки у пунктов вложенного списка отсутствуют. Так мы сделаем вложенный список компактнее.

Чтобы реализовать эти требования, допишем в конец таблицы стилей main.css

CSS-код листинга 11.9.

Листинг 11.9

#navbar LI UL { list-style-type: none; margin-left: -20px; margin-top: 10px }

#navbar LI UL LI { font-size: 12pt; padding: 0px; margin: 0px; border-style: none }

Мы создали два комбинированных стиля. Первый задает параметры вложенного списка. Там комментировать нечего.

Второй комбинированный стиль задает параметры пунктов вложенного списка. Отметим, что в нем мы явно задали величины внешних и внутренних отступов, равные нулю, и отсутствие рамки. Если мы этого не сделаем, к пунктам вложенного списка будут применены параметры, которые мы задали для пунктов "внешнего" списка, и у пунктов вложенного списка также появятся отступы и рамки. Что нам совсем не нужно.

Сохраним таблицу стилей main.css и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу <F5>. Полоса навигации должна выглядеть так, как показано на рис. 11.2.

Рис. 11.2. Полная полоса навигации на Web-странице index.htm

А что, получилось неплохо! По-деловому строго и, вместе с тем, симпатично.

На этом закончим с HTML и содержимым Web-страниц. И снова вернемся к CSS и представлению.

Параметры выделения

Мы знаем множество способов привлечь внимание посетителя к определенным элементам Web-страниц, использовав теги HTML или атрибуты стиля CSS. Но CSS 3 предлагает нам еще один способ сделать это — так называемое выделение.

Именно о нем сейчас и пойдет речь.

— Выделение CSS 3 представляет собой рамку, которой окружается данный элемент Web-страницы.

— Мы можем задавать параметры выделения: толщину, цвет и стиль.

— Выделение, в отличие от знакомой нам рамки CSS, не увеличивает размеры элемента Web-страницы. Так что можно спокойно применять выделение, не опасаясь, что оно нарушит выстраданный нами контейнерный дизайн.

Для задания параметров выделения CSS 3 предназначено четыре специальных атрибута стиля. Сейчас мы их рассмотрим.

Атрибут стиля outline-width задает толщину рамки выделения:

outline-width: thin|medium|thick|<толщина>|inherit

Здесь доступны те же значения, что и для знакомого нам атрибута стиля border-width.

Пример:

DFN { outline-width: thin }

Здесь мы задали для содержимого тега <DFN> тонкую рамку выделения. Атрибут стиля outline-color задает цвет рамки выделения: outline-color: <цвет>|inherit

ВНИМАНИЕ!

Цвет рамки выделения всегда следует задавать явно — в противном случае оно может быть не нарисовано.

Пример:

DFN { outline-width: thin; outline-color: black }

Теперь выделение содержимого тега <DFN> будет выведено черным цветом.

Атрибут стиля outline-style задает стиль линий, которыми будет нарисована рамка выделения:

outline-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения здесь доступны те же, что и для атрибута стиля border-style.

Пример:

DFN { outline-width: thin; outline-color: black; outline-style: dotted }

Атрибут стиля outline позволяет задать сразу все параметры для рамки выделения:

outline: <толщина> <стиль> <цвет> | inherit

DFN { outline: thin dotted black }

А что, это идея! Давайте добавим в нашу таблицу стилей main.css вот такой стиль:

DFN { outline: thin dotted #B1BEC6 }

После этого все новые термины (т. е. содержимое тегов <DFN>) на наших Web-страницах будут выделены тонкой точечной рамкой светло-синего цвета.

Что дальше?

В этой главе мы научились создавать у элементов Web-страницы отступы и рамки. И доделали представление наших Web-страниц, придав им профессиональный лоск.

В следующей главе мы познакомимся с возможностями CSS, которые задают параметры таблиц. Их будет совсем немного.

ГЛАВА 12. Параметры таблиц

В предыдущей главе мы научились создавать у элементов Web-страниц отступы, рамки и выделение и применили свои умения на практике, сделав наши Web-страницы еще привлекательнее. Заодно мы наконец-то создали полную полосу навигации, включающую гиперссылки на все Web-страницы нашего Web-сайта. Теперь посетителю будет намного удобнее "путешествовать" по нему.