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

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

Добиться прозрачности можно с помощью графики в формате PNG – со- хранив ваши изображения в формате 24-битного PNG, можно реали- зовать эффект прозрачности и полупрозрачности. Изображения в фор- мате GIF также поддерживают прозрачность, однако при сохранении необходимо добавить к нему кромку (matte) – цвет, сходный с цветом фона, на котором оно будет расположено.

Кнопки должны выглядеть как кнопки, если вы хотите, чтобы пользо- вателю было понятно, куда нужно нажимать. Однако в определенных случаях вы можете захотеть придать кнопке Submit формы вид обычно- го текста.

Решение

Рассмотрим следующее правило стиля:

chapter06/textbutton.css (фрагмент)

.btn {

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

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

Решение

Абзац можно выровнять по ширине с помощью свойства text-align, на- пример:

chapter02/justify.css

p {

text-align: justify;

Отдельные таблицы стилей можно создавать для разных броузеров, а можно ли для разных устройств?

Решение

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

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

Решение

Создать такой привлекательный эффект гораздо проще с помощью CSS, а не графики. Для этого используется селектор псевдокласса :hover, как и при задании стиля для ссылок при наведении на них указателя мыши.

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

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

Можно ли с помощью метода, описанного в разделе «Создание «резино- вого» макета с двумя колонками, в котором слева расположено меню, а справа – основная область с контентом», создать макет, в котором меню расположено справа?

Решение

Конечно, это можно сделать с помощью того же метода! Для этого нуж- но переместить меню слева направо и задать для области с контентом большой внешний отступ справа, чтобы освободить для меню место. Ре- зультат показан на рис. 9.31.