| |
need to have both an image and
text on the same page. Usually, the Web browser
will put an image on the page, and continue any
text at the lower right-hand corner of the image -
thus leaving a lot of blank space along the right
or left-hand side of the image. By "floating" the
image left or right, you can have the Web
browser write text all along the side of the
image as shown here.
Notice also that the text is indented away from the sides of the Web
page-yet another thing CSS lets you do easily.
Рис. 4.2. Web-страница с плавающим рисунком текстом с полями
• Четкий контроль над расположением, шрифтами, цветами, фоном и други-
ми типографическими эффектами.
• Способ изменения внешнего вида и форматирования неограниченного ко-
личества Web-страниц при изменении всего одного элемента — каскадного
списка стилей.
• Возможность создания зрелищных страниц, использующих меньший
объем кода, что, в свою очередь, позволяет сократить объемы страниц и
быстрее загружать и отображать их в Web-браузерах.
Несмотря на довольно-таки холодный прием (в качестве конкурента широко
используемого в то время динамического HTML —DHTML), каскадные списки
стилей набирают все большую и большую силу благодаря постоянно углубляю-
щейся поддержке спецификаций каскадных списков стилей Web-браузерами ком-
паний Microsoft и Netscape.
Разделение содержимого и внешнего вида
Язык HTML (как это первоначально предполагалось) не был предназначен
для управления внешним видом Web-страниц. Он задумывался в качестве сред-
ства, которое бы позволило авторам указать элемент, который должен находиться
на странице, и оставить Web-браузеру решать, каким образом вывести этот эле-
мент на экран. Если вы помните, язык HTML был разработан для того, чтобы
каждый человек, имеющий компьютер с Web-браузером и соединением с сетью
Internet, мог просмотреть любой HTML-документ, независимо от возможностей
видеокарты или разрешения монитора.
Тем не менее, с расширением содержимого Web-страниц и включением в них
многоцветного текста различного типа и размера, графических изображений,
1 76 Глава 4. Каскадные списки стилей
картинок и анимации, дизайнеры все менее и менее желали, чтобы Web-браузе-
ры ограничивали внешний вид Web-страниц. Перед разработкой каскадных спис-
ков стилей для обеспечения правильного расположения элементов на странице
дизайнерам приходилось использовать HTML-таблицы и вставлять прозрачные
(разделительные) изображения в формате GIF для создания необходимых полей
и интервалов между объектами на странице. Кроме того, с помощью HTML-дес-
крипторов форматирования и атрибутов дескрипторов и Web-ди-
зайнеры получали определенный контроль над внешним видом текста страницы
и фоном.
С другой стороны, каскадные списки стилей для управления содержимым
Web-страницы позволяют записывать инструкции выравнивания и форматирова-
ния в раздел заголовка страницы или во внешний по отношению к HTML-коду
файл. Более того, правила каскадных списков стилей представляют собой про-
стые текстовые операторы, которые дают возможность управлять положением и
форматом одного или нескольких элементов без использования таблиц и графи-
ческих изображений. Таким образом, разделение содержимого страницы и
средств обеспечения ее внешнего вида позволяет упростить Web-страницы и об-
легчить их сопровождение и обновление. Представьте себе, например, что необ-
ходимо изменить тип шрифта, используемого на многих страницах Web-сайта.
Без применения механизма каскадных списков стилей пришлось бы изменять
(или добавлять) один или несколько дескрипторов на каждую страницу.
Поместив указание о выборе типа шрифта в каскадный список стилей, на кото-
рый ссылаются все странице сайта, для изменения шрифта на всех страницах до-
статочно будет изменить одно правило списка стилей.
Создание списка стилей
Для создания списка стилей напишите одно или несколько правил между на-
чальным и конечным дескрипторами () в разделе заголовка
Web-страницы (в разделе ). (В этой главе будет рассказано, каким образом
можно создавать каскадные списки стилей в форме внешних документов.) От-
кройте свой любимый текстовый редактор (например, Блокнот) и введите следу-
ющий HTML-код:
<Ъ1'Ые>Вн
|
|
