Атрибут z-index устанавливает порядок, в котором свободно позициониро- ванные элементы будут перекрываться друг другом. Элемент с бóльшим зна- чением z-index перекрывает элементы с меньшим значением. Значение у родителя равно нулю.

Рассмотрим  порядок  перекрытия  на  примере,  а  заодно  приведем  вариант блочной верстки с использованием абсолютного позиционирования для па- нели навигации (листинг 2.12).

Некоторые современные броузеры дают пользователю возможность уви- деть список привязанных к документу таблиц стилей и самостоятель- но выбрать одну из них.  Таким образом можно с легкостью добавить, например, таблицу стилей, инвертирующую цвета элементов страницы.

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

Сайты с меню слева и большой областью с контентом справа, как на рис. 9.27, крайне часто встречаются в Сети. Рассмотрим способ создания такого макета с помощью CSS.

Рис. 9.27. Создание «резинового» макета с двумя колонками с помощью CSS

Элемент input может быть различных  типов, и вам наверняка захочет- ся определить разные стили для кнопок и флажков. Как создать разные правила стилей для полей формы?

Решение

Чтобы задать стиль для различных полей, можно воспользоваться CSS- классами.  Форма в следующем примере содержит два элемента input, один из которых является текстовым полем, а другой – кнопкой Submit. Каждому из них присвоен соответствующий класс:

Чередование фонового цвета строк встречается гораздо чаще, чем чере- дование цвета столбцов. Однако этот прием достаточно эффективен для выделения группы данных.

Решение

Для описания колонок таблицы мы воспользуемся элементом col. При этом можно задать для них фоновый цвет с помощью CSS. В следующей разметке видны добавленные для каждого столбца элементы col, каж- дому из которых присвоено имя класса (как и в примере с изменением фонового цвета строк в разделе «Чередование фонового цвета строк та- блицы»).

Без применения каскадных таблиц стилей элементы формы будут ото- бражены в соответствии с используемыми  броузером и операционной системой настройками  по умолчанию.  Однако использование CSS по- зволяет создать формы, соответствующие дизайну вашего сайта.

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

Для структурирования табличных  данных  лучше всего использовать

HTML, несмотря на то что по умолчанию  такие таблицы выглядят  не

слишком  привлекательно.  К счастью, вид таблицы  можно  изменить с помощью CSS, что почти не увеличивает объем разметки и позволяет в дальнейшем управлять отображением табличных данных из таблицы стилей.

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