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

— Внешний отступ у вложенного списка сверху — 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-сайта. Теперь посетителю будет намного удобнее "путешествовать" по нему.

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

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

Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align, описанный в главе 9:

TD, TH { text-align: center }

Этот же атрибут стиля пригоден для выравнивания текста в заголовке таблицы (теге <CAPTION>):

CAPTION { text-align: left }

Содержимое ячеек таблиц по вертикали мы выровняем с помощью атрибута стиля vertical-align:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|<промежуток между базовыми линиями>|inherit

Применительно к другим элементам Web-страниц он был описан в главе 8, но в случае ячеек таблиц ведет себя несколько по-другому.

— top — выравнивает содержимое ячейки по ее верхнему краю (обычное поведение).

— middle — выравнивает содержимое ячейки по ее центру.

— bottom — выравнивает содержимое ячейки по ее нижнему краю.

Остальные значения этого атрибута стиля действуют так же, как и для других элементов Web-страниц (см. главу 8):

TD, TH { vertical-align: middle }

Параметры отступов и рамок

Для задания отступов мы можем пользоваться атрибутами стиля, знакомыми нам по главе 11.

— Для задания внутренних отступов между содержимым ячейки и ее границей — атрибутами стиля padding-left, padding-top, padding-right, padding-bottom и padding.

— Для задания внешних отступов между границами соседних ячеек — атрибутом стиля border-spacing.

Параметры рамок зададим через соответствующие атрибуты стиля, которые также знакомы нам по главе 11 (листинг 12.1).

Листинг 12.1

TABLE { align: center; border: medium solid black; border-spacing: 1px }

TD, TH { border: thin dotted black; padding: 2px }

В листинге 12.1 мы назначили для самой таблицы тонкую сплошную черную рамку и отступ между ячейками, равный одному пикселу, а для ячеек этой таблицы — тонкую точечную черную рамку и отступ между границей ячейки и ее содержимым, равный двум пикселам.

Если мы зададим рамки вокруг ячеек таблицы, Web-обозреватель нарисует рамку вокруг каждой ячейки. Такая таблица будет выглядеть как набор прямоугольников- ячеек, заключенный в большой прямоугольник-таблицу (рис. 12.1).

Рис. 12.1. Обычное поведение Web-обозревателя — рамки рисуются вокруг каждой ячейки таблицы

Однако в печатных изданиях гораздо чаще встречаются таблицы другого вида. В них рамки присутствуют только между ячейками (рис. 12.2).

Рис. 12.2. Таблица, в которой рисуются только рамки, разделяющие ячейки

Атрибут стиля border-collapse указывает Web-обозревателю, как будут рисоваться рамки ячеек в таблице:

border-collapse: collapse|separate|inherit

— separate — каждая ячейка таблицы заключается в отдельную рамку (см. рис. 12.1). Это обычное поведение.

— collapse — рисуются рамки, разделяющие ячейки таблицы (см. рис. 12.2). Данный атрибут стиля применяется только к самим таблицам (тегам <TABLE>). Пример:

TABLE { border-collapse: collapse }

Параметры размеров

Для задания размеров — ширины и высоты — таблиц и их ячеек подойдут атрибуты стиля width и height, описанные в главе 10.

— Если требуется задать ширину или высоту всей таблицы, нужный атрибут стиля указывают именно для нее:

TABLE { width: 100 %; height: 300px }

— Если требуется задать ширину столбца, атрибут стиля width указывают для первой ячейки, входящей в этот столбец (листинг 12.2).

Листинг 12.2

<TABLE>

<TR>

<TH>Первый столбец</TH>

<TH STYLE="width: 40px">Второй столбец шириной в 40 пикселов</TH>

<TH>Третий столбец</TH>

</TR>

.

</TABLE>

— Если требуется задать высоту строки, атрибут стиля height указывают для первой ячейки этой строки (листинг 12.3).

Листинг 12.3