close

Вход

Забыли?

вход по аккаунту

?

CSS 100 и 1 совет

код для вставкиСкачать
Óðîâåíü ïîäãîòîâêè ÷èòàòåëåé: сðåäíèé
Êàòåãîðèÿ: âåб-ðàзðàбîòêà
CSS
• • • 9 785932 861820
ISBN 978-5-93286-182-0
The CSS Anthology
101 Essential Tips, Tricks & Hacks
Third Edition
Rachel Andrew
CSS
100 и 1 совет
Третье издание
Рейчел Эндрю
Санкт-Петербург – Москва
2010
Серия «High tech»
Рейчел Эндрю
­ 1 и 1 совет -е издание
Перевод А. Минаевой
Главный редактор А. Галунов
Зав. редакцией Н. Макарова
Выпускающий редактор П. Щеголев
Научный редактор В. Коршунов
Редактор Ю. Бочина
Корректор Е. Кирюхина
Верстка К. Чубаров
Эндрю Р.
CSS: и совет е издание. – Пер. с англ. – СПб: Символ Плюс . – с. ил.S «CSS: и совет» представляет интерес для вебдизайнеров и разработчи
ков у которых нет времени на штудирование огромного количества теоретиче
ских материалов при создании собственного сайта. Это сборник готовых реше
ний наиболее распространенных проблем которые можно сразу применить на прак тике более того они могут послужить основой для разработки собствен
ных методов. Здесь представлены ответы на сложные вопросы и практические ме тоды использования CSS примеры создания сложных макетов страниц эле мен тов навигации и форм решение проблем связанных с особенностями различ ных броузеров.
Чтение книги не требует специальной подготовки: первая глава содержит об
зор основных особенностей CSS но в дальнейшем сложность приводимых ме
тодов постепенно возрастает так что наличие у читателя базовых знаний CSS существенно облегчит восприятие материала.
Третье издание полностью пересмотрено и обновлено с целью охвата новейших технологий и особенностей самых современных броузеров включая ¡¢£¤¥¦ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Данную книгу можно использовать как справочник для поиска подходящего решения при создании сайта и тем самым выиграть время и сдать проект в срок.
ISBN 978-5-93286-182-0 ISBN 978-0-9805768-0-1 (англ)
© Издательство СимволПлюс °±¨²¥¢¡³£´ ¨¢µ§¶«µ¨¡¥§ ¥¤ ¨²£ ©§·«¡¶² £´¡¨¡¥§ © S¡¨£¸¥¡§¨ ¸¨¹ º¨´. »²¡¶ ¨¢µ§¶
«µ¨¡¥§ ¡¶ ª±¼ «¡¶²£´ µ§´ ¶¥«´ ¼¹ ª£¢½¡¶¶¡¥§ ¥¤ S¡¨£¸¥¡§¨ ¸¨¹ º¨´ ¨²£ ¥¾§£¢ ¥¤ µ«« ¢¡·²¨¶ ¨¥ ª±¼«¡¶² µ§´ ¶£«« ¨²£ ¶µ½£.
Все права на данное издание защищены Законодательством РФ включая право на полное или час
тичное воспроизведение в любой форме. Все товарные знаки или зарегистрированные товарные зна
ки упоминаемые в настоящем издании являются собственностью соответствующих фирм. Издательство «СимволПлюс». À СанктПетербург линия тел. Á À ¾¾¾.¶¹½¼¥«.¢±. Лицензия ЛП À от ...
Подписано в печать .À.. Формат × Ä
. Печать офсетная. Объем печ. л. Тираж 15 экз. Заказ №
Отпечатано с готовых диапозитивов в ГУП «Типография «Наука» À СанктПетербург линия .
Посвящается Бетани
Оглавление
Предисловие ...............................................................................
1. SS основы основ .....................................................................
Определение стиля с помощью CSS ...............................................
Что такое селекторы и как их правильно использовать ....................
Каким образом броузер определяет какие стили нужно использовать .................................................
Заключение
..............................................................................À
2. Оформление текста и другие базовые возможности .................
Задание определенного шрифта для текста ...................................
Выбор единиц измерения размера шрифтов: пикселы пункты пики или чтото другое
.....................................
Удаление подчеркивания ссылок
.................................................ÀÀ
Создание ссылки меняющей цвет при наведении на нее указателя мыши ..........................................À
Использование на одной странице различных стилей ссылок ...........À
Присваивание первому элементу в списке отличного от последующих элементов стиля ......................
Создание цветного фона для заголовка
..........................................
Подчеркивание заголовков
..........................................................
Устранение отступа между элементом ² и следующим за ним абзацем .......................................................
Выделение текста на странице
.....................................................
Изменение высоты строки Áмежстрочного интервала в тексте ..........
Выравнивание текста по ширине
..................................................
Изменение стиля горизонтальной линии
.......................................
Вывод текста с отступом..............................................................
Центрирование текста
................................................................
Вывод текста заглавными буквами с помощью CSS .........................
Изменение стиля маркеров списка или удаление маркеров ..............
Использование изображения вместо маркера списка .......................À
Удаление у пунктов списка отступа слева ......................................À
8 Оглавление
Размещение пунктов списка по горизонтали ..................................
Удаление отступов от края страницы
............................................
Удаление отступов по умолчанию для всех элементов страницы .......
Добавление комментария в файл с каскадной таблицей стилей .........
Заключение
..............................................................................
3. SS и графика ..........................................................................
Добавление рамки к изображению ................................................
Удаление средствами CSS синей рамки вокруг изображения выполняющего функцию ссылки
.................................................
Задание фонового изображения для страницы с помощью CSS ..........
Как изменить способ размножения фонового изображения ..............À
Как позиционировать фоновое изображение
..................................
Как сделать фоновое изображение неподвижным при прокрутке контента
..............................................................
Для каких элементов можно задавать фоновое изображение ............
Размещение текста поверх изображения
.......................................À
Как задать для документа более одного фонового изображения
.........
Применение эффекта прозрачности
..............................................
Создание сложных рамок вокруг изображений например двойных
.....................................................................
Заключение
..............................................................................
. Навигация ...............................................................................
Оформление списка в виде навигационного меню ...........................
Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS без использования изображений или сценариев на ˵̵SÍ¢¡ª¨
.............................................................................
Создание навигационного меню с подпунктами с помощью списков и таблиц стилей .............................................
Создание горизонтального меню с помощью списков и CSS ............
Создание средствами CSS навигационной панели с кнопками .........
Создание с помощью CSS панели навигации на основе вкладок .......
Выделение ссылок ведущих на внешний сайт..............................
Изменение вида курсора
...........................................................
Реализация смены изображений на панели навигации без использования ˵̵SÍ¢¡ª¨
....................................................
Оформление карты сайта
..........................................................
Создание выпадающего меню исключительно средствами CSS ........
Создание доступного навигационного меню на основе изображений с помощью CSS .......................................
Заключение
............................................................................
Оглавление 9
5. Табличные данные ................................................................
Представление табличных данных с помощью CSS .......................
Организация табличных данных: удобство доступа и наглядность
..................................................À
Создание рамки вокруг таблицы без использования λϺатрибута ¼¥¢´£¢ ...................................
Удаление пустого пространства между ячейками появляющегося после добавления рамок
.....................................
Представление табличных данных в привлекательной и удобной форме ...........................................
Чередование фонового цвета строк таблицы
.................................À
Изменение фонового цвета строки при наведении на нее указателя мыши ........................................À
Чередование фонового цвета столбцов таблицы
............................
Создание календаря с помощью CSS ...........................................
Заключение
............................................................................
6. Формы и пользовательские интерфейсы ................................À
Изменение вида элементов формы с помощью CSS ........................
Использование разных стилей для разных полей одной и той же формы ...............................................................
Избавление от переносов строки и потери места на странице ..........
Придание кнопке подтверждения вида текста
..............................
Возможность заполнения формы для пользователей текстовых устройств ......................................
Создание двухколоночной формы с помощью CSS вместо таблиц ....
Группировка связанных полей формы
........................................
Задание стиля для клавиш быстрого доступа
...............................À
Использование цветного фона для меню созданного с помощью элементов ¶£«£Í¨ .......................................
Создание таблицы стилей для формы с возможностью ввода данных как в электронную таблицу ...................................
Выделение поля формы по которому пользователь щелкает мышью
......................................................................À
7. Кросс-броузерные решения ...................................................
В каких броузерах следует протестировать свой сайтÐ ...................
Тестирование сайта в различных броузерах при наличии только одной ОС ....................................................
Сервисы показывающие вид сайта в различных броузерах ............
Возможность поддержки нескольких версий §¨£¢§£¨ ©¦ª«¥¢£¢ в Ñ¡§´¥¾¶ ......................................................
10 Оглавление
Определение круга броузеров для которых необходимо поддерживать все аспекты дизайна страницы
..............................
Указание базовой таблицы стилей для самых старых броузеров ......
Что такое режим совместимости и как его избежать ......................
Задание разных таблиц стилей для §¨£¢§£¨ ©¦ª«¥¢£¢ и .............
Уход от наиболее распространенных ошибок в §¨£¢§£¨ ©¦ª«¥¢£¢ и ............................................................
Достижение прозрачности изображения в формате ¸Ò в §¨£¢§£¨ ©¦ª«¥¢£¢ .................................................................
Корректное отображение в © сайта соответствующего стандартам ÑC
............................................
Что делать если CSS не работает
................................................À
Интерпретация сообщений выводимых инструментом ÑC Óµ«¡´µ¨¥¢ ....................................
Заключение
............................................................................
8. Доступность и альтернативные устройства .............................
Аспекты доступности о которых следует помнить при использовании CSS .............................................................
Тестирование сайта в текстовом броузере ....................................
Тестирование сайта с помощью экранного диктора .......................À
Создание отдельных таблиц стилей для различных устройств ........
Создание таблицы стилей для печатной версии документа .............
Добавление на сайт альтернативных таблиц стилей ......................À
Нужно ли отображать на сайте инструменты для изменения размера шрифта или переключения между различными таблицами стилейÐ
.......................................
Создание альтернативных таблиц стилей без копирования кода из основной таблицы .................................
Заключение
............................................................................
9. Позиционирование элементов с помощью SS ........................
В каких случаях следует использовать классы а в каких – идентификатор
........................................................................
Отображение строкового элемента как блочного и наоборот ..........
Задание внешних и внутренних отступов с помощью CSS...............
Обтекание текстом изображения
................................................À
Как избежать смещения следующего элемента вверх при использовании свойства ¤«¥µ¨
...............................................
Как расположить логотип сайта слева а слоган – справа ...............
Позиционирование элемента на странице с помощью CSS ..............
Центрирование блока на странице
..............................................
Создание блока с закругленными краями ....................................
Оглавление 11
Создание «резинового» макета: слева – меню а справа – область с контентом ...................................................
Изменение расположения элементов макета на противоположное чтобы меню было справа .............................
Макет фиксированной ширины с двумя колонками по центру страницы
..................................................................À
Создание колонки занимающей все доступное пространство по высоте.......................
Добавление тени к блоку ...........................................................
Создание макета с тремя колонками средствами CSS .....................
Добавление к «резиновому» макету нижнего блока .......................
Создание галереи миниатюр
......................................................
Создание макета страницы с помощью CSSтаблиц .......................
Заключение
............................................................................
Алфавитный указатель ..............................................................
Предисловие
Кроме написания книг подобных той что вы держите в руках я пишу код. Я зарабатываю на жизнь разработкой вебсайтов и приложений надо полагать как и многие мои читатели. Я использую CSS в повсед
невной работе и мне прекрасно известно чего стоят отчаянные попытки найти ошибки в коде когда проект должен быть сдан на следующее утро.
Многие дизайнеры и разработчики предпочитающие использовать ка
скадные таблицы стилей лишь для простого форматирования текста или вовсе обходиться без их использования объясняют это нехваткой времени на изучение новой для них технологии с нуля. В конечном сче
те применение таблиц и изображений в формате Ò позволяет достичь поставленной цели а значит работа выполнена и оплачивается.
Мне повезло: я начала изучение технологии CSS с момента ее появле
ния и настолько увлеклась что мне захотелось постоянно совершен
ствовать свои навыки. Именно благодаря рано появившемуся интересу к CSS мои знания развивались вместе с самой технологией и теперь за моими плечами девятилетний опыт проектирования вебсайтов с помо
щью этой технологии.
В данной книге я намерена представить полезные приемы и методы ис
пользования CSS упрощающие процесс и сокращающие время разра
ботки вебсайтов и приложений.
Эта книга не предлагает вам многостраничных теоретических рассужде
ний. В ней вы найдете решения которые можно сразу же применить на практике более того они могут послужить основой для разработки соб
ственных методов. По опыту могу сказать что легче чемуто научиться делая чем просто читая поэтому вполне можете полагаться на данную книгу как на справочник для поиска подходящего решения при созда
нии клиентского вебсайта и тем самым выиграть время и сдать проект в срок. При этом хочется надеяться что экспериментирование с предла
гаемыми примерами поможет освоению новых технологий.
Книга составлена таким образом чтобы вы смогли использовать пред
ставленные материалы для решения текущих задач. Ее необязатель
но читать от корки до корки – достаточно изучить интересующий вас в данный момент раздел. Каждый пример сопровождается коммента
рием объясняющим механизм работы данного метода. Это позволит вам использовать эти примеры в дальнейшем модифицируя их в соот
ветствии с решаемыми в данный момент проблемами.
1 Предисловие
Надеюсь что вам понравится эта книга. Я получила большое удоволь
ствие от самого процесса ее написания и надеюсь что она станет для вас полезным ежедневным справочником а также помощником в осво
ении новых методов использования CSS.
Для кого предназначена эта книга
Данная книга будет интересна всем кому приходится работать с CSS а в особенности вебдизайнерам и разработчикам которые конечно видели много красивых вебсайтов основанных на применении CSS но у которых нет времени на то чтобы проштудировать огромное количе
ство теоретических и накопленных практических материалов при соз
дании собственного сайта. В этой книге вы найдете готовые решения различных проблем которые могут быть использованы непосредствен
но в представленном здесь виде или взяты за основу при создании соб
ственных решений. В целом данную книгу нельзя назвать учебником так как первая гла
ва содержит обзор только основных особенностей CSS и сложность при
водимых методов возрастает при движении от начальных глав к заклю
чительным то наличие у вас базовых знаний CSS существенно облег
чило бы восприятие материала книги.
О чем написано в этой книге
Глава 1. CSS: основы основ
Данная глава по форме сильно отличается от прочих частей книги. По сути она является кратким учебником по базовым возможностям CSS который позволит также освежить имеющиеся знания. Если вы активно используете CSS в своих проектах можете пропустить эту главу и возвращаться к ней по мере необходимости – если нужно бо
лее глубоко изучить основополагающие принципы технологии.
Глава 2. Форматирование текста и другие базовые возможности
Данная глава содержит информацию о различных методах форма
тирования и задания стиля текста в ваших документах: настройки размера шрифта цвета и избавления от раздражающего пустого пространства обрамляющего элементы страницы. Вы наверняка найдете для себя интересные приемы даже если давно пользуетесь CSS для задания стилевого оформления текста.
Глава 3. CSS и графика
В данной главе я предлагаю различные приемы совместного исполь
зования CSS и графических элементов позволяющие добиться впе
чатляющих результатов. Среди рассматриваемых тем – управление фоновым изображением различных элементов позиционирование текста и изображений а также многие другие.
Предисловие
15
Глава 4. Навигация
Без навигации не обойдется ни один проект и в данной главе мы рассмотрим методы ее создания с помощью CSS. Представленные приемы позволят использовать CSS вместо графического меню реа
лизовать навигацию с помощью вкладок создавать удобные и при
влекательные панели навигации на основе CSS и фоновых изображе
ний а также использовать списки для структурирования системы навигации.
Глава . Табличные данные
Следует избегать использования таблиц для позиционирования эле
ментов на странице: их необходимо применять по прямому назна
чению – для представления табличных данных как в электронных таблицах. В данной главе мы познакомимся с приемами оформле
ния табличных данных в наиболее привлекательной и удобной для использования форме.
Глава . Формы и пользовательские интерфейсы
Если вы работаете в качестве дизайнера или разработчика то несом ненно тратите уйму времени на создание форм для ввода дан
ных. Из данной главы вы узнаете как с помощью CSS сделать ваши формы удобными привлекательными и доступными для различных категорий пользователей.
Глава . Кроссброузерные решения
Как быть со старыми версиями броузеров броузерами неправильно интерпретирующими определенные свойства CSS и альтернатив
ными устройствамиÐ Решением этих проблем мы займемся в главе . Кроме того мы рассмотрим способы поиска «багов» и тестирования вебстраниц в максимально возможном количестве броузеров.
Глава . Доступность для людей с ограниченными возможностями и альтернативные устройства
Ваши страницы прекрасно выглядят для большинства посетителей сайтаÐ Замечательно однако как же быть людям вынужденным использовать специальные возможности такие как экранная лупа и экранный дикторÐ А пользователям по тем или иным причинам предпочитающим при просмотре вебсайтов пользоваться клавиа
турой вместо мышиÐ В данной главе вы узнаете о том как сделать ваши страницы одинаково доступными для всех пользователей а не только для тех кто не имеет никаких ограничений при доступе к сайту.
Глава . Позиционирование элементов с помощью CSS
В данной главе мы рассмотрим различные способы позиционирова
ния элементов страницы и множество приемов которые можно соче
тать произвольным образом или взять за основу для своих собствен
ных методов при создании оригинальной разметки страницы.
16 Предисловие
Веб-сайт книги
С
айт данной книги доступный по адресу ­­.­­.
­ предлагает следующие возможности.
Архив кода
По ходу чтения книги вы заметите расположенные над листингами на
звания файлов. Они соответствуют именам файлов в архиве кода кото
рый можно загрузить в виде файла в формате Ù¸ щелкнув по ссылке Code Archive на сайте книги. В архиве содержатся все завершенные при
меры представленные в данной книге
. Опечатки и обновления
Ни одна книга не безупречна и внимательный читатель наверняка за
метит парутройку ошибок. Страница Corrections and Typos на сайте книги содержит актуальную информацию о найденных типографских ошиб
ках и опечатках в коде а также обновления связанные с выходом но
вых версий броузеров и появлением новых стандартов.
Форумы S¡
В сообществе дизайнеров S¡¨£¸¥¡§¨ вы можете обсудить данную книгу.
В частности на форуме посвященном CSS вы найдете огромное коли
чество информации выходящей далеко за пределы охвата данной кни
ги. Здесь общаются многие опытные вебразработчики и дизайнеры делясь новыми приемами и трюками отвечая на вопросы – вы не по
жалеете о затраченном времени.
À
Электронные рассылки S¡
Помимо книг подобных этой S¡¨£¸¥¡§¨ составляет бесплатные элек
тронные рассылки среди которых ­­ ­­ и ­­ . В них содержится самая све
жая информация охватывающая различные аспекты разработки веб
сайтов: последние новости выпуск новых продуктов актуальные тен
денции и полезные приемы. Возможно вы захотите читать только но
вости касающиеся CSS но если вас интересуют и другие технологии то вы сможете найти для себя множество полезных тем. Оформить бес
платную подписку можно по адресу ­­.­­.­­.
Архив примеров кода можно скачать с сайта издательства по адресу .
.¡¢¡­
­­.­­.­­. ­­.­­.£
À ­­.­­. £
Предисловие
17
Подкаст S¡
Подкасты S¡¨£¸¥¡§¨ содержат актуальные новости и интервью веб
разработчики и дизайнеры делятся своим мнением по различным во
просам. Они обсуждают последние тенденции в области разработки веб
сайтов приглашают интересных гостей и проводят интервью с самы
ми влиятельными людьми в отрасли. Предыдущие и текущие подска
сты можно послушать по адресу ­­.­­.­
¤­ кроме того вы можете оформить подписку через ¡»±§£¶. Обратная связь
Если вы не смогли найти ответ на свой вопрос на форумах или хотите связаться с нами по какойто иной причине это можно сделать по адре
су ¥­­.. Ваши письма будут рассмотрены службой под
держки сотрудники которой готовы ответить на ваши вопросы. Кроме того мы с благодарностью примем ваши предложения с уточнениями и сообщения о найденных ошибках.
Благодарности
Прежде всего мне хотелось бы поблагодарить всех сотрудников S¡¨£
¸¥¡§¨ – благодаря им эта книга увидела свет. С вами было приятно ра
ботать несмотря на различия часовых поясов – я уже засыпала когда ваш рабочий день только начинался. Спасибо тем кто развивает новые идеи в мире CSS многие из которых будут рассмотрены на страницах книги и тем кто делится ими с сооб
ществом разработчиков.
Спасибо Дрю за одобрение и поддержку за то что обсуждал со мной ме
тоды использования CSS когда я работала над примерами для книги за то что заставлял меня улыбнуться когда я начинала раздражаться от усталости за готовность примириться с тем что мы практически со
вершенно выпали из светской жизни. И наконец я хочу поблагодарить свою дочь Бетани за понимание когда я проводила все время за ком
пьютером и за то что каждый день напоминала мне о том что в жизни действительно важно. Благодаря вам двоим многое становится возмож
ным спасибо.
Обозначения¤ принятые в книге
Любая разметка – λϺ или CSS – выводится моноширинным шриф
том как в следующем примере:
<h1>A perfect summer’s day</h1><p>It was a lovely day for a walk in the park. The birdswere sinin and the kids were all back at school.</p>
18 Предисловие
Если данный код представлен в размещенном на сайте архиве в верх
ней части листинга будет отображено имя соответствующего файла на
пример:
¦.
.footer backroundcolor bordertop 1p­ solid Если выводится только часть кода к названию будет добавлено слово фрагмент:
¦. ©фрагментª
bordertop 1p­ solid Если к рабочему примеру добавляется новый код он выделяется жир
ным шрифтом:
function animate new_variable = “Hello”;
Если для контекста необходим существующий код вместо повторения будет использовано вертикальное многоточие:
function animate Á
return new_variable;
Некоторые части кода не умещаются в одну строчку изза ограничен
ной ширины печатной страницы. Для обозначения разрыва строки ис
пользуется знак Ò. Он выполняет исключительно функцию формати
рования.
.open“http//www.sitepoint.com/blos////userstyleshe Òetscomeofae/” Примечания заметки советы и предупреждения оформлены следую
щим образом:
Совет
Так будут представлены полезные советы и подсказки Примечание
Заметки содержат дополнительную информацию связанную с рассматривае
мой в данный момент темой
Предисловие
19
Внимание
На эти важные аспекты следует обратить внимание
Предупреждение
Предупреждения указывают на подводные камни с которыми вы можете столк
нуться в ходе работы
C сайта издательства Á..¡¢¡­ª можно скачать цветные версии тех иллюстраций где наличие цвета может помочь лучше разобраться в предлагаемом материале.
Глава 1
. SS основы основ
Каскадные таблицы стилей... Звучит несколько устрашающе. Такое название способно вызвать в воображении нагромождение таинствен
ных символов кода едва ли доступных для понимания новичку. Одна
ко на самом деле CSS – один из самых простых и удобных в использо
вании инструментов имеющихся в распоряжении вебразработчиков. В первой главе отличающейся по формату от последующих частей мы познакомимся с основами CSS и использованием этой технологии для облегчения задачи управления единообразно оформленным сайтом. Если у вас уже есть некоторый опыт работы с CSS для форматирования текста на вебстраницах можете пропустить данную главу и присту
пить к чтению второй главы где мы начнем рассмотрение практиче
ских решений.
Определение стиля с помощью SS
CSS используется главным образом для создания описаний Áили декла
раций стилей Áк примеру шрифта размера или цвета и их примене
ния к выбранным частям λϺкода посредством селекторов – ссылок на элемент или группу элементов по отношению к которым нужно при
менить указанный стиль.
Решение
Рассмотрим данный основополагающий механизм на примере следую
щего λϺдокумента:
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>A imple ae</title>
Определение стиля с помощью ­
21
<meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> </head> <body> <h1>First Title</h1>
<p>A pararaph of interestin content.</p> <h2>Second Title</h2>
<p>A pararaph of interestin content.</p> <h2>Third title</h2>
<p>A pararaph of interestin content.</p> </body></html>
Он содержит три заголовка Áвыделенных жирным шрифтом создан
ных с помощью тегов <h1> и <h>. Если разработчик не определил соб
ственные стили заголовки будут оформлены в соответствии со стан
дартной таблицей стилей броузера т. е. заголовок h1 будет отображать
ся крупным шрифтом h – мельче чем h1 но крупнее обычного текста абзаца. Документ оформленный стилями по умолчанию будет впол
не читаемым если он достаточно прост. Для изменения внешнего вида этих элементов будет достаточно добавить несколько строчек CSSкода:
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>A imple ae</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <stle te=”tet/css”> h1 h2 ont a­il sans seri; color ; </stle> </head> <body> <h1>¤irst Title</h1> <p>A pararaph of interestin content.</p> <h>econd Title</h> <p>A pararaph of interestin content.</p> <h>Third title</h> <p>A pararaph of interestin content.</p> </body></html>
Все преобразования разместились между тегами <style> расположен
ными в заголовке страницы Áэлемент headÂ. Мы определили что заго
22 Глава . ­ основы основ ловки h1 и h должны отображаться шрифтом ¶µ§¶¶£¢¡¤ светлоголубого цвета. Особенности синтаксиса мы рассмотрим чуть позднее. Нам ниче
го не потребуется менять в разметке страницы – изменения в описании стиля размещенного в верхней части страницы распространяются на все три имеющихся на странице заголовка и будут также применены ко всем заголовкам добавленным позднее с помощью тегов <h1> или <h>. Примечание
HTML или XHTML? На протяжении всей книги при упоминании вебстраниц разметки и примеров кода я буду использовать термин T Это можно ин
терпретировать как T иили T если специально не оговорено иначе
Теперь когда вы имеете представление о назначении стилей CSS наста
ло время рассмотреть способы их использования в λϺдокументах.
Внутритекстовые стили
Проще всего изменять оформление элементов страницы с помощью внут
ритекстовых стилей. Этот способ заключается в присваивании λϺ
элементу определенного стиля посредством атрибута style как в следую
щем примере:
<p style¡”ont a­il sans seri; color ;”>
Ama¥inly few discothe£ues provide ¦ukebo­es.</p>
Селекторы при этом не используются – описание стиля применяется непосредственно к элементу в тег которого оно добавлено Áв вышепри
веденном примере – в тег <p>. Основным недостатком данного способа является отсутствие возмож
ности повторного использования внутритекстовых стилей. Например чтобы применить тот же самый стиль к другому элементу p нужно сно
ва указать его в качестве значения атрибута style. Если в дальнейшем появится необходимость в изменении определения стиля придется ис
кать и редактировать все теги в которых оно было использовано. Кро
ме того размещение внутритекстовых стилей в разметке страницы за
трудняет чтение и дальнейшее управление кодом.
Встраиваемые стили CSSстили можно применять к вебстраницам с помощью элемента style как в приведенном выше примере. Таким образом у вас появляет
ся возможность создать произвольное количество деклараций стилей размещаемых между открывающим и закрывающим тегами <style>:
<style type¡”te­t/css”> Á CSS Styles…
</style>
Определение стиля с помощью ­
23
Теги <style> расположены внутри элемента head вебстраницы. Атрибут type используется для указания языка на котором написана таблица стилей. Единственным широко распространенным языком для созда
ния стилей является CSS чему соответствует значение te­t/css.
Этот простой и понятный метод размещения стилей между тегами <style> обладает одним недостатком: чтобы использовать определен
ный набор стилей на всем сайте придется скопировать его и разместить в заголовке каждой страницы сайта. Гораздо разумнее вынести все определения стилей в отдельный тексто
вый файл а в самом документе создать ссылку на него. Такой отдель
ный файл называют внешней таблицей стилей. Внешние таблицы стилей
Внешняя таблица стилей – это отдельный файл Áкак правило с расши
рением . содержащий все описания CSSстилей для данного сайта. На один и тот же файл могут ссылаться множество страниц и любые изменения описаний стиля будут распространяться на каждую из них. Такой метод позволяет создавать набор деклараций для целого сайта о чем уже говорилось выше.
Для создания в документе ссылки на внешнюю таблицу стилей Áк при
меру . достаточно разместить в его заголовке элемент link:
<link rel¡”stylesheet” type¡”te­t/css” href¡”styles.css” />
Помните наш первый пример в котором для трех заголовков был опре
делен одинаковый стильÐ Реализуем то же самое с помощью ссылки на внешнюю таблицу стилей с именем .:
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>A imple ae</title>
<meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /><lin rel=”stlesheet” te=”tet/css” hre=”stlescss” /></head><body><h1>¤irst Title</h1><p>…</p><h>econd Title</h><p>…</p><h>Third Title</h><p>…</p></body></html>
2 Глава . ­ основы основ Атрибуту rel необходимо присвоить значение stylesheet а type – te­t/
css. Атрибут href указывает на размещение и имя файла с таблицами стилей.
Файл . содержит следующие описания стилей:
h1¨ h fontfamily sansserif color ©© Подобно изображениям файл . можно использовать много
кратно. Поэтому вы избавляетесь от необходимости повторно вводить описания стилей а также можете быть уверены что все заголовки на сайте будут оформлены одинаково.
Синтаксис SS
Таблица стилей состоит из набора определений стилей. Двумя основными компонентами определения Áили правила стиля являются:
• Список из одного или более селекторов разделенных запятыми. Они указывают на элемент к которому будет применен данный стиль.
• Блок описаний заключенный в фигурные скобки в котором содер
жится информация о том как данный стиль повлияет на отображе
ние элемента.
Блок описаний состоит из одного или нескольких описаний стиля каждый из которых устанавливает значение определенного свойства. Если описаний несколько они отделяются друг от друга точкой с запя
той ÁÂ. Описание свойства состоит из его имени и значения разделен
ных двоеточием Á:Â. Схематично все описанные элементы изображены на рис. ..
селекторы блок описаний
свойство значение свойство значение
Рис. 1.1. Составные части правила ¯ список селекторов и блок описаний
Декларация свойства определяет значения параметров шрифта цветов и других настроек которые будут присвоены элементу после примене
ния стиля. Предлагаемые в данной книге решения в большинстве сво
ем основаны на сочетании различных свойств и их значений.
На рис. . также видно что правило стиля можно записать в одну строчку. Одни разработчики предпочитают переносить каждое новое Что такое селекторы и как их правильно использовать
25
свойство на следующую строку – такой код легче читать другие пишут правила в одну строчку чтобы сэкономить место. Ниже приведены два варианта записи одного и того же стиля:
h1¨ h fontfamily sansserif color ©© h1¨ h fontfamily sansserif color ©© Форматирование не влияет на интерпретацию стилей поэтому вы мо
жете выбрать более близкий вам способ.
Что такое селекторы и как их правильно использовать
В следующем примере используются два селектора – h1 и h. Это означа
ет что указанные стили будут применяться ко всем элементам h1 и h:
h1 h2 fontfamily sansserif color ©© Решение
В этом разделе представлено описание широко используемых в насто
ящее время селекторов CSS. с примерами их практического исполь
зования.
Селекторы типа
Самыми простыми селекторами являются селекторы типа с которы
ми мы уже встречались в приведенных выше примерах. Адресация по имени λϺэлемента обеспечивает применение правила стиля ко всем элементам с данным именем присутствующим в документе. Се
лекторы типа часто используются для определения основных стилей для всех страниц сайта. К примеру следующее правило стиля задает шрифт абзаца используемый на сайте по умолчанию:
fontfamily Tahoma¨ ªerdana¨ Arial¨ elvetica¨ sansserif fontsi¥e 1em color Таким образом устанавливается шрифт размер и цвет для всех абзацев Áэлементов p в документе.
26 Глава . ­ основы основ Селекторы класса
Задавать стили для элемента конечно удобно однако что делать если возникает необходимость определения различных стилей для несколь
ких элементов одного типа размещенных в различных частях страни
цыÐ На помощь придут классы.
Рассмотрим следующий пример в котором задается синий цвет шриф
та для всех абзацев:
p color ¤¤ ОтличноÚ А теперь представьте что на вашей странице будет располо
жена боковая панель с голубым фоном. При этом голубой текст на па
нели сольется с ним и разобрать чтолибо станет просто невозможно. Эту проблему можно решить определив класс для текста выводимого на боковой панели а затем задав для этого класса необходимый стиль с помощью CSS.
Для создания абзаца класса sidebar необходимо вначале добавить атри
бут class с соответствующим значением в открывающий тег:
<p class=”sidebar”>This te­t will be white¨ as specified by the style definition below.</p>
Затем можно приступить к описанию стиля для данного класса:
p color ¤¤ sidebar color FFFFFF;
Во втором правиле используется селектор класса определяющий стиль для любого элемента со значением sidebar атрибута class. Перед именем ставится точка указывающая что это класс а не λϺэлемент.
А если на панели также присутствуют ссылкиÐ По умолчанию все ссылки в вашем документе будут оформлены одинаковым образом. Од
нако если добавить в тег ссылки атрибут class¡”sidebar” они также ста
нут белыми:
<p class=”sidebar”>This te­t will be white¨ <a class=”sidebar”
href¡”link.html”>and so will this link</a>.</p>
Прекрасно. Но возможно вам хотелось бы чтобы ссылки отличались от основного текстаÐ К примеру им можно было бы придать жирное на
чертание. Добавление описания стиля для жирного начертания тек
ста к набору стилей для класса sidebar приведет к тому что весь текст Что такое селекторы и как их правильно использовать
27
на панели будет выведен жирным шрифтом что противоречит постав
ленной нами цели. Нужен CSSселектор для выбора ссылок размещен
ных внутри элемента класса sidebar. Далее путем комбинации селекто
ра типа и селектора класса можно добиться желаемого эффекта:
p color ¤¤ .sidebar color ¤¤¤¤¤¤ asidebarlin asidebarvisited ont weiht bold;
Обратите внимание что в данном примере используются псевдоклассы link и visited. Мы поговорим о псевдоклассах чуть позже в этой главе.
Если вы добавите приведенные выше стили в таблицу стилей вашего сайта и обновите страницу в броузере то увидите что ссылки будут отображены жирным шрифтом белого цвета поскольку к ним были применены оба определенных для класса sidebar правила стилей. Одна
ко если бы мы добавили в третье правило стиль изменения цвета шриф
та цвет ссылок также был бы изменен поскольку третий селектор бо
лее конкретен а правила CSS применяются в порядке увеличения кон
кретности селекторов. Кстати процесс применения различных правил стилей к одному и тому же элементу называется каскадированием отсюда и термин «каскад
ные таблицы стилей». Ближе к концу главы мы узнаем о степени кон
кретности различных селекторов и правилах каскадирования.
Селекторы I¨
В отличие от селекторов класса определяющих стиль для группы эле
ментов селекторы используются для присваивания стиля одно
му конкретному элементу. Чтобы воспользоваться таким селектором необходимо прежде всего добавить атрибут id элементу стиль кото
рого должен быть изменен. Важно помнить что идентификатор ÁÛ в λϺдокументах уникален:
<p id=”taline”>This pararaph is uni£uely identified by the I “taline”.</p>
В качестве ссылки на данный элемент Áпосредством селектора ÛÂ не
обходимо указать идентификатор с предшествующим ему знаком «ре
шетка» ÁÜÂ. К примеру следующее правило стиля задает белый цвет шрифта для приведенного выше абзаца:
taline color ¤¤¤¤¤¤ 28 Глава . ­ основы основ Селекторы Û можно использовать совместно с селекторами других типов. В следующем примере правило стиля применяется ко всем эле
ментам класса new расположенным внутри абзаца со значением taline атрибута id:
taline new fontweiht bold color ¤¤¤¤¤¤ Использованный в данном примере селектор называется контекстным селекторам этого типа посвящен следующий раздел.
Контекстные селекторы
Если на панели расположено несколько абзацев можно добавить атри
бут класса каждому открывающему тегу ݪÞ. Однако гораздо лучше указать атрибут class со значением sidebar для элемента служащего контейнером а затем изменить цвет каждого расположенного внутри контейнера элемента p на белый. Для этого достаточно написать всего одно правило стиля с использованием контекстного селектора Áсе лек
то рапотомкаÂ. Ниже приведено правило с новым селектором:
p color ¤¤ sidebar color ¤¤¤¤¤¤ А так выглядит обновленный λϺкод:
<div class¡”sidebar”> <p>This pararaph will be displayed in white.</p> <p>o will this one.</p></div>
Как видите контекстный селектор состоит из списка селекторов раз
деленных пробелами соответствующих элементам страницы от внеш
них к внутренним. В данном случае на странице имеется элемент div класса sidebar и контекстный селектор .sidebar p ссылается на все эле
менты p расположенные внутри этого div.
Дочерние селекторы
Контекстный селектор ссылается на всех потомков родительского эле
мента в том числе и непрямых потомков.
Рассмотрим следующий код:
<div class¡”sidebar”> <p>This pararaph will be displayed in white.</p>
Что такое селекторы и как их правильно использовать
29
<p>o will this one.</p> <div class¡”taline”>
<p>If we use a descendant selector¨ this will be white too. ut if we use a child selector¨ it will be blue.</p> </div></div>
В данном примере используется контекстный селектор из предыдуще
го раздела – .sidebar p. Он ссылается на все элементы p вложенные в div класса .sidebar p включая и абзацы расположенные внутри div класса taline. Чтобы указанное оформление распространялось исключитель
но на прямых потомков элемента div класса sidebar следует использо
вать дочерний селектор. Для указания прямого потомка в селекторе используется знак Þ.
В приведенном ниже коде используется новый селектор для задания бе
лого цвета текста абзацев расположенных непосредственно внутри эле
мента div класса sidebar Áно не внутри элемента div класса talineÂ:
p color ¤¤ sidebar>
color ¤¤¤¤¤¤ Предупреждение
Internet Erer не поддерживает дочерние селекторы Поэтому в том случае если задаваемый с их помощью стиль важен для форматирования страницы необходимо продумать альтернативные способы обращения к тре
буемому элементу
Смежные селекторы
Смежные селекторы ссылаются на элемент расположенный непосред
ственно после другого обозначенного элемента. Таким образом если на странице имеется следующий λϺкод:
<h>This is a title</h><p>This pararaph will be displayed in white.</p><p>Ths pararaph will be displayed in black.</p>
А затем мы используем следующий селектор:
p color h2
color ¤¤¤¤¤¤ 30 Глава . ­ основы основ При этом только первый абзац отображается в белом цвете. Второй эле
мент p не является смежным с h и потому его текст выводится черным шрифтом что указано в первом правиле для элементов p.
Предупреждение
Internet Erer не поддерживает смежные селекторы Потому если за
даваемый с их помощью стиль важен для форматирования страницы следует найти альтернативный способ обращения к требуемому элементу
Селекторы псевдоклассов для ссылок
λϺ предлагает гораздо более широкие возможности для формати
рования ссылок Áсоздаваемых с помощью элемента a или якоря по сравнению с остальными элементами. С помощью CSS можно задавать стиль отображения ссылок в зависимости от их состояния – посещен
ных или непосещенных – при наведении на них указателя мыши или при щелчке по ней. Рассмотрим следующий пример:
alin color ¤¤ avisited
color ¤¤¤¤ ahover
color ¤¤ aactive
color ¤¤ Приведенный выше код содержит четыре определения стилей CSS. При этом с каждым из селекторов используется так называемый псевдо
класс элемента a. Псевдокласс по сути является ярлыком из набора ко
торый может быть добавлен к селектору для указания на состояние со
ответствующего элемента. Между селектором и псевдоклассом ставит
ся двоеточие Á:Â. Ниже представлены широко используемые псевдоклас
сы для ссылок:
• link распространяет свое действие исключительно на непосещенные ссылки и задает для них синий цвет шрифта.
• visited действует на посещенные ссылки и выводит их в фиолето
вом цвете.
• hover окрашивает ссылки в светлоголубой цвет при наведении на них указателя мыши вне зависимости от того были они посещены или нет.
• active изменяет цвет ссылки на красный после щелчка по ней.
Важное значение имеет порядок следования селекторов псевдоклассов в таблице стилей. В данном случае active стоит на последнем месте это означает что его действие имеет более высокий приоритет над перечис
ленными ранее тремя описаниями и потому его применение не зависит от того были ли ссылки посещены или нет навел ли пользователь на них указатель мыши или нет.
Что такое селекторы и как их правильно использовать
31
Состояния hover и active формально называют динамическими селек
торами псевдоклассов поскольку они появляются только при взаимо
действии пользователя с соответствующими элементами путем наведе
ния указателя мыши и щелчка по ссылке соответственно.
Примечание
Применение er с другими элементами Динамический селектор псевдо
класса hover
помимо ссылок можно использовать с другими элементами что позволяет создавать эффекты вроде подсветки ряда таблицы при наведении на него указателя мыши Однако nternet ¡p¢orer £ и более ранние версии поддерживают использование данного псевдокласса исключительно с эле
ментами ссылок
Псевдокласс ©ª«-¬®¯°
Еще одним примером псевдокласса является firstchild. В то время как смежный селектор ссылается на элемент следующий за указанным элементом в исходном коде документа селектор псевдокласса first
child ссылается на первый по порядку дочерний элемент обозначенно
го родителя. Таким образом единственным отличием в использовании данных элементов является то что в последнем случае поставленному условию удовлетворяет только первый дочерний элемент:
<div class¡”article”> <p> This is an intro pararaph to be displayed with a larer font si¥e. </p> <p> ere is a second pararaph of te­t displayed at normal te­t si¥e. </p></div>
CSSкод будет выглядеть следующим образом:
p fontsi¥e 1«article irst child
fontsi¥e 1©« Поскольку первый абзац является первым дочерним элементом роди
тельского блока div класса article его текст будет отображаться более крупным шрифтом. Размер шрифта второго абзаца соответствует опре
деленному для всех элементов p в документе.
32 Глава . ­ основы основ Предупреждение
Internet Erer не поддерживает псевдокласс rt Как оказа
лось броузер £ не поддерживает и селектор псевдокласса ¥¦irstchi¢d по
этому если задаваемый с их помощью стиль важен для форматирования стра
ницы следует найти альтернативный способ адресации
Каким образом броузер определяет¤ какие стили нужно использовать
Как броузер может «понять» намерения разработчикаÐ Если к одному и тому же элементу могут быть применены несколько стилей то опре
деление какие из них будут использованы происходит по принципу каскадирования.
Принцип каскадирования чрезвычайно важен для понимания CSS по
скольку большинство ошибок разработки связанных с таблицами сти
лей происходят изза того что применение стиля не соответствует на
мерениям разработчика. В данной главе мы уже рассмотрели пример в котором было определено общее правило стиля для элементов типа абзац а также более конкретное правило для одного или нескольких определенных абзацев. Оба правила предназначены для изменения оформления абзацев однако более конкретные правила имеют прио
ритет над более общими.
Решение
На выбор применяемого броузером стиля влияют четыре фактора: вес источник конкретность и порядок следования. Вес определенного описания стиля можно определить с помощью клю
чевого слова important добавляемого после значения свойства. При этом свойство приобретает приоритетное значение над аналогичны
ми свойствами указанными в других правилах стиля за исключени
ем редких случаев. Применение ключевого свойства important сильно усложняет процесс поддержки кода кроме того необходимость в его использовании возникает не слишком часто. Ввиду приведенных при
чин рекомендуется по возможности избегать его как в примерах дан
ной книги. Дополнительную информацию о данном ключевом слове можно найти в документации S¡¨£¸¥¡§¨ CSS ߣ¤£¢£§Í£.
Существуют три возможных источника стилей – они могут быть опре
делены броузером разработчиком или пользователем. В данной книге нас интересуют таблицы стилей написанные разработчиком вебстра
ницы т. е. вами. Мы уже говорили что у броузера есть своя внутренняя таблица стилей определяющая оформление всех элементов по умолча
­­£.­­.­­¤­
Каким образом броузер определяет какие стили нужно использовать
33
нию однако стили написанные разработчиком всегда имеют более высокий приоритет и переопределяют настройки по умолчанию. Кроме того возможно применение пользовательской таблицы стилей – набо
ра стилей созданного пользователями однако и они за исключением редких случаев переопределяются таблицей стилей разработчика. Ис
точникам стилей посвящен целый раздел документации S¡¨£¸¥¡§¨ CSS ߣ¤£¢£§Í£.
Помимо этого влияние каскадирования на поведение стилей CSS зави
сит от степени конкретности свойств и порядка их следования.
Правило стиля с более конкретным селектором переопределяет стили задаваемые правилом с более общим селектором. Рассмотрим этот ме
ханизм на практическом примере со следующим несложным λϺ
кодом:
<div id¡”content”> <p class¡”messae”> This is an important messae. </p></div>
А теперь обратите внимание на правила стилей применяемых к приве
денной выше разметке:
color ­essae
color ­essae
color ¤¤ content ­essae
color ¤¤ В данном примере действие всех четырех селекторов задающих цвет шрифта направлено на элемент p. Какой же цвет будет использованÐ Совершенно верно красный Á¤¤Â. Селекторы p Áлюбой элемент p и .messae Áлюбой элемент класса messae имеют одинаковую степень значимости приоритет селектора p.messae Áлюбой элемент p клас
са messae выше но самым высоким приоритетом обладает селектор content p.messae Áлюбой элемент p класса messae являющийся дочер
ним для элемента со значением content атрибута idÂ.
Однако длину селекторов не стоит рассматривать как показатель степе
ни конкретности. К примеру селектор Û всегда будет иметь более вы
сокий приоритет чем селектор типа или класса. Чем сложнее исполь
зуемые вами селекторы тем труднее разобраться в степени их важно
сти при этом приведенные в данной книге примеры достаточно про
­­£.­­.¤
3 Глава . ­ основы основ сты. Точную формулу измерения степени конкретности вы можете най
ти в документации S¡¨£¸¥¡§¨ CSS ߣ¤£¢£§Í£.
Если несмотря на вышеперечисленные факторы остается несколько стилей которые могут быть применены по отношению к одному и тому же элементу в расчет принимается порядок следования правил – в этом случае будет использовано последнее из них. В приведенном выше при
мере степень значимости селекторов p и .messae одинакова поэтому при отсутствии иных регулирующих принципов используется правило сти
ля записанное последним – в данном случае с селектором .messae. Так же дело обстоит и при объявлении в таблице стилей нескольких правил с одним и тем же селектором – например .messae. В этом случае будет применено правило определенное вторым. В последующих главах мы увидим что такой механизм работы можно эффективно использовать для достижения своих целей.
Заключение
В данной главе вы познакомились с основными принципами и способа
ми использования CSS. Мы даже затронули такую сложную тему как правила каскадирования. Даже если вы никогда раньше не работали с CSS но разобрались с понятиями представленными в данной главе этого будет достаточно для понимания приводимых далее примеров.
Так как примеры представленные в начале книги проще чем при
меры в конце книги то если вы новичок в области применения CSS рекомендую вам начать чтение с первых глав. Таким образом вы смо
жете пополнить знания приобретенные в первой главе и приступить к практике погрузившись в увлекательный Áнадеюсь мир каскадных таблиц стилей.
­­£.­­.£­
Глава 2
. Оформление текста и другие базовые возможности
В данной главе мы рассмотрим основные способы использования CSS для задания стилевого оформления текста а также прочие основные возможности вы найдете ответы на наиболее часто задаваемые вопро
сы об их применении. Если вы новичок в области CSS то с помощью приведенных примеров вы узнаете о существовании многих свойств и о методах их использования что создаст необходимую базу для на
писания собственного кода. Если вы уже хорошо знакомы с технологи
ей CSS то эта глава сможет подсказать вам необходимые приемы если в процессе разработки вы вдруг обнаружите что забыли как достичь того или иного эффекта.
Приведенные примеры поддерживаются подавляющим большинством броузеров однако следует помнить о важности тестирования написан
ного кода в различных версиях броузеров. Хотя некоторые несоответ
ствия или отсутствие поддержки предлагаемых методов могут встре
чаться в более ранних версиях броузеров в целом представленные ре
шения не должны вызывать какихто серьезных проблем.
Задание определенного шрифта для текста Решение
Задать определенный шрифт для оформления текста можно с помощью свойства fontfamily как показано в следующем примере:
p fontfamily ªerdana 36 Глава . Оформление текста и другие базовые возможности Обсуждение
С помощью CSS можно задавать как определенный шрифт так и семейCSS можно задавать как определенный шрифт так и семей можно задавать как определенный шрифт так и семей
ства шрифтов:
• serif
• sansserif
• monospace
• cursive
• fantasy
При этом необходимо помнить что на компьютере пользователя мо
жет не оказаться тех шрифтов что установлены у вас. Если указанный шрифт отсутствует текст будет оформлен с помощью используемых бро
узером по умолчанию шрифтов вне зависимости от определенных вами настроек.
Во избежание подобных недоразумений можно простонапросто задать название семейства шрифтов а система пользователя сама определит какой шрифт следует применить. К примеру если вы хотите оформить текст шрифтом из семейства ¶µ§¶¶£¢¡¤ к которому относится напри
мер °¢¡µ« можно использовать следующее правило стиля:
p fontfamily sansserif Вы хотели бы иметь более гибкую возможность управлять внешним ви
дом вашего сайтаÐ Это возможно. В одном блоке описаний можно опре
делить как названия конкретных шрифтов так и семейств. В качестве примера рассмотрим следующий код содержащий правило стиля для элемента p:
p fontfamily ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif В данном случае указано что при наличии в системы шрифта Ó£¢´µ§µ следует использовать именно его в противном случае броузер должен проверить установлен ли в системе шрифт Ò£§£Ìµ если и его не окажет
ся будет осуществлен поиск °¢¡µ« а затем Σ«Ì£¨¡Íµ. При отсутствии в системе всех перечисленных шрифтов броузер должен применить ис
пользуемый в системе по умолчанию шрифт из семейства шрифтов ¶µ§¶
¶£¢¡¤.
Если в названии семейства шрифтов присутствуют пробелы его следу
ет заключить в кавычки как показано ниже:
p fontfamily “ourier ew” “ndale ono”¨ monospace Выбор единиц измерения размера шрифтов пикселы пункты пики
37
Общее название семейства шрифтов никогда не заключается в кавычки и всегда приводится в самом конце списка.
Вы можете абсолютно спокойно использовать на своих страницах сле
дующие шрифты:¡¢£¤ °¢¡µ« º±Í¡´µ ½ªµÍ¨ »¡½£¶ £¾ ߥ½µ§ C¥±¢¡£¢ £¾ »µ²¥½µ C¥½¡Í Sµ§¶ Ó£¢´µ§µ Ò£¥¢·¡µ Òµ¢µ½¥§´¥¦ Σ«Ì£¨¡Íµ ±¨±¢µ ¥´¥§¡ »¡½£¶ ¸µ«µ¨¡§¥ C¥±¢¡£¢ Ò¡«« Sµ§¶ Ò£§£Ìµ µ¶á£¢Ì¡««£ °§´µ«£ Ï¥§¥
Одного взгляда на данный список достаточно чтобы понять почему в на
шем правиле стиля мы определили именно такие шрифты: в начале ука
зан наиболее предпочтительный для нас шрифт Ó£¢´µ§µ широко расÓ£¢´µ§µ широко рас широко рас
пространенный в Ñ¡§´¥¾¶ затем сходный шрифт для ÏµÍ – Ò£§£Ìµ. ДаÑ¡§´¥¾¶ затем сходный шрифт для ÏµÍ – Ò£§£Ìµ. Да затем сходный шрифт для ÏµÍ – Ò£§£Ìµ. ДаÏµÍ – Ò£§£Ìµ. Да – Ò£§£Ìµ. ДаÒ£§£Ìµ. Да. Да
лее приводятся другие шрифты которые будут использованы если ни один из первых двух шрифтов не будет найден в системе пользователя.
Выбор единиц измерения размера шрифтов пикселы¤ пункты¤ пики или что-то другое
Размер шрифта в CSS задается с помощью свойства ¤¥§¨¶¡³£ например:
fontsi¥e 1p­ В данном примере приводится размер в пикселах но для определения значения данного свойства можно использовать и другие единицы из
мерения. Прежде чем сделать выбор в пользу одного или другого из них следует взвесить все аргументы за и против.
Решение
Единицы измерения для задания размера шрифтов
В табл. . приведены единицы которые можно использовать для ука
зания размера шрифта.
Таблица µ.¡. Единицы измерения для задания размера шрифта
Идентификатор Единица измерения
ª¨ пункты
ªÍ пики
ªх пикселы
£½ относительная единица измерения равная значению свойства fontsi¥e заданного шрифта
£¦ относительная единица измерения равная высоте строчной буквы «¦» заданного шрифта
â проценты
38 Глава . Оформление текста и другие базовые возможности Рассмотрим применение каждого из них более подробно.
П
ункты и пики
p fontsi¥e 1pt Следует избегать использования пунктов и пик для оформления тек
ста предназначенного для отображения на экране. Эти единицы иде
ально подходят для задания размера шрифта для печати измерение в пунктах пришло из полиграфии. Пункт составляет Ä часть дюй
ма а пика – шестую часть дюйма. После печати текстовые документы шрифт в которых задан в данных единицах будут в точности соответ
ствовать намерениям автора – в конечном счете шестая часть дюйма остается шестой частью дюйма как на листе формата АÀ так и на ват
мане. Однако компьютеры не в состоянии отобразить физические раз
меры с такой точностью и они пытаются угадать – причем не слишком успешно – размер пункта или пики изза чего под различными плат
формами один и тот же документ может отображаться поразному.
Если вы пишете таблицу стилей для печати Áчем мы займемся в главе в разделе «Создание таблицы стилей для печати»Â или же сам документ предназначен для печати а не для просмотра с экрана следует исполь
зовать пункты и пики. Однако базовое правило при дизайне страницы для отображения в вебсреде: избегайте их применения.
Пикселы
p fontsi¥e 1p­ Многие дизайнеры любят использовать пикселы в качестве единиц из
мерения для задания размера шрифта поскольку это позволяет до
биться одинакового отображения в различных броузерах и под разны
ми платформами. Однако при этом игнорируются настройки броузе
ра пользователя более того при просмотре такой страницы в §¨£¢§£¨ ©¦ª«¥¢£¢ пользователь не сможет изменить размер шрифта. Это пред пользователь не сможет изменить размер шрифта. Это пред
ставляет серьезные ограничения для пользователей со слабым зрени
ем для которых возможность прочтения зависит от наличия функции увеличения шрифта.
Может показаться что использование пикселов для задания размера шрифта – самое простое и удобное решение однако при наличии аль
тернативных методов следует отказаться от этого способа в особенно
сти если речь идет о больших блоках с контентом. При создании до
кумента предназначенного для печати или написании таблицы сти
лей для печати совершенно нецелесообразно использовать пикселы – в мире бумажных документов они полностью теряют смысл подобно Выбор единиц измерения размера шрифтов пикселы пункты пики
39
пунктам в экранной среде. При указании размера шрифта текста для печати в пикселах будет предпринята попытка угадать каким образом он должен отображаться на бумаге и результаты далеко не всегда со
впадут с ожидаемыми.
³´©ª – относительная единица измерения размеров шрифта. Ее название пришло из области типографии где оно соответствует размеру заглав
ной буквы М которая как правило является самым широким симво
лом шрифта. В CSS £½ соответствует размеру шрифта используемому в системе пользователя по умолчанию или размеру шрифта родитель
ского элемента если он отличается от используемого по умолчанию.
Если вы используете £½ Áили другие относительные единицы для за£½ Áили другие относительные единицы для за Áили другие относительные единицы для за
дания размера всех шрифтов пользователи смогут изменять размер символов текста в соответствии с настройками размера символов уста
новленными в их броузере. Для примера создадим описание стиля за
дающее размер шрифта внутри элемента p равным 1em:
p fontsi¥e 1em При просмотре страницы в броузере §¨£¢§£¨ ©¦ª«¥¢£¢ в котором раз§¨£¢§£¨ ©¦ª«¥¢£¢ в котором раз ©¦ª«¥¢£¢ в котором ра穦ª«¥¢£¢ в котором раз в котором раз
мер шрифта установлен на ediu­ данный абзац будет выглядеть как на рис. ..
Если в броузере настройка размера шрифта – arest то абзац с разме
ром шрифта в 1em будет выглядеть как на рис. ..
Использование £½ для задания размера шрифта ограничивает ваши возможности по управлению отображением документа. Однако этот подход означает что посетитель которому необходим крупный шрифт сможет прочитать ваш контент ведь в конечном счете именно для этого вы и размещаете текст на страницу.
Значения в £½ можно задавать десятичными числами. К примеру что£½ можно задавать десятичными числами. К примеру что можно задавать десятичными числами. К примеру что
бы задать размер шрифта на процентов меньше используемого по умолчанию Áили размера шрифта родительского элемента можно ис
пользовать следующее правило:
p fontsi¥e .¢em Чтобы текст стал на процентов крупнее чем при использовании зна
чения по умолчанию или унаследованного значения можно использо
вать следующее правило:
p fontsi¥e 1.1em 0 Глава . Оформление текста и другие базовые возможности Рис. 2.1. Отображение абзаца при установке свойства £­· равным ¡ и ­¦­ · – ¹¤
Рис. 2.2. Отображение абзаца при установке свойства £­· равным ¡ и ­¦­ · – º­
Выбор единиц измерения размера шрифтов пикселы пункты пики
1
³µЕ«
– относительная единица измерения размеров соответствующая высоте строчной буквы «х» шрифта по умолчанию. Теоретически если присвоить свойству fontsi¥e абзаца значение 1e­ его заглавные буквы будут той же высоты какую имела бы строчная буква ¦ если бы размер шрифта не был задан Áпри этом размер строчных букв рассчитывался бы относительно заглавныхÂ.
К сожалению современные броузеры еще не поддерживают необхо
димые для корректного отображения ех типографские функции – как правило в процессе измерений используется достаточно грубый расчет. Значение в процентах
p fontsi¥e 1« Как и в случае с £½ и £¦ при задании размеров в процентах размеры будут соотноситься с настройками пользовательского броузера и поль
зователь сможет самостоятельно изменять размер шрифта. Значение â размера шрифта для элемента p соответствует размеру шриф
та заданному настройками по умолчанию Áтак же как и при задании значения 1emÂ. При уменьшении процентного значения размер текста уменьшается:
p fontsi¥e ¢« При увеличении процентного значения размер текста увеличивается:
p fontsi¥e 1« Изменение размера шрифта с помощью ключевых слов
Размер шрифта можно задать помимо присваивания числовых значе
ний посредством ключевых слов с абсолютными и относительными значениями.
Ключевые слова с абсолютными значениями
В распоряжении вебразработчика есть семь абсолютных ключевых слов CSS:
• ­­small
• ­small
• small
2 Глава . Оформление текста и другие базовые возможности • medium
• lare
• ­lare
• ­­lare
Значения этих ключевых слов определены одни относительно других и разные броузеры интерпретируют их посвоему. Большинство броу
зеров отображают текст с размером medium аналогично тексту с настрой
ками по умолчанию а остальные ключевые слова изменяет размер тек
ста относительно medium в соответствии с их названиями.
Измерения с помощью ключевых слов называются абсолютными по
скольку при этом отсутствует наследование от родительского элемента. Тем не менее в отличие от применения абсолютных значений например в пикселах или пунктах использование абсолютных ключевых слов позволяет посетителю сайта изменять размер шрифта вручную а так
же не переопределяет пользовательские настройки броузера. Основной проблемой при применении абсолютных ключевых слов становится не
соответствие отображения текста оформленного с их помощью в раз
ных броузерах – текст с размером ­­small может быть отчетливо виден в одном броузере и совершенно нечитаем в другом. §¨£¢§£¨ ©¦ª«¥¢£¢ в режиме совместимости к примеру интерпретирует значение small в соответствии с настройками по умолчанию. Мы рассмотрим режим совместимости более подробно в разделе «Что такое режим совместимо
сти и как его избежать» в главе .
Ключевые слова с относительными значениями При задании размера шрифта с помощью относительных ключевых слов – larer и smaller – он определяется по отношению к размеру уста
новленному для родительского элемента подобно тому как это проис
ходит при использовании em и «. Таким образом если размер элемента p задан с помощью абсолютного ключевого слова small и вы хотите что
бы выделенный фрагмент текста отображался более крупным шриф
том можно использовать следующую таблицу стилей:
­¢µ­».
p fontsi¥e small em fontsi¥e larer Данная разметка будет отображена как показано на рис. . посколь
ку текст между тегами <em> и </em> отображается более крупным шриф
том чем текст родительского элемента p:
­¢µ.­». ­ ©фрагментª
<p>These <em>stuffed peppers</em> are lovely as a starter or as a side dish for a hinese meal. They also o down well as part of a buffet¨ and even children seem to like them.</p>
Рис. 2.3. Выделенный текст отображается более крупным шрифтом по сравнению с содержащим его абзацем
Обсуждение
При выборе метода задания размера шрифта рекомендуется выби
рать такой который даст пользователям возможность масштабирова
ния текста и обеспечит соответствие текста установленным настройкам броузера. Относительное задание шрифтов является оптимальным ва
риантом однако этот метод требует внимательного контроля за насле
дованием размеров элементами. В любом случае чтобы сделать ваши страницы доступными для различных категорий пользователей в том числе и для людей с ограниченными возможностями необходимо обе
спечить наличие возможности установки предпочтительного для них размера шрифта.
При разработке дизайна страницы следует помнить об этой необходимос
ти это также позволит вам избежать проблемы возникающей в броузе
рах поддерживающих возможность изменения размера шрифта задан
ного в пикселах когда дизайнер исходит из предположения что это по
зволит ему зафиксировать высоту контейнеров или разместить текст над изображением с фиксированной высотой. Этот метод прекрасно работа
ет при условии просмотра страницы в броузере §¨£¢§£¨ ©¦ª«¥¢£¢ кото§¨£¢§£¨ ©¦ª«¥¢£¢ кото ©¦ª«¥¢£¢ котª«¥¢£¢ кото кото
рый не изменяет размер текста указанный в пикселах однако в ¡¢£¤¥¦ Áя версия со значением ¬££ª « £¡ настройки ®££ª и более ран
ние версии все это может превратиться в мешанину из перекрывающих друг друга кусков текста поскольку высота контейнеров для текста ни
когда не известна.
Относительное изменение размеров и наследование
При применении любых методов относительного определения размеров элемента следует помнить о том что элемент наследует это значение от родителя и уже это значение следует подгонять для достижения требу
емого результата. При этом следует с осторожностью использовать от
носительное задание размеров родительского элемента поскольку при Выбор единиц измерения размера шрифтов пикселы пункты пики
3
Глава . Оформление текста и другие базовые возможности сложной организации контейнеров может быть непросто определить путь наследования. Рассмотрим следующий код:
­¢µ­. ­ ©фрагментª
<div> <p> ou’ll <em>probably</em> be surprised when usin <a href¡””>a relative <code>fontsi¥e</code></a> and nested elements. </p></div>
Допустим для свойства fontsi¥e вышеприведенного текста требовалось задать значение â по отношению к размеру по умолчанию и мы ошибочно сделали это следующим образом:
­¢µ­. ©фрагментª
div¨ p¨ em¨ a¨ code fontsi¥e 1« В результате размер шрифта вложенных элементов станет крупнее со
ставив â от размера родительского элемента который в свою оче
редь составляет â от размера своего родительского элемента и т. д. как показано на рис. .À.
Рис. 2.4. Относительное задание размера шрифта для вложенных элементов
Удаление подчеркивания ссылок
Основным указанием на то что перед нами ссылка является то что она подчеркнута и ее цвет изменен по сравнению с основным текстом. Такое визуальное оформление используется по умолчанию. Однако в определенных случаях может возникнуть необходимость в отображе
нии ссылки без подчеркивания.
Решение
Для того чтобы убрать подчеркивание ссылок воспользуемся свой
ством te­tdecoration. По умолчанию броузер устанавливает значение Цветные иллюстрации доступны по адресу ..¡¢¡­
Удаление подчеркивания ссылок
5
underline данного свойства для всех элементов a. Поэтому нам достаточ
но всего лишь установить его значение none для ссылок:
te­tdecoration none Такой результат был достигнут с помощью следующего CSSкода:
­¢µ­¦­¤­.
alink¨ avisited te­tdecoration none Рис. 2.5. Использование свойства ­¦­¤­ позволяет убрать подчеркивание для ссылок
Обсуждение
Помимо underline и none свойство te­tdecoration может принимать сле
дующие значения:
• overline
• linethrouh
• blink
Эти значения можно комбинировать. К примеру если бы вам захоте
лось оформить ссылку с помощью как нижнего так и верхнего подчер
кивания как показано на рис. . то можно было бы использовать сле
дующее правило стиля:
­¢µ­¦­¤­µ.
alink¨ avisited te­tdecoration underline overline Рис. 2.6. Комбинирование различных значений свойства ­¦­¤­ позволяет создавать ссылки с нижним и верхним подчеркиванием
6 Глава . Оформление текста и другие базовые возможности Предупреждение
Не вводите пользователей в заблуждение Cвойство te­tdecoration мож
но использовать для создания эффекта подчеркивания по отношению к лю
бому тексту не только к ссылкам но это следует делать с большой осторож
ностью Поскольку подчеркивание ссылок является очень распространенным и общепринятым приемом пользователи склонны воспринимать любой под
черкнутый текст как ссылку на другой документ Внимание
В каких случаях подчеркивание следует оставить? Подчеркивание ссылок применяется всеми броузерами и следовательно пользователи к этому при
выкли Убирая подчеркивание ссылок в тексте вы усложняете пользователю задачу обнаружения ссылок среди прочего выделенного текста Я рекомен
дую воздержаться от использования не подчеркнутых ссылок в тексте Су
ществует множество способов привлекательного оформления ссылок и дей
ствительная необходимость в удалении подчеркивания может возникнуть лишь в самых редких случаях
Совсем другое дело когда мы имеем дело с ссылками в меню или ссылками расположенными иным образом так что не остается никаких сомнений в их предназначении – например когда их текст оформлен в виде кнопок В этом случае при желании можно убрать подчеркивание поскольку множество дру
гих факторов указывает на то что данный текст является ссылкой
Создание ссылки¤ меняющей цвет при наведении на нее указателя мыши
Можно создать привлекательный эффект изменения цвета или иных параметров ссылки при наведении на нее указателя мыши. Его можно с успехом использовать в созданных на основе CSS панелях навигации он применим и по отношению к ссылкам в тексте.
Решение
Для создания описанного эффекта необходимо воспользоваться дина
мическими псевдоклассами якоря hover и active.
Рассмотрим следующий пример. Ниже представлено типичное правило стиля в котором описания всех псевдоклассов якоря одинаковы:
­¢µ­¦­¤­.
alink¨ avisited¨ ahover¨ aactive te­tdecoration underline color ©AA backroundcolor transparent Создание ссылки меняющей цвет при наведении на нее указателя мыши
7
Если мы применим данное правило ссылки будут отображаться синим цветом Á©AAÂ с подчеркиванием как на рис. ..
Рис.2.7. Использование одинакового описания для всех псевдоклассов ссылок
Для выполнения поставленной задачи нам нужно удалить селекторы псевдоклассов hover и active из общего описания и задать каждому из них свое собственное описание. В приведенном ниже CSSкоде к нижCSSкоде к нижкоде к ниж
нему подчеркиванию добавлено еще и верхнее. Кроме того в нем задан фоновый цвет и более темный цвет для текста ссылки. На рис. .. по
казан результат обработки данного кода броузером:
­¢µ­¦­¤­¿.
alink¨ avisited te­tdecoration underline color ©AA backroundcolor transparent ahover¨ aactive te­tdecoration underline overline color 1¢1¢ backroundcolor ¢ Как вы уже наверняка догадались остальным псевдоклассам также можно задавать отдельные описания. В частности вы можете захотеть использовать специальное оформление для посещенных ссылок. Для этого нужно составить отдельное описание для псевдокласса visited.
Рис. 2.8. Наведение указателя мыши на ссылку для которой указан специальный стиль при данном событии
При определении стиля для псевдоклассов избегайте изменения разме
ра или начертания шрифта. В противном случае пользователь будет на
8 Глава . Оформление текста и другие базовые возможности блюдать постоянное дрожание страницы ведь окружающий контент бу
дет отодвигаться чтобы освободить место для отображения более круп
ного текста при наведении на него указателя мыши.
Совет
Порядок следования описаний псевдоклассов Псевдоклассы якоря долж
ны следовать в порядке link¨ visited¨ hover¨ active В противном случае результат обработки кода может отличаться от ожидаемого Для запоминания часто используется слово o¬eAte
®
Использование на одной странице различных стилей ссылок
В предыдущей секции мы рассмотрели способ стилевого оформления различных селекторов элемента a но что делать в том случае если раз
ные ссылки в одном и том же документе должны выглядеть поразномуÐ Например ссылки на панели навигации должны отображаться без подчеркивания но ссылки в тексте должны быть легко распознавае
мы. Или же фон одной части документа темнее чем фон другой и здесь ссылки должны быть светлее.
Решение
Попробуем создать различные стили для ссылок на примере в котором мы уже определили один обычный стиль для них: ­¢µ­. ©фрагментª
alink¨ avisited te­tdecoration underline color ©AA backroundcolor transparent ahover¨ aactive te­tdecoration underline overline color 1¢1¢ backroundcolor ¢ Данные правила будут использоваться по умолчанию – они описывают стиль отображения обычных ссылок в вашем документе. Первое прави
ло задает синий цвет ссылок поэтому если часть страницы будет зали
та синим фоном их будет не видно. Следовательно необходимо создать ЛюбоВьНенАвисть – Прим. перев.
Использование на одной странице различных стилей ссылок
9
второй набор стилей который будет применяться к ссылкам располо
женным в данной области.
Прежде всего создадим class или id для элемента в котором будут раз
мещаться ссылки другого цвета. Если стиль контейнера уже задан средствами CSS у него наверняка есть атрибут class или id который мы можем использовать для выполнения поставленной задачи. Допу
стим документ содержит следующую разметку:
­¢µ­. ­ ©фрагментª
<div class¡”bo­out”>
<p>ªisit our <a href¡”store.html”>online store</a>¨ for all your widet needs.</p></div>
Создадим правило стиля применимое по отношению ко всем ссылкам внутри элемента класса bo­out:
­¢µ­. ©фрагментª
.bo­out color ¤¤¤¤¤¤ backroundcolor ©AA .bo­out alink¨ .bo­out avisited te­tdecoration underline color ®¤© backroundcolor transparent .bo­out ahover¨ .bo­out aactive backroundcolor ¢ color 1¢1¢ Как видно на рис. . теперь все ссылки в документе будут отображены в соответствии с первым правилом за исключением ссылок размещен
ных внутри элемента div класса bo­out – цвет текста последних будет бо
лее светлым.
Рис. 2.9. Использование двух различных стилей ссылок в одном документе
50 Глава . Оформление текста и другие базовые возможности Присваивание первому элементу в списке отличного от последующих элементов стиля
Дизайнеры часто сталкиваются с необходимостью специального оформ
ления первого элемента из набора – будь то список или несколько абза
цев расположенных в контейнере – отличающего его от остальных эле
ментов. Этого можно добиться путем присвоения определенного класса первому элементу однако существует более подходящий способ созда
ния такого эффекта который поддерживается современными броузера
ми. Он состоит в использовании селектора псевдокласса firstchild.
Решение
Ниже представлена разметка простого неупорядоченного списка:
­¢µ£­ ¤. ­ ©фрагментª
<ul> <li>rie</li> <li>heddar</li> <li>ed eicester</li> <li>hropshire lue</li></ul>
Использование селектора псевдокласса ©ª«-¬®¯°
С помощью селектора псевдокласса firstchild можно изменить стиль первого пункта списка не повлияв при этом на оформление соседних элементов. Он позволяет применить стиль к первому элементу внутри контейнера ul как показано на рис. .:
­¢µ£­ ¤. ©фрагментª
lifirstchild color red Рис. 2.10. Первый пункт списка отображается красным цветом
К сожалению firstchild не поддерживается броузером §¨£¢§£¨ ©¦ª«¥¢§¨£¢§£¨ ©¦ª«¥¢ ©¦ª«¥¢©¦ª«¥¢
£¢ . Поэтому если данный эффект для вас важен и количество посети . Поэтому если данный эффект для вас важен и количество посети
телей просматривающих сайт с его помощью велико следует восполь
зоваться какимлибо другим методом например применить селектор класса.
Создание цветного фона для заголовка
51
Использование селектора классаДля создания аналогичного эффекта обрабатываемого © нужно за© нужно за нужно за
дать атрибут class или id элементу стиль которого должен отличаться от остальных. В данном примере мы будем использовать class:
­¢µ£­ ¤­ . ­ ©фрагментª
<ul> <li class=”unusual”>rie</li>
<li>heddar</li> <li>ed eicester</li> <li>hropshire lue</li></ul>
А теперь создадим правило стиля для достижения желаемого эффекта:
­¢µ£­ ¤­ . ©фрагментª
li.unusual color red Создание цветного фона для заголовка
Средствами CSS можно задать цвет фона для любого элемента в том числе и для заголовка.
Решение
Ниже приведено правило CSS применяемое по отношению ко всем заCSS применяемое по отношению ко всем за применяемое по отношению ко всем за
головкам первого уровня в документе:
­¢µ ¤. ©фрагментª
h1 bacround color ;
color ©¢ font 1.©em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif paddin .em Результат выполнения данного кода представлен на рис. ..
Совет
Цвет идет дорогу цвету При добавлении цветного фона для заголовка вы возможно захотите также сделать необходимые отступы чтобы между тек
стом заголовка и границей закрашенной области оставалось свободное про
странство как в данном примере
52 Глава . Оформление текста и другие базовые возможности Рис. 2.11. Отображение заголовка с цветным фоном
Подчеркивание заголовков
Решение
Существует два способа добавления эффекта подчеркивания для тек
ста. Самым простым является использование свойства te­tdecoration о котором мы уже говорили в данной главе в разделе «Удаление подчер
кивания ссылок». Такой метод позволяет добавить подчеркивание того же цвета что и сам текст как видно из следующего кода и рис. .:
­¢µ ¤¤. ©фрагментª
h1 font 1.©em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif tet decoration underline;
Рис. 2.12. Добавление эффекта подчеркивания для заголовка с помощью свойства ­¦­¤­
Аналогичного эффекта можно добиться и путем добавления нижней части рамки к заголовку. Данный метод результат применения которо
го показан на рис. . отличается большей гибкостью поскольку его применение позволяет отделить подчеркивающую линию от текста за
головка пустым пространством и задать для нее произвольный цвет от
личный от цвета самого заголовка.
Кроме того вероятность спутать заголовок с эффектом подчеркива
ния созданным описанным выше методом со ссылкой гораздо ниже чем при использовании свойства te­tdecoration. Однако внешний вид Устранение отступа между элементом h и следующим за ним абзацем
53
данного эффекта может варьироваться в зависимости от используемо
го броузера поэтому необходимо тщательно протестировать его во всех броузерах которыми могут пользоваться потенциальные посетители вашего сайта. Ниже представлено необходимое правило стиля:
­¢µ ¤¤µ.
h1 font 1.©em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif paddin .em border botto­ 1 solid ;
Рис. 2.13. Создание эффекта подчеркивания с помощью нижней части рамки
Устранение отступа между элементом ®1 и следующим за ним абзацем
По умолчанию при просмотре страницы между любыми заголовками и абзацами образуется пустое пространство возникающее изза того что броузеры добавляют отступы для каждого из этих элементов. На рис. .À отображен заголовок с отступом по умолчанию. Его можно убрать средствами CSS.
Рис. 2.14. Пустое пространство между заголовком и абзацем возникающее по умолчанию
Решение
Избежать возникновения пустого пространства возможно убрав отступ снизу для заголовка и отступ сверху для абзаца. В современных броу
5 Глава . Оформление текста и другие базовые возможности зерах включая §¨£¢§£¨ ©¦ª«¥¢£¢ и выше это достигается с помощью смежного селектора в CSS. Однако для отображения аналогичного эфCSS. Однако для отображения аналогичного эф. Однако для отображения аналогичного эф
фекта при просмотре страницы в более старых броузерах придется при
бегнуть к другим приемам с лучше реализованной поддержкой.
Использование смежного селектора
Смежный селектор позволяет применять стили к элементу следующе
му за другим элементом если оба они являются дочерними по отноше
нию к одному и тому же родительскому элементу. На самом деле с его помощью можно указать также элемент следующий не за одним а за несколькими другими элементами элемент к которому применяется стиль называется последним элементом в цепочке. Если вышесказан
ное привело вас в замешательство поверьте что все сразу станет ясно как только мы рассмотрим практические примеры.
Следующее правило стиля убирает верхний отступ для любого абзаца следующего непосредственно за заголовком первого уровня. Обратите внимание что отступ удаляется для абзаца следующего за h1 а не для самого заголовка:
­¢µ ¤. ©фрагментª
h1 font 1.©em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif marinbottom h1 ­arin to ;
На рис. . показано как будет отображаться страница после приме
нения данного правила.
Рис. 2.15. Использование смежного селектора для изменения стиля отображения заголовка
Как видите первый следующий за элементом h1 абзац отображается без отступа сверху при этом все последующие абзацы отображаются с отступами.
Как уже было сказано выше только самые современные версии броузе
ров поддерживают смежные селекторы – к примеру в §¨£¢§£¨ ©¦ª«¥¢£¢ Выделение текста на странице
55
их поддержка реализована только начиная с й версии. В определен
ных случаях вполне можно допустить что пользователи более старых версий будут видеть зазор между заголовком и текстом. Если же вы твердо намерены убрать отступы отображаемые в старых броузерах в вашем распоряжении несколько возможностей.
Можно воспользоваться селекторами классов как в разделе «Исполь
зование на одной странице различных стилей ссылок» присвоив свой
ству marin для каждого элемента класса нулевое значение. Если вы прочли указанный раздел то использование такого метода не предста
вит никаких сложностей. Кроме того заголовку можно задать отрица
тельный отступ. Этот метод далее мы рассмотрим более подробно.
Совет
Применение отрицательных отступов В C¯¯ свойство marin задающее ве
личину внешних отступов может принимать как положительные так и отри
цательные значения Однако значение свойства paddin обеспечивающее от
ступ от границы родительского элемента до границы дочернего может быть только положительным
Применение отрицательного значения свойства marin также позволяет убрать ненужный отступ между заголовком и первым абзацем Приведенный ниже код позволяет достичь такого же результата как мы видели на рис °®±¥
h1 font 1.©em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif marinbottom .©em Выделение текста на странице
На многих вебстраницах используется выделение важных терминов например слов по которым посетитель пришел на сайт с помощью по
исковой системы. Такое выделение текста можно без труда организо
вать средствами CSS.
Решение
Если отрывок текста обрамлен тегами <span> с атрибутом class для дан
ного класса можно добавить правило стиля с помощью CSS. Например в следующем абзаце фраза «¶¨±¤¤£´ ªµªª£¢¶» расположена между тега¶¨±¤¤£´ ªµªª£¢¶» расположена между тега ªµªª£¢¶» расположена между тегаªµªª£¢¶» расположена между тега» расположена между тега
ми <span> с атрибутом класса hilite. ­¢µ ­. ­ ©фрагментª
<p>These <san class=”hilite”>stued eers</san> are lovely as a starter or as a side dish for a hinese meal. They also o down well as part of a buffet¨ and even children seem to like them.</p>
56 Глава . Оформление текста и другие базовые возможности Ниже приведено правило стиля для класса hilite отображение выде
ленного текста показано на рис. .. В данном примере слова «¶¨±¤¤£´ ª£ªª£¢¶» отображаются красными буквами на желтом фоне.
­¢µ ­. ©фрагментª
.hilite backroundcolor ¤¤¤¤ color Рис. 2.16. Выделение текста с помощью ¯
Изменение высоты строки (межстрочного интервала) в тексте
Одним из основных преимуществ использования CSS перед более стаCSS перед более ста перед более ста
рыми методами основанными на применении тегов <font> и т. д. состо
ит в том что оно дает разработчику больше возможностей управления внешним видом текста на странице. В следующем примере мы попро
буем изменить межстрочный интервал в тексте документа.
Решение
Если межстрочный интервал по умолчанию оказывается слишком ма
леньким его можно изменить с помощью свойства lineheiht:
­¢µ¤.
p font 1em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif line heiht 2;
Результат показан на рис. ..
Проще простогоÚ Единственное на что стоит обратить внимание – не стоит задавать слишком большие интервалы иначе текст будет трудно читать.
Выравнивание текста по ширине
57
Рис. 2.17. Изменение межстрочного интервала с помощью свойства ­
Совет
А как же единицы измерения? Как видите в данном примере вместо единиц измерения мы использовали коэффициент °² Вы можете задать значение lineheiht
в стандартных единицах измерения C¯¯ например пикселах или e³ однако при этом теряется связь между высотой строки и размером шрифта для дочерних элементов
К примеру если бы в предыдущем примере присутствовал элемент span с боль
шим значением свойства fontsi¥e величина межстрочного интервала изме
нялась бы пропорционально размеру шрифта поскольку свойству lineheiht для абзаца задано числовое значение . Однако если бы данному свойству было присвоено значение em или « элемент span унаследовал бы действи
тельную а не пропорциональную величину межстрочного интервала на кото
рый не повлияет увеличенный размер шрифта В определенных случаях это конечно может оказаться результатом которого вы добиваетесь
Выравнивание текста по ширине
Выравнивание текста по ширине таким образом чтобы его края были ровными с обеих сторон обеспечивается благодаря изменению расстоя
ний между словами. Этого эффекта легко достичь средствами CSS.
Решение
Абзац можно выровнять по ширине с помощью свойства te­talin на
пример:
­¢µÁ­£.
p tet alin usti;
font 1em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif lineheiht . На рис. . изображен результат присваивания значения ¦ustify свой
ству te­talin.
58 Глава . Оформление текста и другие базовые возможности Рис. 2.18. Выравнивание текста с помощью ­¦­
Обсуждение
Свойство te­talin также может принимать следующие значения:
¯°± выравнивает текст по правой стороне контейнера
² выравнивает текст по левой стороне контейнера
¡¯ центрирует текст в контейнере
Изменение стиля горизонтальной линии
Как правило при разметке документа следует избегать использования элементов выполняющих чисто визуальные функции такие как гори
зонтальная линия ÁhrÂ. Документ структура которого описывает назна
чение его элементов легче поддерживать он быстрее загружается и бо
лее понятен для поисковых систем. Эффекта аналогичного использо
ванию горизонтальной линии можно добиться с помощью рамок суще
ствующих элементов.
Однако в определенных случаях использование hr может оказаться оптимальным способом достижения желаемого результата или необхо
димым средством оформления неразмеченного стилями контента для просмотра в старых броузерах плохо поддерживающих CSS.
Решение
С помощью CSS можно изменить цвет высоту и ширину горизонтальCSS можно изменить цвет высоту и ширину горизонталь можно изменить цвет высоту и ширину горизонталь
ной линии. Однако это следует делать с осторожностью поскольку один и тот же эффект может поразному выглядеть в различных броузе
рах. К примеру в следующем примере используются два свойства col
or и backroundcolor с одним и тем же значением поскольку броузеры основанные на движке Ò£Íᥠнапример ¡¢£¤¥¦ изменяют цвет линии с помощью свойства backroundcolor а §¨£¢§£¨ ©¦ª«¥¢£¢ – с помощью color:
Вывод текста с отступом
59
­¢µ ­. ©фрагментª
hr border none bacround color 2;
color 2; heiht p­ width « Результат можно увидеть на рис. ..
Рис. 2.19. Изменение цвета высоты и ширины горизонтальной линии
Вывод текста с отступом
Решение
Для добавления отступа от элемента до края контейнера последнему нужно задать свойство paddinleft как в следующем примере:
­¢µ¤­. ­ ©фрагментª
<h1>hinesestyle stuffed peppers</h1><p class=”indent”>These stuffed peppers …</p>
­¢µ¤­. ©фрагментª
.indent paddinleft 1.em Получившийся абзац с отступом можно увидеть на рис. ..
Обсуждение
Для создания отступов не стоит использовать λϺтег <block£uote> если текст не является в самом деле цитатой. Такая вредная привычка раньше прививалась программами визуального редактирования вроде 60 Глава . Оформление текста и другие базовые возможности Û¢£µ½¾£µÌ£¢. Если вы применяете редакторы использующие данный тег в описанных целях то вместо этого следует задать CSSправило поCSSправило поправило по
добное тому что было описано выше. Или же смените редактор.
Тег <block£uote> был создан для выделения цитат что особенно важно для пользователей со слабым зрением пользующихся экранными дик
торами: программа воспроизводит текст заключенный между этими тегами таким образом что сразу становится ясно – это цитата. При использовании <block£uote> для создания отступов пользователям вос
принимающим страницу на слух наверняка покажется странным что текст читается как цитата.
Совет
С красной строки Можно создать отступ и только для первой строки каждо
го абзаца Для этого к нему – или классу абзацев – нужно применить свойство te­tindent¥
­¢µ¤­µ.
p te­tindent 1.em Центрирование текста
Центрировать текст или любой другой элемент можно с помощью свой
ства te­talin со значением center:
­¢µ­. ­ ©фрагментª
<h1>hinesestyle stuffed peppers</h1><p class¡”centered”>These stuffed peppers …</p>
­¢µ­. ©фрагментª
.centered te­talin center Рис. 2.20. Добавление отступа с помощью ¯
Вывод текста заглавными буквами с помощью ­
61
Результат использования данного правила отражен на рис. ..
Рис. 2.21. Центрирование текста с помощью свойства ­¦­
Вывод текста заглавными буквами с помощью SS
Решение
Для изменения всех букв на заглавные и других трансформаций текста используется свойство te­ttransform:
­¢µ. ­ ©фрагментª
<h1>hinesestyle stuffed peppers</h1><p class¡”transform”>These stuffed peppers are lovely …</p>
­¢µ. ©фрагментª
.transform te­ttransform uppercase Обратите внимание на текст на рис. ..
Рис. 2.22. Использование свойства ­¦­­£ для вывода текста заглавными буквами
Обсуждение
Свойство te­ttransform может принимать и другие полезные значения. При использовании значения capitali¥e каждое слово будет начинаться с заглавной буквы как видно на рис. ..
62 Глава . Оформление текста и другие базовые возможности ­¢µ­·. ©фрагментª
.transform te­ttransform capitali¥e Данному свойству также можно присваивать следующие значения:
• lowercase Áдля отображения текста строчными буквамиÂ
• none Áотсутствие трансформаций значение по умолчаниюÂ
Рис. 2.23. Использование свойства ­¦­­£ для вывода каждого слова с большой буквы
Изменение стиля маркеров списка или удаление маркеров
Решение
Стиль маркеров ненумерованного списка можно изменить с помощью свойства liststyletype. Прежде всего рассмотрим следующую размет
ку списка:
­¢µ­­. ­ ©фрагментª
<ul> <li>list item one</li> <li>list item two</li> <li>list item three</li></ul>
Для отображения маркеров в виде квадратиков как на рис. .À следу
ет присвоить свойству liststyletype значение s£uare:
­¢µ­­.
ul liststyletype s£uare Изменение стиля маркеров списка или удаление маркеров
63
Рис. 2.24. Маркеры списка в виде квадратиков
Обсуждение
Свойство liststyletype может иметь следующие значения: disc¨ cir
cle¨ decimalleadin¥ero¨ decimal¨ lowerroman¨ upperroman¨ loweralpha¨ upperalpha и none. Не все броузеры обеспечивают поддержку всех перечисленных свойств. Если броузер не поддерживает указанное значение будет отображаться маркер используемый по умолчанию. Информацию о различных ти
пах маркеров и их поддержке броузерами можно найти в наборе тестов CSS для liststyletype.
Значение none удаляет маркеры из списка причем каждый пункт попрежнему будет отображаться с отступом как будто на месте маркеров осталось пустое пространство как можно видеть на рис. ..
ul liststyletype none Рис. 2.25. Список без маркеров
­­..­­µ¡µ¢Ã¢µ. ­
6 Глава . Оформление текста и другие базовые возможности Использование изображения вместо маркера списка
Решение
Чтобы вместо маркеров списка отобразить заказное изображение нуж
но использовать свойство liststyleimae вместо liststyletype. Его значением может быть ãߺадрес пути к файлу изображения:
­¢µ­.
ul liststyleimae urlbullet.if На рис. . видно как можно оформить список с помощью описанно
го приема:
Рис. 2.26. Использование изображения в качестве маркера списка
Совет
Добавление маркеров к отдельным пунктам списка Свойство liststyle
imae
применяется по отношению к пунктам списка µэлементам li¶ Если при
менить его по отношению к списку в целом µэлементу ul или ol¶ оно будет унаследовано каждым отдельным пунктом Тем не менее вы можете задать значение данного свойства отдельно для каждого пункта списка добавив ему атрибут class или id Это позволяет использовать разные маркеры для разных пунктов списка
Удаление у пунктов списка отступа слева
Если вы задали свойству liststyletype значение none то возможно вам также хотелось бы уменьшить или вовсе убрать возникающие при этом отступы слева.
Удаление у пунктов списка отступа слева
65
Решение
Мо
жно убрать отступы и выровнять пункты списка по левому краю так что по вертикали они будут отображаться на одном уровне с пред
шествующим абзацем как показано на рис. .. Для этого нужно соз
дать такое правило:
­¢µ­.
ul liststyletype none paddinleft marinleft Рис. 2.27. Список без маркеров и без отступов
Обсуждение
При желании можно изменить величину отступов для пунктов списка. Например чтобы отодвинуть список на несколько пикселов можно ис
пользовать следующий код:
­¢µ­.
ul liststyletype none paddinleft p­ marinleft 66 Глава . Оформление текста и другие базовые возможности Размещение пунктов списка по горизонтали
По умолчанию пункты списка располагаются как блочные элемен
ты т. е. каждый новый пункт размещается на новой строке. Однако на странице вполне может оказаться контент по сути являющийся спи
ском который вам хотелось бы отобразить иным образом. Хорошим примером может послужить набор навигационных ссылок. Можно ли разместить их горизонтальноÐ
Решение
Для горизонтального размещения пунктов списка нужно присвоить свойству display для элемента li значение inline например:
­¢µ­. ­ ©фрагментª
<ul class¡”hori¥”> <li><a href¡””>i idets</a></li> <li><a href¡””>mall idets</a></li> <li><a href¡””>hort idets</a></li> <li><a href¡””>Tall idets</a></li></ul>
­¢µ­.
ul.hori¥ li display inline Результат применения данного правила стиля изображен на рис. ..
Рис. 2.28. Горизонтальное расположение пунктов списка
Удаление отступов от края страницы
По умолчанию в большинстве броузеров присутствует пустое простран
ство между их рамкой и контентом страницы. Это означает что при от
сутствии таблицы стилей разработчика текст не будет соприкасаться с границей окна броузера. Возможно вам потребуется убрать отступы или задать их размер не оставляя определение этого размера на усмо
трение броузера.
Решение
Для удаления всех отступов вокруг контента страницы используется следующее правило стиля определенное для элемента body:
Удаление отступов по умолчанию для всех элементов страницы
67
body marin paddin Результат показан на рис. ..
Рис. 2.29. Удаление отступов по умолчанию для тела документа
Удаление отступов по умолчанию для всех элементов страницы
Если для документа не написано специальной таблицы стилей то он будет оформлен в соответствии с внутренней таблицей стилей броузе
ра. Поскольку внутренние таблицы разных броузеров немного отлича
ются документы без стилевого оформления будут отображаться слег
ка поразному.
Решение
Эту проблему можно решить убрав все отступы для всех элементов страницы перед созданием своих стилей.
Следующее правило задает нулевое значение отступов для всех элемен
тов. В результате все абзацы списки заголовки и т. д. будут расположе
ны вплотную к соседним элементам как на рис. ..
68 Глава . Оформление текста и другие базовые возможности ­¢µ·. ©фрагментª
¯ marin paddin Рис. 2.30. Удаление отступов для всех элементов страницы
Обсуждение
В приведенном правиле используется универсальный селектор «¯» для удаления отступов везде. Этот прием называют глобальным удалением промежутков
. Если дизайн вашей страницы отличается сложностью то начать разработку стоит именно с этого.
Однако впоследствии при необходимости вам придется снова добавлять отступы для отдельных элементов. При этом особенно важно учиты
вать что после применения данного правила может оказаться невоз
можным просмотр или использование некоторых элементов.
Если дизайн страницы относительно прост такое удаление отступов как правило излишне и в дальнейшем приводит к необходимости выполнения дополнительной работы по их восстановлению для таких элементов как абзацы цитаты и списки. Вместо этого можно удалить отступы только для определенной группы элементов. В приведенном ниже примере аннулируются отступы для всех заголовков и списков:
­­£­Á­£¤.­Áµ¢¢¿¡¢¡Å­
Добавление комментария в файл с каскадной таблицей стилей
69
h1¨ h¨ h¨ h®¨ h¨ h©¨ ul¨ ol marin paddin Добавление комментария в файл с каскадной таблицей стилей
В CSSфайлы можно и нужно добавлять комментарии Áразве что возCSSфайлы можно и нужно добавлять комментарии Áразве что возфайлы можно и нужно добавлять комментарии Áразве что воз
можно за исключением тех случаев когда размещенная в них таблица стилей проста и содержит всего несколько правилÂ. Однако при нали
чии большого количества правил стилей и при использовании несколь
ких таблиц на одном сайте комментарии приходятся как нельзя кста
ти. Без них вы потратите уйму времени на поиск необходимых классов на раздумья о назначении тех или иных классов и на попытки опреде
лить в какой таблице они используются.
Решение
Как и в коде на ˵̵SÍ¢¡ª¨ в CSSкоде можно располагать многостроч˵̵SÍ¢¡ª¨ в CSSкоде можно располагать многостроч в CSSкоде можно располагать многострочCSSкоде можно располагать многострочкоде можно располагать многостроч
ные комментарии. Для этого используется следующая последователь
ность символов:
/¯
Á Здесь располагаются комментарии…
¯/
По меньшей мере в начале каждой таблицы стилей разработчик должен разместить комментарий с описанием ее назначения:
/¯ Эта таблица стилей используется по умолчанию для оформления текста на всем сайте ¯/
Заключение
В настоящей главе мы рассмотрели ответы на наиболее часто встречаю
щиеся вопросы с которыми сталкиваются начинающие разработчики. Они касаются стилевого оформления текста на странице. Путем комби
нирования указанных приемов можно создавать привлекательные эф
фекты корректное отображение которых однако зависит от степени поддержки CSS используемым броузером.
Глава 3
.
SS и графика
Во Всемирной паутине можно найти множество сайтов с привлекатель
ным графическим дизайном опирающимся на использование CSS. ЧтоCSS. Что. Что
бы научиться работать с графикой с помощью CSS достаточно выучить несколько простых приемов комбинирование которых позволит соз
дать огромное число интересных эффектов. Представленные в настоя
щей главе решения иллюстрируют основные принципы работы с изо
бражениями и дают ответы на наиболее часто встречающиеся вопросы. Работать с графикой мы будем и в последующих главах однако даже с предложенными в этой главе решениями можно свободно эксперимен
тировать для создания собственных уникальных эффектов.
Добавление рамки к изображению
Фотографии используемые в качестве иллюстраций к статье или разме
щаемые в фотоальбоме выглядят более аккуратно с обрамлением в виде тонкой рамки. Однако добавление рамки в графическом редакторе для каждого изображения займет немало времени а каждый раз когда по
требуется изменить толщину или цвет рамки вы окажетесь перед не
обходимостью повторять этот трудоемкий процесс заново. К счастью CSS предлагает гораздо более легкий способ выполнения аналогичных задач. Решение
Добавить рамку к изображению с помощью CSS предельно просто. ДоCSS предельно просто. До предельно просто. До
пустим в документе на рис. . есть два изображения.
Благодаря следующему правилу к обоим изображениям добавляется сплошная черная рамка толщиной в пиксел:
Добавление рамки к изображению
71
Рис. 3.1. Просмотр двух изображений в вебброузере
im borderwidth 1p­ borderstyle solid bordercolor Это правило можно записать в сокращенной форме например:
­¢¤. ©фрагментª
im border 1p­ solid На рис. .. показан результат выполнения данного кода.
Рис. 3.2. С добавленной с помощью ¯ рамкой изображение выглядит привлекательнее
Все это замечательно но ваш документ ведь наверняка содержит изо
бражения которым черная рамка не нужна. В таком случае можно соз
дать класс для изображений с рамками и применить его по отношению к соответствующим элементам:
­¢¤. ©фрагментª
.imborder border 1p­ solid 72 Глава . ­ и графика ­¢¤. ­ ©фрагментª
<im src¡”food1.¦p” alt¡”food preparation” class=”i­border” />
Если на странице отображается подборка изображений например фо
тоальбом можно задать параметры рамки для элементов расположен
ных внутри определенного контейнера допустим списка с уникаль
ным идентификатором.
­¢¤. ©фрагментª
album im border 1p­ solid ­¢¤. ­ ©фрагментª
<ul id=”albu­”>
<li><im src¡”food1.¦p” alt¡”food preparation” /></li><li><im src¡”food.¦p” alt¡”food preparation” /></li></ul>
Такой прием избавляет от необходимости добавления атрибута с име
нем класса каждому отдельному изображению в контейнере.
Удаление средствами SS синей рамки вокруг изображения¤ выполняющего функцию ссылки
Если вы используете изображения в качестве ссылок то наверняка за
метили что вокруг них появляется некрасивая рамка синего цвета на
поминающая подчеркивание текстовых ссылок. CSS поможет от нее изCSS поможет от нее из поможет от нее из
бавиться.
Решение
Процесс удаления рамки схож с процедурой ее добавления. Для этого используется правило присваивающее свойству border значение none:
­¢¤. ©фрагментª
im border none Задание фонового изображения для страницы с помощью SS
Для указания фонового изображения вебстраницы используется свой
ство backroundimae по отношению к элементу body. Задание фонового изображения для страницы с помощью ­
73
Решение
Следующее правило использует в качестве фона страницы изображе
ние ³¦´°¯£µ¡¢¡£¯¶¦.·¶°. Оно распространяется на любую страни
цу к которой привязана содержащая его таблица стилей.
­¢¤. ©фрагментª
body font .¢em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif backroundcolor ® color bacround i­ae urlbacround noreeat;
backroundrepeat norepeat Результат выполнения правила показан на рис. ..
Рис. 3.3. Использование фонового изображения
Обсуждение
С помощью CSSсвойства backroundimae можно указать в таблице сти
лей путь к файлу с фоновым изображением. Чтобы использовать фоно
Цветные иллюстрации доступны по адресу ..¡¢¡­
7 Глава . ­ и графика вое изображение для самой страницы целиком задайте данное свой
ство для элемента body. Впрочем как вы увидите в дальнейшем фоно
вое изображение можно задать для любого элемента страницы.
По умолчанию изображение будет повторяться располагаясь мозаич
но по горизонтали и по вертикали пока не заполнит все доступное про
странство. Показанный на рис. .. результат был достигнут путем ис
пользования изображения с рис. .À. со значением norepeat свойства backround.
Как изменить способ размножения фонового изображения
По умолчанию изображение будет повторяться пока не заполнит все доступное пространство по горизонтали и по вертикали. Однако его по
ведением можно управлять с помощью свойства backroundrepeat.
Решение
Результат использования изображения с рис. .À со значением norepeat свойства backroundrepeat. Рис. 3.4. Заполнение фона страницы с помощью достаточно широкого изображенияÇ свойству ¤­ присвоено свойство ­
Высота изображения составляет лишь À пикселов что гораздо мень
ше высоты типичной вебстраницы поэтому ее фону был задан тот же цвет что и у последнего ряда пикселов градиентного изображения. Та
ким образом происходит плавный переход от изображения к фону стра
ницы.
Как изменить способ размножения фонового изображения
75
Такого эффекта можно добиться и более эффективным способом со
стоящим в использовании меньшего по размеру изображения которое быстрее загружается. Для этого нужно отрезать от нашего градиентно
го изображения тонкую полосу как показано на рис. ..
Рис. 3.5. Отрезанная полоса градиентного изображения
Задав свойству backroundrepeat для созданного изображения значение repeat­ получим такой же результат что и в первом примере исполь
зуя при этом файл гораздо меньшего размера. Чтобы обеспечить сплош
ное покрытие отображаемой в броузере страницы градиентом укажем в качестве ее фона цвет совпадающий с нижней частью градиента. Если бы градиентный переход осуществлялся не сверху вниз а справа налево для создания фоновой заливки можно было бы воспользоваться тем же методом повернув эффект на градусов. Взяв в качестве фоно
вого изображения горизонтальную полосу и указав свойству backround
repeat значение repeaty мы обеспечиваем повторение градиента сверху вниз как показано на рис. .. 76 Глава . ­ и графика Рис. 3.6. Градиентное изображение со значением ­ свойства ¤­
Как позиционировать фоновое изображение
По умолчанию добавленное на страницу одиночное без повторения фо
новое изображение появляется в левом верхнем углу страницы. Если в правилах стилей будет указано что изображение должно размножать
ся то отправной точкой послужит именно эта позиция. Однако фоновое изображение можно разместить и в другом месте страницы. Решение
Для позиционирования фонового изображения используется CSSсвой
ство backroundposition:
­¢¤­. ©фрагментª
content marin em ®em em ®em backroundcolor ¤¤¤¤¤¤ paddin 1em 1em ®p­ 1em backroundimae urltick.if backroundrepeat norepeat Как позиционировать фоновое изображение
77
bacround osition botto­ riht;
Приведенное выше правило размещает изображение в правом нижнем углу области с контентом как показано на рис. .. Чтобы текст не пе
рекрывал изображение для содержащего его контейнера были добав
лены внутренние отступы.
Обсуждение
Значениями свойства backroundposition могут быть ключевые слова процентные соотношения и числовые значения в различных единицах измерения.
Рис. 3.7. Позиционирование фонового изображения с помощью свойства ¤­
Ключевые слова
В предыдущем примере чтобы указать что фоновое изображение долж
но появиться в правом нижнем углу элемента div являющегося контей
нером для текстового контента мы использовали ключевое слово.
78 Глава . ­ и графика ­¢¤­. ©фрагментª
backroundposition bottom riht Вы можете использовать любую из следующих комбинаций ключевых слов:
• top left
• top center
• top riht
• center left
• center center
• center riht
• bottom left
• bottom center
• bottom riht
Если вы укажете только первое из ключевых слов то второе по умолча
нию будет соответствовать значению center:
backroundposition top Это описание тождественно следующей записи:
backroundposition top center Значения в процентах
Добиться более точного расположения можно при указании значения в процентах. Это особенно эффективно если величина и расположение других элементов страницы также указаны в процентах: в этом слу
чае они будут менять свой масштаб в зависимости от разрешения и раз
меров экрана пользователя Áтакой прием также называют «резиновой» версткой о которой мы поговорим в главе Â:
backroundposition « « Первое значение задает расположение элемента по горизонтали а вто
рое – по вертикали. Отсчет начинается из верхнего левого угла кото
рый соответствует значению « « соответственно при значении 1« 1« правый нижний угол изображения будет расположен в правом нижнем углу страницы.
Как и в случае с ключевыми словами при указании только одного про
центного значения второе сохранит значение по умолчанию составля
ющее â. Рассмотрим следующую декларацию стиля:
backroundposition « Она тождественна следующей записи:
backroundposition « « Как сделать фоновое изображение неподвижным при прокрутке контента
79
Использование единиц измерения
При позиционировании изображения с помощью CSS можно указать числовое значение в различных единицах измерения например пик
селах:
backroundposition p­ p­ Как и при указании значения в процентах первое значение задает рас
положение элемента по горизонтали а второе – по вертикали. Однако данный способ используется для четкого определения позиции верхне
го левого угла фонового изображения.
Единицы измерения можно использовать совместно с процентными значениями и при указании одного значения второе по умолчанию со
ставит «.
Как сделать фоновое изображение неподвижным при прокрутке контента
Вам наверняка встречались сайты на которых фоновое изображение не меняет своего положения в то время как контент прокручивается над ним. Такого эффекта можно добиться с помощью свойства backround
attachment.
Решение
Путем присвоения значения fi­ed свойству backroundattachment мож
но зафиксировать положение фонового изображения и оно будет оста
ваться на месте при прокрутке контента.
­¢¤£¦¤. ­ ©фрагментª
body font .¢em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif backroundcolor ® color backroundimae urlbackroundrepeat­.¦p backroundrepeat repeat­ bacround attach­ent ied;
Результат показан на рис. ..
Обсуждение
В данном случае для добавления в документ фонового изображения его позиционирования и описания поведения при прокрутке контента было использовано несколько CSSсвойств.
В качестве варианта можно было бы воспользоваться сокращенным ме
тодом записи той же самой информации с помощью свойства backround.
80 Глава . ­ и графика Рис. 3.8. Зафиксированное фоновое изображение остается неподвижным при прокрутке контентаОно позволяет одновременно указать значения свойств backroundcolor¨ backroundimae¨ backroundrepeat¨ backroundattachment и backround
posi tion в одном описании. Для примера рассмотрим следующее пра
вило CSS:
­¢¤£¦¤. ©фрагментª
body backroundcolor ® backroundimae urlbackroundrepeat­.¦p backroundrepeat repeat­ backroundattachment fi­ed backroundposition Эти описания можно представить в более сжатой форме следующим об
разом:
body backround ® urlbackroundrepeat­.¦p repeat­ fi­ed В заключение более подробно остановимся на описании backround
attachment fi­ed. Поддержка данного свойства как и многих других CSSсвойств у семейства броузеров §¨£¢§£¨ ©¦ª«¥¢£¢ ограничена. Ран
ние версии © обрабатывают данное свойство некорректно что было ис
Для каких элементов можно задавать фоновое изображение
81
правлено только в ©. Существуют обходные пути с использованием ˵̵SÍ¢¡ª¨ но как правило в этом случае игра едва ли стоит свеч.
По умолчанию пользователи ранних версий §¨£¢§£¨ ©¦ª«¥¢£¢ не поддер
живающих декларацию backroundattachment fi­ed увидят прокрутку фонового изображения что обычно можно считать вполне приемлемым компромиссом Áэто даже может подвигнуть пользователей на обновле
ние своих броузеровÂ.
Для каких элементов можно задавать фоновое изображение
В данной главе мы уже рассмотрели способ задания фонового изобра
жения для основной области страницы. Однако фон других элементов также можно задавать с помощью изображений.
Решение
Данное правило стиля задает фоновое изображение для блока со спи
ском ингредиентов в рецепте как видно на рис. ..
­¢¤µ. ©фрагментª
smallbo­ backroundimae urlbo­b.if backroundrepeat repeat­ float left marinriht p­ width p­ border1p­ solid ® В качестве фонового изображения блока со списком ингредиентов так
же используется градиент подобный тому что мы использовали для основной страницы за тем лишь исключением что в данном случае осуществляется переход от голубого к белому цвету. Я также задала для блока рамку того же цвета что и самая темная часть градиента. Обсуждение
Фоновые изображения можно использовать и для других элементов страницы в том числе и для заголовков как показано на рис. .. Как видите отображаемая под заголовком прерывистая линия создана пу
тем повторения одного и того же изображения. Оно изначально распо
ложено в левом нижнем углу заголовка а чтобы слегка отделить его от текста заголовка я задала для последнего внутренний отступ сни
зу в шесть пикселов.
­­. ­­..£¦¤Ê¤. ­
82 Глава . ­ и графика Рис. 3.9. Использование фонового изображения для отображения градиентного перехода в блоке со списком ингредиентов
­¢¤µ. ­ ©фрагментª
<h1>hinesestyle stuffed peppers</h1>
­¢¤µ. ©фрагментª
h1 backroundimae urldotty.if backroundrepeat repeat­ backroundposition bottom left paddin ©p­ color ®1©©¤ fontsi¥e 1©« fontweiht normal backroundcolor transparent Даже ссылкам можно задавать фон что порой может привести к весь
ма интересным эффектам как на рис. ..
­¢¤µ. ©фрагментª
alink¨ avisited color ®1©©¤ Для каких элементов можно задавать фоновое изображение
83
backroundcolor transparent paddinriht 1p­ ahover backroundimae urlarrow.if te­tdecoration none backroundposition center riht backroundrepeat norepeat Рис. 3.10. Использование фонового изображения для отображения линии под заголовком
Рис. 3.11. Применение фонового изображения к ссылке при наведении на нее указателя мыши
8 Глава . ­ и графика Размещение текста поверх изображения
В те дни когда CSS еще не существовало добавить текст поверх изоCSS еще не существовало добавить текст поверх изо еще не существовало добавить текст поверх изо
бражения можно было только с помощью графической программыÚ CSS предлагает гораздо более эффективный метод создания такого эффекта.
Решение
Для размещения текста над изображением проще всего использовать изображение в качестве фонового. Изображение под заголовком §·¢£§·¢£
´¡£§¨¶ в блоке со списком ингредиентов появилось благодаря использо в блоке со списком ингредиентов появилось благодаря использо
ванию следующего правила стилей:
Рис. 3.12. Задание фонового изображения для заголовка блока со списком ингредиентов
­¢¤. ©фрагментª
smallbo­ h marin paddin .em backroundimae urlbo­headerb.¦p backroundrepeat norepeat color ¤¤¤¤¤¤ backroundcolor red Как задать для документа более одного фонового изображения
85
fontsi¥e 1®« fontweiht normal Обсуждение
Использование CSS вместо графического редактора для добавления текста поверх изображения эффективнее по нескольким причинам.
Вопервых в дальнейшем будет сложнее изменить сам текст: для этого каждый раз придется искать исходное изображение редактировать его в графической программе и снова загружать на сервер.
Вовторых представление информации на странице в виде текста а не изображения обладает большей гибкостью. Броузеры не поддержи
вающие графику смогут отобразить текстовое содержимое добавлен
ное с помощью CSS размер шрифта такого текста может быть изменен пользователем. Это также благотворно сказывается на рейтинге сай
та в поисковых системах: они не умеют распознавать текст на графиче
ских изображениях но прекрасно индексируют текстовые данные рас
положенные поверх изображения средствами CSS.
Совет
Проверьте контрастность При добавлении светлого текста поверх изобра
жения µкак на рис ¸®°¶ область его размещения следует залить темным цве
том Это обеспечит видимость текста при отключении изображений или при медленной скорости соединения когда изображения загружаются не сразу
Как задать для документа более одного фонового изображения
Несмотря на наличие в спецификации CSS возможности применения к документу более одного фонового изображения в действительности ее поддержка реализована в единственном броузере – Sµ¤µ¢¡ от °ªª«£. Что же делать при возникновении необходимости в одновременном ис
пользовании двух изображений – допустим одно используется для за
полнения всей области а другое отображается статичноÐ
Решение
Имитировать эффект использования нескольких фоновых изображе
ний можно путем их задания для разных вложенных элементов каки
ми являются например html и body:
­¢¤¿. ©фрагментª
html 86 Глава . ­ и графика backroundimae urlbackroundrepeat­.¦p backroundrepeat repeat­ backroundcolor ® body font .¢em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif color backroundimae urlrecipes.if backroundrepeat norepeat backroundposition ¢« « marin paddin ®©p­ Результат применения данных правил показан на рис. .. Рис. 3.13. Добавление фоновых изображений для элементов ­ и ¤
Обсуждение
Такой простой пример может послужить основой для создания более сложных эффектов с использованием нескольких фоновых изображе
ний. Как вы уже могли убедиться на представленных в данной книге Применение эффекта прозрачности
87
примерах фоновое изображение можно задать для любого элемента страницы. Внимательный и творческий подход к применению изобра
жений позволит создать множество интересных визуальных решений не влияющих на доступность документа Áпоскольку фоновые изображе
ния не связаны со структурой документаÂ.
Многие из предлагаемых на сайте CSS Ù£§ Òµ¢´£§ решений основаны именно на такого рода игре с фоновыми изображениями.
Применение эффекта прозрачности
Добиться прозрачности можно с помощью графики в формате ¸Ò – со
хранив ваши изображения в формате Àбитного ¸Ò можно реали¸Ò можно реали можно реали
зовать эффект прозрачности и полупрозрачности. Изображения в фор
мате Ò также поддерживают прозрачность однако при сохранении необходимо добавить к нему кромку Á½µ¨¨£Â – цвет сходный с цветом фона на котором оно будет расположено.
Создать изображение Ò с поддержкой прозрачности одинаково отоÒ с поддержкой прозрачности одинаково ото с поддержкой прозрачности одинаково ото
бражаемое на различном фоне очень сложно с технической точки зре
ния. Для этого как правило нужно разделить изображение на два и со
хранить каждое из них отдельно а затем вновь собрать их воедино на странице. Этот подход отдает чемто совершенно дремучим чего следу
ет избегать при верстке документа с помощью CSS. Прокрутка контента с изображением в формате Ò над зафиксированным фоном приводит к возникновению «эффекта гало» Áореола что выглядит не очень кра
сиво. На рис. .À мы видим и проявление прозрачности но также ви
дим и проявление нежелательного «эффекта гало».
Рис. 3.14. Нежелательный «эффект гало»
­­·¤.
88 Глава . ­ и графика Решение
В примере на рис. . использовано два изображения в формате ¸Ò. Первое из них используется вместо белого фона элемента content. Это десятипиксельное изображение было создано в ¸²¥¨¥¶²¥ª. К прозрач¸²¥¨¥¶²¥ª. К прозрач. К прозрач
ному изображению был добавлен новый слой белого цвета степень про
зрачности которого была уменьшена до Àâ. Полученное изображение было сохранено в формате Àбитного ¸Ò с именем £¶¦¸µ.¶¡°.
Второе изображение в формате Àбитного ¸Ò с прозрачным фоном служит для замещения фонового изображения ¯¶.°². Мне хоте
лось бы закрепить его в правом верхнем углу окна Áс помощью деклара
ции backroundattachment fi­ed чтобы оно оставалось неподвижным при прокрутке страницы. Если бы вместо него использовалось изобра
жение в формате Ò Áс кромкой темносинего цвета то при движении оно оказалось бы над светлым фоном и возник описанный выше «эф
фект гало».
Достигнутый с помощью CSS эффект представлен на рис. .:
Рис. 3.15. Использование фонового изображения без «эффекта гало» для картинки с надписью Ë
­¢¤Ì. ©фрагментª
body font .¢em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif color backroundimae urlrecipes.pn backroundrepeat norepeat backroundposition¢« « backroundattachmentfi­ed Создание сложных рамок вокруг изображений например двойных
89
marin paddin ®©p­ content marin ®em em ®em backroundimae urlopa£ue.pn paddin 1em p­ ®p­ 1em Обсуждение
С помощью полупрозрачных изображений в формате ¸Ò можно до¸Ò можно до можно до
биться совершенно невероятных привлекательных эффектов. Но к со
жалению броузер §¨£¢§£¨ ©¦ª«¥¢£¢ не обеспечивает должной под§¨£¢§£¨ ©¦ª«¥¢£¢ не обеспечивает должной под ©¦ª«¥¢£¢ не обеспечивает должной по䩦ª«¥¢£¢ не обеспечивает должной под не обеспечивает должной под
держки их использования.
Однако тщательно продумав все аспекты верстки вашей страницы чаще всего можно найти решение позволяющее создать такого рода эффект для пользователей более современных броузеров таких как ¡¢£¤¥¦ Sµ¤µ¢¡ 䪣¢µ и §¨£¢§£¨ ©¦ª«¥¢£¢ версий и выше. Кроме того ограничения §¨£¢§£¨ ©¦ª«¥¢£¢ можно обойти с помощью ˵̵SÍ¢¡ª¨. Я расскажу об этом методе в главе .
Создание сложных рамок вокруг изображений¤ например двойных
Чтобы представить фотографии в лучшем виде у вас вполне может по
явиться желание украсить их более сложными рамками чем те что были рассмотрены в настоящей главе. Совместное использование рамок и фоновых изображений позволяет добиться потрясающих визуальных эффектов – и все это с помощью CSS. Опять же это избавит вас от неCSS. Опять же это избавит вас от не. Опять же это избавит вас от не
обходимости обработки изображений в ¸²¥¨¥¶²¥ª для создания рамок.
Решение
На рис. . представлена фотография которая может быть использо
вана в качестве элемента страницы или быть частью фотоальбома. Са
мый простой метод создания двойной рамки состоит в задании фоново
го цвета и внутреннего отступа для изображения. В этом случае цвет фона послужит первой рамкой а собственно рамка – второй:
­¢¤¤. ©фрагментª
im.doubleborder border 1p­ solid paddin p­ backroundcolor 90 Глава . ­ и графика Рис. 3.16. Простая двойная рамка созданная исключительно средствами ¯
С помощью фонового изображения можно добиться более сложных эф
фектов. В следующем примере CSSкода используется заполнение облаCSSкода используется заполнение облакода используется заполнение обла
сти под фотографией небольшим мозаичным изображением для созда
ния эффекта показанного на рис. .:
­¢¤¤. ©фрагментª
im.doubleborder border p­ solid paddin p­ backroundimae urldoubleborderb.if Рис. 3.17. Создание двойной рамки с помощью фонового изображения
Обсуждение
Для достижения описанных выше эффектов использовались внутрен
ние отступы для изображения создающие пустое пространство между ним и рамкой. Пустое пространство будет заполнено цветом фона или Заключение
91
фоновым изображением и таким образом можно создавать привлека
тельные рамки без использования вложенных элементов.
Заключение
В настоящей главе были представлены ответы на наиболее часто возни
кающие вопросы о возможностях использования изображений. Основ
ное внимание было уделено фоновым изображениям которые по сути являются важным строительным материалом для верстки с помощью CSS страниц со сложным графическим дизайном. Использование фоно страниц со сложным графическим дизайном. Использование фоно
вых изображений дает возможность более гибкого изменения внешнего вида страницы с помощью альтернативных таблиц стилей а также соз
дания интересных визуальных эффектов.
По ходу прочтения данной книги вы безусловно еще столкнетесь с во
просами связанными с использованием изображений. В частности в главе рассматриваются способы их позиционирования по отноше
нию к другим элементам страницы и их применение на страницах с бо
лее сложной структурой чем те что были представлены в этой главе.
Глава 4
. Навигация
Если на вашем сайте более одной страницы вам придется разработать систему навигации по сайту. На самом деле навигация является одной из самых важных частей архитектуры любого сайта и потому ее следу
ет тщательно продумать чтобы предоставить пользователям возмож
ность удобного перемещения от одного раздела к другому. Когда речь идет о создании удобной системы навигации возможности CSS предстают во всей своей красе. Применяемые ранее методы были основаны как правило на использовании большого количества изо
бражений вложенных таблиц и сценариев на ˵̵SÍ¢¡ª¨. Безусловно это оказывало негативное влияние на юзабилити и доступность сай
тов. Если по сайту нельзя перемещаться при использовании устройств не поддерживающих ˵̵SÍ¢¡ª¨ то вы рискуете потерять часть пользо˵̵SÍ¢¡ª¨ то вы рискуете потерять часть пользо то вы рискуете потерять часть пользо
вательской аудитории отключившей ˵̵SÍ¢¡ª¨ и тех кто пользует˵̵SÍ¢¡ª¨ и тех кто пользует и тех кто пользует
ся устройствами воспринимающими исключительно текст Áнапример экранными дикторамиÂ. Не стоит забывать и о роботах поисковых си
стем которые в такой ситуации не смогут пройти дальше главной стра
ницы сайта. Если ваших клиентов не беспокоят вопросы доступности объясните им что с такими неуклюжими меню они рискуют опустить
ся в самый низ списка в рейтинге поисковых системÚ
С помощью CSS можно создать привлекательную панель навигации с текстовыми ссылками которые можно разметить таким образом что они будут доступны и пользователям физически не имеющим возмож
ности увидеть ваш сайт но желающим получить размещенную на нем информацию. В настоящей главе мы рассмотрим множество различ
ных методов создания панелей навигации с помощью CSS. Некоторые из них вполне подойдут для замены старых графических меню на уже существующих сайтах что сократит время их загрузки и сделает бо
лее доступными для различных категорий пользователей и поисковых систем. Другие предназначены для использования на сайтах сверстан
ных исключительно на CSS.
Оформление списка в виде навигационного меню
93
Оформление списка в виде навигационного меню
По сути меню навигации представляет собой список разделов сайта поэтому имеет смысл разметить его именно в виде списка а затем при
менить стили CSS по отношению к его элементам. Однако визуально он должен отличаться от стандартного маркированного списка который выводится на экран при использовании внутренней таблицы стилей броузера.
Решение
Меню навигации представленное на рис. À. является списком оформ
ленным с помощью CSS.
Рис. 4.1. Создание навигации путем написания правил стилей для списка
Ниже представлена разметка необходимая для создания списка:
­¢¿­»¡. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ists as naviation</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”listnav1.css” /> </head> <body> <div id¡”naviation”> <ul> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul> </div> </body> </html>
Далее представлен полный CSSкод преображающий незамысловатый маркированный список в привлекательное меню навигации:
9 Глава . Навигация ­¢¿­»¡.
naviation width p­ naviation ul liststyle none marin paddin naviation li borderbottom 1p­ solid ¢¤¢¤ naviation li alink¨ naviation li avisited fontsi¥e ¢« display block paddin .®em .®em .em borderleft 1p­ solid 111 borderriht 1p­ solid 111 backroundcolor 1 color ¤¤¤¤¤¤ te­tdecoration none Обсуждение
Для создания панели навигации на основе маркированного списка не
обходимо прежде всего создать сам список разместив ссылки внутри элементов li:
­¢¿­»¡. ­ ©фрагментª
<ul> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li></ul>
Затем разместим список внутри элемента div с соответствующим I:
­¢¿­»¡. ­ ©фрагментª
<div id¡”naviation”> <ul> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div>
Оформление списка в виде навигационного меню
95
Как видно на рис. À. при применении внутренней таблицы стилей используемой броузером по умолчанию такая разметка выглядит до
вольно обычно.
Рис. 4.2. Первоначальный вид списка ©стилевое оформление отсутствуетª
Оформление списка лучше начать с написания правил стилей для кон
тейнера в котором размещается сам список – в данном случае с иден
тификатором naviation:
­¢¿­»¡. ©фрагментª
naviation width p­ Данное правило задает ширину контейнера. Если бы он являлся ча
стью сверстанного на CSS макета то скорее всего нужно было бы добаCSS макета то скорее всего нужно было бы доба макета то скорее всего нужно было бы доба
вить в него информацию о позиционировании.
Затем займемся написанием правил стилей для списка:
­¢¿­»¡. ©фрагментª
naviation ul liststyle none marin paddin Как видно на рис. À. вышеприведенное правило удаляет маркеры спи
ска и убирает внешние отступы создаваемые броузером вокруг списка по умолчанию.
Рис. 4.3. Внешний вид списка после удаления маркеров и внешних отступов
Теперь настало время создать стиль для дочерних элементов li блока naviation добавив для них нижнюю рамку:
96 Глава . Навигация ­¢¿­»¡. ©фрагментª
naviation li borderbottom 1p­ solid ¢¤¢¤ Наконец зададим стиль для самой ссылки:
­¢¿­»¡. ©фрагментª
naviation li alink¨ naviation li avisited fontsi¥e ¢« display block paddin .®em .®em .em borderleft 1p­ solid 111 borderriht 1p­ solid 111 backroundcolor 1 color ¤¤¤¤¤¤ te­tdecoration none Большинство изменений вносятся именно с помощью указанных выше правил CSS задающих стиль рамки справа и слева удаляющих подCSS задающих стиль рамки справа и слева удаляющих под задающих стиль рамки справа и слева удаляющих под
черкивание и т. д. Первое описание присваивает значение block свойству display благодаря чему ссылка отображается как блочный элемент. Это означает что при наведении указателя мыши на любое место навигаци
онной «кнопки» она будет активирована. Аналогичного эффекта можно было бы достичь путем использования изображения в качестве ссылки.
Изменение вида ссылки при наведении на нее указателя мыши с помощью SS без использования изображений или сценариев на ¹º»ºS¬ª¼
При наведении указателя мыши на кнопку навигационного меню ее вид может изменяться привлекая к себе внимание. Для реализации такого эффекта в навигации основанной на применении графики не
обходимо использовать два изображения и ˵̵SÍ¢¡ª¨.
Решение
Создать такой привлекательный эффект гораздо проще с помощью CSS а не графики. Для этого используется селектор псевдокласса hover как и при задании стиля для ссылок при наведении на них указателя мыши.
Вернемся к рассмотренному ранее примеру навигационного меню и до
бавим в таблицу стилей следующее правило:
­¢¿­»µ. ©фрагментª
naviation li ahover backroundcolor 111 Изменение вида ссылки при наведении на нее указателя мыши с помощью ­
97
color ¤¤¤¤¤¤ На рис. À.À показан вид меню при наведении курсора на первый пункт:
Рис. 4.4. Эффект смены визуального оформления пунктов меню реализованный средствами ¯
Обсуждение
Используемый для создания такого эффекта CSSкод предельно прост. Механизм создания разного визуального оформления ссылок одинаков при работе со ссылками различной сложности. В данном примере ре
ализована смена цвета фона ссылки на цвет левой части рамки одна
ко в вашем распоряжении имеется огромное количество возможностей для создания интересных навигационных эффектов: например можно изменить цвет фона текста и рамки.
Примечание
Мышка тут мышка там При условии просмотра сайта в современных бро
узерах включая nternet ¡p¢orer ¹ селектор псевдокласса hover можно ис
пользовать по отношению к любому элементу однако версии nternet ¡p¢orer £ и ниже корректно обрабатывают его только для ссылок
В ранних версиях nternet ¡p¢orer для перехода по ссылке необходимо было щелкнуть по ее тексту поскольку ссылка не заполняла весь контейнер µв дан
ном случае – элемент li¶ целиком Это означает что для перехода к опреде
ленному разделу пользователь должен щелкнуть по тексту¥ щелчок по крас
ному фоновому цвету не сработает
Данную проблему можно решить путем увеличения ширины ссылки средства
ми C¯¯ µоднако такой способ приемлем только для nternet ¡p¢orer
£ и ниже¶ Здесь представлено необходимое для этого правило стиля¥
¯ html naviation li a width 1« Безусловно в некоторых случаях вполне можно обойтись без таких трюков и оставить все как есть Мы рассмотрим проблему создания кроссброузерного кода более подробно в главе ¹
98 Глава . Навигация Создание навигационного меню с подпунктами с помощью списков и таблиц стилей
В приводимых ранее примерах были рассмотрены навигационные пане
ли в виде одноуровневых списков. Иногда этого недостаточно. Но можно ли создать многоуровневое меню навигации с помощью списков и CSSÐ
Решение
Для создания подуровня системы навигации оптимально создать спи
сок второго уровня внутри основного списка. Такая разметка четко обо
значает различные уровни навигации и вполне понятна даже броузе
рам не поддерживающим CSS в полной мере.
Вернемся к изображенному на рис. À.À примеру и добавим в навигаци
онное меню подуровень путем создания вложенного списка и задания стиля его пунктов:
­¢¿­»Í. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>ists as naviation</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”listnavËsub.css” /></head><body><div id¡”naviation”> <ul> <li><a href¡””>ecipes</a> <ul> <li><a href¡””>tarters</a></li> <li><a href¡””>ain ourses</a></li> <li><a href¡””>esserts</a></li> </ul> </li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div></body></html>
­¢¿­»Í.
naviation width p­ Создание навигационного меню с подпунктами с помощью списков и таблиц стилей
99
naviation ul liststyle none marin paddin naviation li borderbottom 1p­ solid ¢¤¢¤ naviation li alink¨ naviation li avisited fontsi¥e ¢« display block paddin .®em .®em .em borderleft 1p­ solid 111 borderriht 1p­ solid 111 backroundcolor 1 color ¤¤¤¤¤¤ te­tdecoration none naviation li ahover backroundcolor 111 color ¤¤¤¤¤¤ naviation ul ul marinleft 1p­ naviation ul ul li borderbottom 1p­ solid 111 marin naviation ul ul alink¨ naviation ul ul avisited backroundcolor ¢¤¢¤ color 111 naviation ul ul ahover backroundcolor 111 color ¤¤¤¤¤¤ Результат добавления данного кода представлен на рис. À..
Обсуждение
Использование вложенных списков – оптимальный способ создания подобных панелей навигации. Основной список содержит ключевые разделы сайта в то время как в списке второго уровня под пунктом ¹¶ отображаются подразделы данной категории. Структура спи
ска отличается четкостью и ясностью и без использования CSS как видно на рис. À..
100 Глава . Навигация Рис. 4.5. Созданное средствами ¯ многоуровневое навигационное меню Рис. 4.6. Логичность структуры системы навигации очевидна и без использования ¯Для создания такого списка используется простая λϺразметка: вложенный список добавляется внутрь соответствующего элемента li.
­¢¿­»Í. ­
<div id¡”naviation”> <ul> <li><a href¡””>ecipes</a> <ul>
<li><a hre=””>Starters</a></li> <li><a hre=””>ain ourses</a></li> <li><a hre=””>esserts</a></li> </ul> </li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div>
При обработке данного λϺкода в броузере без изменения таблицы стилей мы увидим результат изображенный на рис. À. слева в этом Создание навигационного меню с подпунктами с помощью списков и таблиц стилей
101
случае элементы вложенного списка унаследуют стили определенные для пунктов основного меню.
Оформим вложенный список таким образом чтобы на вид можно было определить что это список подразделов отличный от основного меню:
­¢¿­»Í. ©фрагментª
naviation ul ul marinleft 1p­ Данное правило добавляет для вложенного списка внешний отступ от левого края меню и приводит к выравниванию всех пунктов меню по правому краю как показано на рис. À. справа.
Рис. 4.7. Список второго уровня в стиле основного меню и тот же список с добавлением отступов
Наконец добавим несколько простых правил стилей для элементов li и a расположенных внутри вложенного списка:
­¢¿­»Í. ©фрагментª
naviation ul ul li borderbottom 1p­ solid 111 marin naviation ul ul alink¨ naviation ul ul avisited backroundcolor ¢¤¢¤ color 111 naviation ul ul ahover backroundcolor 111 color ¤¤¤¤¤¤ 102 Глава . Навигация Создание горизонтального меню с помощью списков и SS
Во всех предыдущих примерах мы рассматривали вертикальную па
нель навигации которую чаще всего можно встретить на сайте сле
ва или справа по отношению к области с основным контентом. Одна
ко навигационные ссылки также часто располагаются по горизонтали в верхней части документа.
Решение
Как видно на рис. À. такое меню можно создать путем написания CSS
стилей для списка. Свойству display для элементов li нужно присвоить значение inline во избежание переноса каждого следующего пункта на новую строку. Рис. 4.8. Создание горизонтально расположенной панели навигации с помощью ¯
Ниже представлен использованный λϺ и CSSкод.
­¢¿­»Í ·. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>ists as naviation</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”listnavËhori¥.css” /></head><body><div id¡”naviation”> <ul> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div></body></html>
­¢¿­»Í ·.
body paddin 1em Создание горизонтального меню с помощью списков и ­
103
naviation fontsi¥e ¢« naviation ul liststyle none marin paddin paddintop 1em naviation li display inline naviation alink¨ naviation avisited paddin .®em 1em .®em 1em color ¤¤¤¤¤¤ backroundcolor 1 te­tdecoration none border 1p­ solid 111 naviation ahover color ¤¤¤¤¤¤ backroundcolor 111 Обсуждение
Чтобы разместить пункты меню по горизонтали вначале создадим спи
сок аналогичный тому что был использован для реализации верти
кальной панели навигации:
­¢¿­»Í ·. ­ ©фрагментª
<div id¡”naviation”> <ul> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div>
Напишем для контейнера naviation несколько правил стилей для за
дания базовых параметров шрифта как и в примере с вертикальным меню. Для данного элемента также скорее всего потребуется задать свойства для его позиционирования на странице:
­¢¿­»Í ·. ©фрагментª
naviation fontsi¥e ¢« 10 Глава . Навигация Затем уберем маркеры и отступы создаваемые броузером по умолча
нию для элемента ul:
­¢¿­»Í ·. ©фрагментª
naviation ul liststyle none marin paddin paddintop 1em Свойство располагающее список по горизонтали применяется по отно
шению к элементу li. Таким образом после присваивания свойству dis
play значения inline список будет выглядеть как показано на рис. À..
­¢¿­»Í ·. ©фрагментª
naviation li display inline Рис. 4.9. Отображение пунктов меню по горизонтали
Теперь остается только определить стилевое оформление ссылок нави
гационной панели:
­¢¿­»Í ·. ©фрагментª
naviation alink¨ naviation avisited paddin .®em 1em .®em 1em color ¤¤¤¤¤¤ backroundcolor 1 te­tdecoration none border 1p­ solid 111 naviation ahover color ¤¤¤¤¤¤ backroundcolor 111 Если вы хотите чтобы каждая ссылка располагалась в «окошке» как в этом примере запомните что для создания пустого пространства между его краями и ссылкой необходимо задать больше внутренних отступов Áªµ´´¡§·Â справа и слева а для отделения элементов навига
ционного меню друг от друга – задать внешние отступы Á½µ¢·¡§Â спра½µ¢·¡§Â спра спра
ва и слева.
Создание средствами ­ навигационной панели с кнопками
105
Создание средствами SS навигационной панели с кнопками
На многих сайтах используется панель навигации по виду состоящая из кнопок. Такого рода меню часто создают с помощью изображений к которым применяют различные эффекты для имитации кнопки. Для смены изображения нередко пишется сценарий на ˵̵SÍ¢¡ª¨ что по˵̵SÍ¢¡ª¨ что по что по
зволяет создать впечатление будто кнопки продавливаются при наве
дении на них указателя мыши или при щелчке.
У вас может возникнуть вполне закономерный вопрос: «Возможно ли создать такую панель навигации с кнопками исключительно средства
ми CSSл Ответ однозначный – даÚ
Решение
С помощью CSS можно без особого труда сделать элементы панели наCSS можно без особого труда сделать элементы панели наможно без особого труда сделать элементы панели на
вигации похожими на кнопки. Такой эффект основан на использова
нии свойства border. Рис. 4.10. Создание навигационного меню с кнопками средствами ¯
Ниже представлен необходимый код:
­¢¿­»Í­­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>ists as naviation</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”listnavËbutton.css” /></head><body><div id¡”naviation”> <ul> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div></body></html>
106 Глава . Навигация ­¢¿­»Í­­.
naviation fontsi¥e¢«
naviation ul liststyle none marin paddin paddintop 1em naviation li display inline naviation alink¨ naviation avisited marinriht .em paddin .em .©em .em .©em color A© backroundcolor ¤©A te­tdecoration none bordertop 1p­ solid ¤¤¤¤¤¤ borderleft 1p­ solid ¤¤¤¤¤¤ borderbottom 1p­ solid 111 borderriht 1p­ solid 111 naviation ahover bordertop 1p­ solid 111 borderleft 1p­ solid 111 borderbottom 1p­ solid ¤¤¤¤¤¤ borderriht 1p­ solid ¤¤¤¤¤¤ О
бсуждение
Для создания такого эффекта мы будем использовать горизонтальное меню навигации созданное в разделе «Создание горизонтального меню с помощью списков и CSS». Чтобы пункты меню стали похожими на кнопки окрасим левую и нижнюю части рамки одним цветом а верх
нюю и правую – другим более светлым. Таким образом кнопка будет казаться объемной:
­¢¿­»Í­­. ©фрагментª
naviation alink¨ naviation avisited marinriht .em paddin .em .©em .em .©em color A© backroundcolor ¤©A te­tdecoration none bordertop 1p­ solid ¤¤¤¤¤¤ borderleft 1p­ solid ¤¤¤¤¤¤ Создание с помощью ­ панели навигации на основе вкладок
107
borderbottom 1p­ solid 111 borderriht 1p­ solid 111 При наведении указателя мыши на кнопку цвет разных частей рамки поменяется местами создавая эффект нажатия:
­¢¿­»Í­­. ©фрагментª
naviation ahover bordertop 1p­ solid 111 borderleft 1p­ solid 111 borderbottom 1p­ solid ¤¤¤¤¤¤ borderriht 1p­ solid ¤¤¤¤¤¤ Поэкспериментируйте с толщиной рамки и фоновыми изображениями для создания оптимального сочетания гармонирующего с дизайном вашей страницы.
Создание с помощью SS панели навигации на основе вкладок
На многих вебсайтах в верхней части страницы можно встретить на
вигационное меню состоящее из вкладок. Его часто создают с исполь
зованием изображений. Но такой подход снижает доступность сайта и может порождать сложности если навигация создается с помощью системы управления контентом ÁCÏS предоставляющей пользоватеCÏS предоставляющей пользовате предоставляющей пользовате
лю возможность удаления и добавления вкладок а также изменения текста ссылок. Однако вкладки можно создать с помощью фоновых изо
бражений и текста оформленных с помощью CSS.
Решение
Изображенная на рис. À. панель навигации с вкладками была созда
на путем написания правил стилей для горизонтального списка.
Рис. 4.11. Создание навигационной панели с вкладками с помощью ¯
Ниже представлен использованный λϺ и CSSкод.
­¢¿­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”>
108 Глава . Навигация <head><title>ists as naviation</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /><link rel¡”stylesheet” type¡”te­t/css” href¡”tabs.css” /></head><body id¡”recipes”><div id¡”header”><ul> <li class¡”recipes”><a href¡””>ecipes</a></li> <li class¡”contact”><a href¡””>ontact s</a></li> <li class¡”articles”><a href¡””>Articles</a></li> <li class¡”buy”><a href¡””>uy nline</a></li></ul></div><div id¡”content”><h1>ecipes</h1><p>orem ipsum dolor sit amet¨ … </p></div></body></html>
­¢¿­.
body font .em/1.em verdana¨ arial¨ sansserif backroundcolor ¤¤¤¤¤¤ color marin 1« 1« header float left width 1« borderbottom 1p­ solid A¤¤ marinbottom em header ul marin paddin em liststyle none header li float left backroundimae url“imaes/tabËleft.if” backroundrepeat norepeat marin 1p­ paddin p­ Создание с помощью ­ панели навигации на основе вкладок
109
header a float left display block backroundimae url“imaes/tabËriht.if” backroundrepeat norepeat backroundposition riht top paddin .em 1p­ .em te­tdecoration none fontweiht bold color ©© recipes header li.recipes¨contact header li.contact¨articles header li.articles¨buy header li.buy backroundimae url“imaes/tabËactiveËleft.if” recipes header li.recipes a¨contact header li.contact a¨articles header li.articles a¨buy header li.buy a backroundimae url“imaes/tabËactiveËriht.if” backroundcolor transparent color¤¤¤¤¤¤ Обсуждение
Для создания навигационного меню со вкладками в данном случае был использован многократно проверенный на практике метод «раздвиж
ных дверей» Дугласа Боумана ÁÛ¥±·«µ¶ ¥¾½µ§Â.
По структуре меню навигации является маркированным списком подобным тому с кото
рым мы работали на протяжении настоящей главы за тем лишь исклю
чением что теперь каждому элементу li был присвоен атрибут class для описания содержащейся внутри ссылки. Кроме того список является дочерним элементом контейнера div с идентификатором Áid header. На
звание приема возникло по аналогии – используемые два изображения перекрывают друг друга и при увеличении размера шрифта «разъезжа
ются».
Для создания такого эффекта нам потребуется четыре изображения: два для представления обычного вида вкладки и два для представле
ния ее вида при наведении указателя мыши. Использованные в данном примере изображения показаны на рис. À.. Как видите их размер значительно превышает обычный размер вкладки что обеспечива
ет возможность ее увеличения например если пользователь сделает шрифт крупнее.
­­.­­.­¤¤
110 Глава . Навигация Рис. 4.12. Файлы изображений для создания вкладок
Ниже представлен список основных пунктов меню:
­¢¿­. ­ ©фрагментª
<div id¡”header”><ul> <li class¡”recipes”><a href¡””>ecipes</a></li> <li class¡”contact”><a href¡””>ontact s</a></li> <li class¡”articles”><a href¡””>Articles</a></li> <li class¡”buy”><a href¡””>uy nline</a></li></ul></div>
Прежде всего нужно задать стиль контейнера окружающего меню на
вигации. В данном упражнении достаточно будет указать для него па
раметры нижней рамки но на реальных сайтах он скорее всего будет содержать другие элементы помимо вкладок Áнапример логотип или поле для ввода поискового запросаÂ.
header float left width 1« borderbottom 1p­ solid A¤¤ marinbottom em Как видите контейнер объявлен плавающим с помощью свойства float с выравниванием влево. Это свойство нужно указать и для отдельных пунктов списка объявление родительского контейнера плавающим га
рантирует что плавающие элементы списка останутся внутри контей
нера соответственно рамка всегда будет располагаться под ними.
Далее создадим стиль для дочернего элемента ul:
­¢¿­. ©фрагментª
header ul marin Создание с помощью ­ панели навигации на основе вкладок
111
paddin em liststyle none Данное правило стиля удаляет маркеры списка и изменяет размер внешних и внутренних отступов. Теперь внутренний отступ элемента ul сверху составит em. На рис. À. отображается текущий результат пре
образований:
Рис. 4.13. Вид меню навигации после задания стиля элемента Настало время создать стили для пунктов списка:
­¢¿­. ©фрагментª
header li float left backroundimae url“imaes/tabËleft.if” backroundrepeat norepeat marin 1p­ paddin p­ С помощью свойства float пункты списка располагаются по горизонта
ли оставаясь при этом блочными элементами. Затем на сцену выходит одно из изображений «раздвижных дверей» – тонкая полоса отобра
жаемая слева от вкладки. Оно будет выступать в качестве фонового. От
ступ справа в один пиксел создает зазор между вкладками. На рис. À.À видно что теперь слева от каждой вкладки отображается соответству
ющее изображение.
Рис. 4.14. Панель навигации после добавления новых стилей Последним штрихом к оформлению панели навигации в обычном со
стоянии станет написание стилей для ссылок. Каждая из них должна отображаться на фоне второго изображения расположенного справа от уже имеющегося формируя вкладку:
112 Глава . Навигация ­¢¿­. ©фрагментª
header a float left display block backroundimae url“imaes/tabËriht.if” backroundrepeat norepeat backroundposition riht top paddin .em 1p­ .em te­tdecoration none fontweiht bold color ©© Результат показан на рис. À..
Рис. 4.15. Внешний вид вкладок
Попробуйте увеличить размер шрифта в броузере и вы увидите что размер вкладок изменится соответствующим образом. При этом они не перекрывают друг друга а текст не вылезает за пределы вкладки – все это благодаря тому что мы взяли размер изображения «с запасом».
Чтобы придать панели навигации более завершенный вид нужно вы
делить вкладку соответствующую текущей странице. Если помните каждой ссылке было присвоено уникальное имя класса. Присвоим эле
менту body атрибут I с таким же значением а остальное за нас сдела
ет CSS.
­¢¿­. ­ ©фрагментª
<body id¡”recipes”>
Хотя может показаться что CSSкод довольно длинен но применяеCSSкод довольно длинен но применяекод довольно длинен но применяе
мый нами подход для выделения вкладки имя класса которой совпа
дает с идентификатором элемента body предельно прост. Используемые изображения в точности копируют две составляющие вкладку картин
ки но окрашены другим цветом за счет чего создается эффект выделе
ния одной вкладки. Ниже представлен CSSкод:
­¢¿­. ©фрагментª
recipes header li.recipes¨contact header li.contact¨articles header li.articles¨buy header li.buy Выделение ссылок ведущих на внешний сайт
113
backroundimae url“imaes/tabËactiveËleft.if” recipes header li.recipes a¨contact header li.contact a¨articles header li.articles a¨buy header li.buy a backroundimae url“imaes/tabËactiveËriht.if” backroundcolor transparent color ¤¤¤¤¤¤ При использовании таких правил стилей достаточно задать элементу body атрибут I со значением recipes и соответствующая вкладка »ecipes будет выделена если значением будет contact выделена будет вклад
ка Contact ¼s и т. д. Результат проделанной работы можно увидеть на рис. À.. Рис. 4.16. Выделение вкладки ¯­­ Ð путем присвоения значения ­­ атрибуту Ñ элемента ¤
Совет
Обратите внимание на полезный прием Указание атрибута I для элемен
та body
может сослужить хорошую службу К примеру различные разделы ва
шего сайта могут иметь разное цветовое оформление помогая пользовате
лям сориентироваться Для этого нужно задать элементу body идентификатор со значением соответствующим названию раздела а затем использовать его в таблице стилей как в данном примере
Выделение ссылок¤ ведущих на внешний сайт
При создании ссылки на внешние ресурсы целесообразно использовать визуальные подсказки дающие пользователю понять что ссылка ведет на другой сайт. Это можно сделать с помощью CSS не изменяя разметCSS не изменяя размет не изменяя размет
ку самого документа. Решение
Для оформления внешних ссылок можно использовать селектор CSS поддерживаемый многими современными броузерами. В следующем абзаце первая ссылка ведет на другую страницу того же сайта а вто
рая – на другой вебсайт ÁÒ¥¥·«£Â. 11 Глава . Навигация ­¢¿¦­Í. ­
<T html I “////T T 1. trict//”“http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>hapter ® how e­ternal links</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <link rel¡”stylesheet” type¡”te­t/css” href¡”e­ternalËlinks.css” /> </head> <body>
<p>orem ipsum dolor sit amet¨ <a href¡”pae.html”>consectetur adipiscin elit</a>. Aenean porta. onec eet £uam. orbi libero.urabitur ut ¦usto vehicula elit feuiat lacinia. orbiac £uam. <a href¡”http//www.oole.com”>ed venenatis</a>¨lectus £uis porta viverra¨ lectus sapien tempus odio¨ acvolutpat mi dolor ac elit.</p> </body> </html>
Для обращения к ссылке начинающейся с http и добавления к ней пиктограммы можно использовать селектор описанный в специфика
ции CSS:
­¢¿¦­Í.
aÌhref Í¡”http”Î paddinleft p­ backroundimae urllinkËiconËe­ternal.if backroundrepeat norepeat Рис. 4.17. Рядом со ссылкой ведущей на другой сайт отображается пиктограмма
Рядом со всеми ссылками начинающимися с http Áони должны вести на внешние ресурсы поскольку для ссылок ведущих на другие страни
цы того же сайта не нужно вводить http будет показана пиктограмма в виде земного шара. Выделение ссылок ведущих на внешний сайт
115
Обсуждение
С
електоры атрибутов CSS поддерживаются большинством современCSS поддерживаются большинством современ поддерживаются большинством современ
ных броузеров Áисключение составляет §¨£¢§£¨ ©¦ª«¥¢£¢ Â. В осталь§¨£¢§£¨ ©¦ª«¥¢£¢ Â. В осталь ©¦ª«¥¢£¢ Â. В осталь©¦ª«¥¢£¢ Â. В осталь Â. В осталь
ных броузерах вид ссылки не изменится поэтому можно считать этот эффект приятным дополнением для пользователей более новых броу
зеров.
Рассмотрим селектор атрибута aÌhref Í¡”http”Î более подробно. Атрибутом для данного селектора выбран href и мы хотим чтобы он ссылался на элементы у которых значение данного атрибута начина
ется с http. Оператор Í¡ означает «начинается с». С помощью похожего селектора атрибута можно к примеру выбрать все ссылки на электрон
ные адреса: aÌhref Í¡”mailto”Î.
Селекторы атрибутов удобно также использовать для анализа расшире
ния файла на который указывает ссылка. Например анализируя рас
ширение файла в тексте ссылки можно добавить значок указывающий на то что это файл в формате ¸Û и т. п. Селектор aÌhref Ï¡”.pdf”Î указы
вает на все ссылки с расширением файла .¶¢². Оператор Ï¡ означает «за
канчивается на» поэтому данный селектор выбирает все элементы зна
чение атрибута href которых заканчивается на .¶¢². Ниже представлен пример использования всех рассмотренных трех селекторов:
­¢¿¦­Í. ­
<ul class¡”links”>
<li><a href¡”http//www.oole.com”>¬o somewhere else</a></li>
<li><a href¡”/files/e­ample.pdf”>ownload a ¤</a></li>
<li><a href¡”mailtoinfoÐe­ample.com”>mail someone</a></li>
</ul>
­¢¿¦­Í.
aÌhref Í¡”http”Î paddinleft p­ backroundimae urllinkËiconËe­ternal.if backroundrepeat norepeat aÌhref Í¡”mailto”Î paddinleft p­ backroundimae urllinkËiconËemail.if backroundrepeat norepeat aÌhref Ï¡”.pdf”Î paddinleft p­ backroundimae urllinkËiconËpdf.if 116 Глава . Навигация backroundrepeat norepeat Рис. 4.18. Ссылки с пиктограммами указывающими что они ведут на внешний ресурс на адрес электронной почты и файл ¤£
Селекторы атрибутов полезно использовать в подобных ситуациях – для внесения привлекательных дополнений в дизайн вашей страницы.
Изменение вида курсора
При наведении курсора на ссылку или какойлибо иной элемент стра
ницы он нередко приобретает вид руки. Иногда у разработчика может возникнуть необходимость в изменении вида курсора для акцентиро
вания внимания на какомлибо действии Áили для соответствия опреде
ленному дизайну интерфейсаÂ.
Решение
Вид курсора можно изменить с помощью CSSсвойства cursor. К приме
ру чтобы курсор изменял свой вид при наведении на ссылки на спра
вочную документацию можно задать следующее правило стиля:
a.help cursor help В табл. À. представлены доступные в CSS . свойства и результат их применения при просмотре документа в броузере §¨£¢§£¨ ©¦ª«¥¢£¢ .
Обсуждение
Свойство cursor может принимать много различных значений. Измене
ние вида курсора в вебприложении – полезный прием позволяющий сделать интерфейс более дружественным. Это дает пользователю до
полнительную информацию о назначении тех или иных элементов Áна
пример при наведении курсора на справочный текст он приобретает вид вопросительного знакаÂ.
Пиктограммы представленные на рис. À. взяты с ­­.££ £.
.
Изменение вида курсора
117
Предупреждение
Изменение вида курсора может привести к путанице Описанный прием следует использовать с осторожностью принимая во внимание тот факт что пользователи обычно привыкают к стандартному поведению броузера – на
пример к тому что при наведении на ссылку курсор превращается в руку с указующим пальцем
Таблица ¿.¡. Стандартные курсоры ¯µ.¡ при просмотре в ÑÒÓ
118 Глава . Навигация Таблица ¿.µ. Новые значения свойства в ¯
Значение Отображение ¼как в ©½
copy
поддержка отсутствует
alias
поддержка отсутствует
cell
поддержка отсутствует
allscroll
Реализация смены изображений на панели навигации без использования ¡¢£¢c¤i¥t
119
<head><title>ists as naviation</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /><link rel¡”stylesheet” type¡”te­t/css” href¡”imaes.css” /></head><body><ul id¡”nav”> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li></ul></body></html>
­¢¿.
ulnav liststyletype none paddin marin nav alink¨ nav avisited display block width 1p­ paddin 1p­ 1©p­ p­ font bold « Arial¨ elvetica¨ sansserif color ¤¤¢¢ backround url“peppers.if” top left norepeat te­tdecoration none nav ahover backroundposition ©¢p­ color 1 nav aactive backroundposition 1p­ color ©1 Результат обработки данного кода показан на рис. À. однако чтобы увидеть полученный эффект во всей красе попробуйте самостоятельно создать подобный документ и щелкнуть по ссылкеÚ
Обсуждение
Данное решение основано на использовании на панели навигации изо
бражений без необходимости предварительной загрузки множества от
дельных файлов. 120 Глава . Навигация Рис. 4.19. Добавление нового эффекта к готовому меню с помощью изображений
Каждый элемент панели навигации может находиться в одном из трех состояний однако для их отображения вовсе не обязательно использо
вать отдельные изображения. Вместо этого мы будем работать с одним большим изображением включающим в себя графические элементы соответствующие трем разным состояниям как показано на рис. À..
Рис. 4.20. Три состояния элемента навигации
Разметка панели навигации представляет собой простой список:
­¢¿. ­ ©фрагментª
<ul id¡”nav”> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li></ul>
Стили для управления отображением фонового изображения располо
жены в блоке описаний для навигационных ссылок. Поскольку размер изображения превышает размер отведенной для него области понача
лу мы увидим только желтый перец:
Реализация смены изображений на панели навигации без использования ¡¢£¢c¤i¥t
121
­¢¿. ©фрагментª
nav alink¨ nav avisited display block width 1p­ paddin 1p­ 1©p­ p­ font bold « Arial¨ elvetica¨ sansserif color ¤¤¢¢ backround url“peppers.if” top left norepeat te­tdecoration none При активации состояния hover фоновое изображение перемещается вверх ровно на столько пикселов чтобы пользователь увидел рисунок красного перца. В данном примере используется значение пикселов которое может меняться в зависимости от используемого вами изобра
жения. Значение можно вычислить или подобрать на практике каж
дый раз передвигая фоновое изображение на несколько пикселов до тех пор пока не будет найдена оптимальная позиция:
­¢¿. ©фрагментª
nav ahover backroundposition ©¢p­ color 1 При активации состояния active фоновое изображение передвигается вновь и на этот раз при щелчке по ссылке мы видим изображение зе
леного перца:
­¢¿. ©фрагментª
nav aactive backroundposition 1p­ color ©1 Вот и всеÚ Данный эффект может быть испорчен если пользователь увеличит размер шрифта поскольку при этом могут быть видны края скрытых изображений. Не забывайте о возможности возникновения та
кой ситуации – ее можно предотвратить оставив больше пустого про
странства между изображениями.
Предупреждение
Мелькание в Internet Erer При использовании описанного выше приема возможно мелькание элементов навигации в nternet ¡p¢orer По результатам тестирования я пришла к выводу что такой негативный эффект может возник
нуть при использовании изображений большего размера чем в данном приме
ре Если вы столкнулись с такой проблемой то вам поможет подробно описан
ный способ ее решения
®
­­­.¤». ­
122 Глава . Навигация Оформление карты сайта
Карта сайта располагается на отдельной странице и содержит список всех его разделов. Ею можно воспользоваться в том случае когда не по
лучается найти необходимую информацию с помощью навигационно
го меню. Кроме того она представляет собой краткий обзор содержа
ния сайта и дает возможность перехода к заинтересовавшему разделу одним щелчком мыши. Решение
Поскольку карта сайта является списком доступных разделов вашего сайта ее лучше всего разметить как набор вложенных списков. Пун
ктами основного списка станут основные навигационные разделы каждый из пунктов будет содержать подпункты – навигацию второго уровня. Такой метод подойдет и для сайтов с многоуровневой системой навигации благодаря такой разметке новые пункты будет легко созда
вать с помощью системы управления контентом. На рис. À. отобра
жается результат обработки следующего кода:
­¢¿­. ­ ©фрагментª
<ul id¡”sitemap”> <li><a href¡”/about”>About us</a> <ul> <li><a href¡”/about/team”>The team</a></li> <li><a href¡”/about/history”>ur history</a></li> </ul> </li> <li><a href¡”/products”>ur products</a></li> <li><a href¡”/order”>rderin information</a> <ul> <li><a href¡”/order/shops”>ur shops</a></li> <li><a href¡”/order/stockists”>ther stockists</a></li>
<li><a href¡”/order/onlinestockists”>nline stockists</a></li> </ul> </li> <li><a href¡”/contact”>ontact us</a></li></ul>
­¢¿­. ©фрагментª
ulsitemap marin paddin liststyle none ulsitemap ul paddinleft 1em liststyle none Оформление карты сайта
123
ulsitemap li borderbottom p­ solid ¤¤¤¤¤¤ ulsitemap li alink¨ ulsitemap li avisited backroundcolor display block paddin .®em te­tdecoration none color ¤A ulsitemap li ahover backroundcolor ¢¢¢¢¢¢ color ¤¤¤¤¤¤ ulsitemap li li alink¨ ulsitemap li li avisited backroundcolor ¤¤¤¤¤¤ display block paddin .®em ulsitemap li li ahover backroundcolor ¤¤¤¤¤¤ color ¤A Рис. 4.21. Оформленная с помощью ¯ карта сайта
Обсуждение
Вначале карта сайта представлена в виде списка основных элементов на
вигации и вложенных подменю как и в рассмотренном ранее примере 12 Глава . Навигация создания навигации на основе списка. Отличие лишь в том что на кар
те сайта все пункты списка в том числе и подпункты отображаются од
новременно. Если навигация включает большее количество уровней их можно представить по тому же принципу – в виде вложенных списков. Будьте внимательны при работе со вложенными списками. Вложенный список необходимо разместить перед закрывающим тегом </li> роди
тельского списка. Без применения таблицы стилей карта сайта будет выглядеть как на рис. À.. Теперь создаем стили для родительского списка и вложенных списков. Для первого списка я убрала внутренние и внешние отступы а для вложенных списков добавила отступ слева размером в 1em чтобы сразу было видно что они представляют собой следующий уровень навигации:
Рис. 4.22. Вид карты сайта без использования ¯
­¢¿­. ©фрагментª
ulsitemap marin paddin liststyle none ulsitemap ul paddinleft 1em liststyle none Теперь следует создать отличительный стиль пунктов основного спи
ска чтобы подчеркнуть что они представляют основные разделы сай
та. Как и при оформлении навигации я задаю стиль элементу присво
ив значение block свойству display чтобы пользователь для перехода по ссылке мог щелкнуть по всей занимаемой элементом области а не толь
ко по самому тексту:
­¢¿­. ©фрагментª
ulsitemap li borderbottom p­ solid ¤¤¤¤¤¤ Создание выпадающего меню исключительно средствами ­
125
ulsitemap li alink¨ ulsitemap li avisited backroundcolor display block paddin .®em te­tdecoration none color ¤A ulsitemap li ahover backroundcolor ¢¢¢¢¢¢ color ¤¤¤¤¤¤ Данные стили будут применены по отношению к элементам списка по
этому необходимо также задать специальные стили для вложенных ссылок поскольку у них не должно быть серого фона. Поэтому восполь
зуемся более конкретным селектором для выбора этих элементов:
­¢¿­. ©фрагментª
ulsitemap li li alink¨ ulsitemap li li avisited backroundcolor ¤¤¤¤¤¤ display block paddin .®em ulsitemap li li ahover backroundcolor ¤¤¤¤¤¤ color ¤A Вот мы и написали таблицу стилей для оформления карты сайта. На основе представленных приемов вы вполне сможете создать свои соб
ственные стили.
Создание выпадающего меню исключительно средствами SS
В предыдущем издании данной книги был представлен пример созда
ния выпадающего меню только с помощью каскадных таблиц стилей. Я приняла решение не включать его в настоящее издание.
Когда создавался первый вариант данной книги я как и многие веб
разработчики смотрела вперед с надеждой что в будущем с помощью CSS можно будет создавать все что пожелаешь в том числе выпадаю можно будет создавать все что пожелаешь в том числе выпадаю
щие меню и подобные эффекты без использования ˵̵SÍ¢¡ª¨. Более глубокое изучение особенностей перечисленных технологий и поведе
ния пользователей позволило мне прийти к выводу что в данном слу
чае куда эффективнее воспользоваться средствами ˵̵SÍ¢¡ª¨. 126 Глава . Навигация В принципе создать выпадающее меню с помощью CSS вполне возможCSS вполне возмож вполне возмож
но. Однако на практике такое меню гораздо менее доступно по сравне
нию с хорошо продуманным выпадающим меню реализованном с по
мощью ˵̵SÍ¢¡ª¨. По нему можно например перемещаться с помощью клавиатуры а также управлять его видимостью с помощью описания display none так что оно будет скрыто от экранных дикторов и пользо
вателей просматривающих сайт с помощью обычного броузера. Если вы хотите создать выпадающее меню рекомендую вам ознакомиться с отличным меню на сайте ãÛÏÀ которое можно оформить с помощью CSS и которое обеспечивает равные возможности для всех посетителей вашего сайта.
Создание доступного навигационного меню на основе изображений с помощью SS
Метод создания текстовой навигации с помощью CSS обладает массой преимуществ однако в определенных случаях у вас может возникнуть необходимость в использовании изображений для достижения опреде
ленного эффекта или отображения специфического шрифта. При этом необходимо использовать все имеющиеся знания о технологии CSS чтобы использование изображений не породило дополнительных про
блем. Предлагаемое ниже решение сочетает несколько различных при
емов и трюков для создания навигационного меню с помощью изобра
жений.
Решение
Вначале создадим текстовое навигационное меню и затем заменим его на графическое опираясь на одно изображение и CSS. На рис. À. поCSS. На рис. À. по. На рис. À. по
казан результат выполнения следующего кода.
­¢¿Í». ­ ©фрагментª
<ul id¡”nav”>
<li class¡”recipes”><a href¡””><span>ecipes</span></a></li>
<li class¡”contact”><a href¡””><span>ontact s</span></a></li>
<li class¡”articles”><a href¡””><span>Articles</span></a></li>
<li class¡”buy”><a href¡””><span>uy nline</span></a></li></ul>
­¢¿Í». ©фрагментª
ulnav width ©p­ heiht p­ overflowhidden marin ­­.¤¿.
Создание доступного навигационного меню на основе изображений
127
paddin liststyle none ulnav li float left ulnav li a span marinleft p­ ulnav li a backroundimae urlreflectonav.if backroundrepeat norepeat display block width p­ overflowhidden ulnav li.recipes a backroundposition ulnav li.recipes ahover backroundposition ®p­ ulnav li.contact a backroundposition p­ width 1p­ ulnav li.contact ahover backroundposition p­ ®p­ ulnav li.articles a backroundposition 1p­ width p­ ulnav li.articles ahover backroundposition 1p­ ®p­ ulnav li.buy a backroundposition ©p­ width p­ 128 Глава . Навигация ulnav li.buy ahover backroundposition ©p­ ®p­ Рис. 4.23. Конечный вид панели навигации
Обсуждение
Наша цель состоит в создании с помощью изображений навигации до
ступной для текстовых устройств таких как экранные дикторы и поис
ковые системы. Поэтому вначале необходимо создать меню в виде мар
кированного списка. Единственным отличием такого списка от пред
ставленных в предыдущих примерах является элемент span обрамля
ющий текст внутри каждого пункта списка:
­¢¿Í». ­ ©фрагментª
<ul id¡”nav”> <li class¡”recipes”><a href¡””><san>ecipes</san></a></li>
<li class¡”contact”><a href¡””><san>ontact s</san></a></li>
<li class¡”articles”><a href¡””><san>Articles</san></a></li>
<li class¡”buy”><a href¡””><san>uy nline</san></a></li>
</ul>
Пока навигация представляет собой простой структурированный спи
сок. Теперь настало время для создания изображений. Как и в примере с созданием эффекта смены изображений мы будем использовать одно изображение содержащее несколько состояний в данном случае – все пункты навигации и их вид при наведении курсора как показано на рис. À.À.
Рис. 4.24. Фоновое изображение используемое в данном примере
Использование одного изображения избавляет от отправки многократ
ных запросов на сервер а размер файла содержащего одно изображе
ние меньше чем суммарный размер файла при создании меню с по
мощью восьми отдельных картинок. Итак когда у нас есть и список и изображение приступим к написанию таблицы стилей. Прежде все
го следует изменить используемое по умолчанию оформление элемента ul и создать обтекание по левому краю для пунктов списка чтобы они располагались по горизонтали.
Создание доступного навигационного меню на основе изображений
129
Кроме того нужно задать ширину и высоту панели навигации. Эти па
раметры нам хорошо известны поскольку панель состоит из изображе
ний. Указание высоты позволит избежать отображения лишних частей фонового изображения:
­¢¿Í». ©фрагментª
ulnav width ;
heiht ; overlowhidden; marin paddin liststyle none ulnav li float left Теперь нужно скрыть текст от броузеров поддерживающих изображения и CSS. Этого можно достичь путем указания отрицательного внешнего отступа для элементов span внутри пунктов списка чтобы они «уеха ли» за край экрана:
­¢¿Í». ©фрагментª
ulnav li a span marinleft p­ Далее заменим текст фоновым изображением. Создадим для элемента a правило в котором свойству display задано значение block чтобы он занял всю отведенную для li область а затем добавим фоновое изобра
жение:
­¢¿Í». ©фрагментª
ulnav li a display block backroundimae urlreflectonav.if backroundrepeat norepeat width p­ overflowhidden При просмотре полученного на данный момент результата в броузере вы увидите четырехкратное повторение пункта ߣ͡ª£¶. Дело в том что мы задали для каждого пункта списка фоновое изображение распола
гающееся в его верхней части как показано на рис. À..
Для исправления положения необходимо указать различное расположе
ние фонового изображения для каждого пункта навигации. Чаще всего 130 Глава . Навигация его удобнее определить экспериментальным путем передвигая изобра
жение пиксел за пикселом пока не будет достигнута оптимальная по
зиция. В следующем CSSкоде задается позиция фонового изображения для каждой ссылки а на рис. À. показан результат его выполнения.
­¢¿Í». ©фрагментª
ulnav li.recipes a backroundposition ulnav li.contact a backroundposition p­ width 1p­ ulnav li.articles a backroundposition 1p­ width p­ ulnav li.buy a backroundposition ©p­ width p­ Рис. 4.26. Вид навигации после определения позиции фонового изображения
Осталось только добавить стиль для задания вида пункта списка при наведении на него указателя мыши. Это можно сделать таким же спо
собом как и в предыдущем примере со сменой изображений. С помо
щью CSS можно передвигать фоновое изображение чтобы нужная обCSS можно передвигать фоновое изображение чтобы нужная об можно передвигать фоновое изображение чтобы нужная об
ласть появилась в поле зрения:
­¢¿Í». ©фрагментª
ulnav li.recipes ahover backroundposition ®p­ Рис. 4.25. Вид навигации после добавления фонового изображения
Заключение
131
ulnav li.contact ahover backroundposition p­ ®p­ ulnav li.articles ahover backroundposition 1p­ ®p­ ulnav li.buy ahover backroundposition ©p­ ®p­ Заключение
В настоящей главе были рассмотрены различные способы создания на
вигации на основе списков с логической структурой а также приме
ры которые могут послужить отправной точкой для начала собствен
ных экспериментов.
Для уже существующих сайтов полное изменение дизайна которых представляется нецелесообразным создание навигации средствами CSS может существенно улучшить параметры доступности и произ может существенно улучшить параметры доступности и произ
водительности – «малой кровью» и без кардинальных изменений во внешнем виде сайта.
Глава . Табличные данные
Вам наверняка знакома заповедь: «Таблицы предназначены для таб
личных данных а не для описания структуры страницы». Изначаль
но таблицы были созданы для корректного представления табличных данных в λϺдокументах но вскоре их стали широко использовать в иных целях – для разметки всей страницы. В то время любой ува
жающий себя вебдизайнер должен был уметь создавать сложные стра
ницы с помощью вложенных таблиц. Однако объем кода при использо
вании такого метода существенно возрастал а пользователи текстовых устройств и экранных дикторов испытывали массу неудобств. В насто
ящее время для верстки страниц вебстандарты предписывают вместо таблиц использовать каскадные таблицы стилей специально предна
значенные для этих целей. Этот подход обладает гораздо большей гиб
костью в чем мы еще раз убедимся в главе .
Однако не следует считать таблицы чемто абсолютно вредным: их мож
но Áи нужно использовать по их прямому предназначению – для пред
ставления табличных данных. В данной главе будут рассмотрены рас
пространенные методы правильного применения таблиц в том числе примеры использования различных элементов и атрибутов позволяю
щие повысить доступность таблиц. Кроме того будет показано как сде
лать таблицы более привлекательными и удобными в использовании для пользователей просматривающих страницу с помощью обычного вебброузера.
Представление табличных данных с помощью SS
Решение
Говоря вкратце этого вообще не следует делатьÚ Электронные таблицы по определению содержат табличные данные и должны быть представ
лены средствами λϺ. Однако как увидите с помощью CSS их можλϺ. Однако как увидите с помощью CSS их мож. Однако как увидите с помощью CSS их можCSS их мож их мож
Представление табличных данных с помощью ­
133
но сделать привлекательнее. Кроме того не следует пренебрегать во
просами доступности даже если вы используете таблицы именно для отображения табличных данных.
Обсуждение
Табличные данные – данные которые можно отобразить в виде табли
цы и которые можно логически упорядочить по строкам и столбцам.
Хорошим примером таких данных может послужить электронная та
блица содержащая информацию о вашем бюджете. Если перед вами стоит задача представления ежегодного финансового отчета организа
ции для которой вы создаете сайт то в качестве исходных данных за
казчик скорее всего предоставил бы вам таблицу аналогичную пред
ставленной на рис. ..
Рис. 5.1. Отображение данных о бюджете компании в виде табличных данных в формате Ò¦
Вполне очевидно что перед нами табличные данные. Мы видим за
головки столбцов и строк которые определяют данные находящиеся в каждой ячейке. Наша задача – представить эти данные в виде табли
цы с заголовками подтверждающими сохранение логической структу
ры исходной таблицы как показано на рис. ..
Рис. 5.2. И
нформация о бюджете компании в виде Ô¹ºтаблицы
13 Глава ¦. Табличные данные Организация табличных данных удобство доступа и наглядность
Решение
В соответствии со спецификацией λϺ таблицы могут содержать доλϺ таблицы могут содержать до таблицы могут содержать до
полнительные элементы и атрибуты предназначенные не для визуаль
ного оформления а для обеспечения их корректной интерпретации про
граммами вроде экранного диктора которыми пользуются посетители со слабым зрением. Их применение не представляет никаких трудно
стей однако многие вебразработчики упускают их из виду. Рассмотрим следующий пример:
­¢Ì­. ­ ©фрагментª
<table summary¡”This table shows the yearly income for years 1¢¢¢ throuh ”> <caption>early Income 1¢¢¢ </caption> <tr> <th></th> <th scope¡”col”>1¢¢¢</th> <th scope¡”col”></th> <th scope¡”col”>1</th> <th scope¡”col”></th> </tr> <tr> <th scope¡”row”>¬rants</th> <td>11¨¢</td> <td>1¨©</td> <td>¢¨</td> <td>1¨©</td> </tr> <tr> <th scope¡”row”>onations</th> <td>®¨</td> <td>®¨¢¢</td> <td>©¨</td> <td>©¨¢</td> </tr> <tr> <th scope¡”row”>Investments</th> <td>¨</td> <td>¨1</td> <td>¨©</td> <td>¨®¢</td> </tr> <tr> <th scope¡”row”>¤undraisin</th> <td>¨</td> <td>¨1</td> <td>¨</td>
Организация табличных данных удобство доступа и наглядность 135
<td>®¨1</td> </tr> <tr> <th scope¡”row”>ales</th> <td>¨®</td> <td>¨1</td> <td>¨¢</td> <td>¢¨</td> </tr> <tr> <th scope¡”row”>iscellaneous</th> <td>¨1</td> <td>1¨¢</td> <td>1¨</td> <td>1¨©</td> </tr> <tr> <th scope¡”row”>Total</th> <td>¨®©</td> <td>¨¢</td> <td>¨11</td> <td>©¨</td> </tr></table>
Обсуждение
В приведенном выше примере была использована таблица содержащая элементы и атрибуты для четкого описания содержания каждой ячей
ки. Рассмотрим значение всех этих дополнительных элементов и атри
бутов более подробно. Атрибут «½´´ºª¾ элемента º¿¯
­¢Ì­. ­ ©фрагментª
<table summary¡”This table shows the yearly income for years 1¢¢¢ throuh ”>
Значение атрибута summary невидимо для пользователей броузеров но оно будет прочтено экранным диктором. Его следует использовать что
бы дать пользователю представление о содержании и назначении та
блицы. Эта информация не является необходимой для пользователей обычных броузеров поскольку они могут получить ее при просмотре страницы однако она важна для пользователей с ограниченными воз
можностями.
Элемент ¬º¼¡
­¢Ì­. ­ ©фрагментª
<caption>early Income 1¢¢¢ </caption>
136 Глава ¦. Табличные данные Элемент caption добавляет к таблице заголовок. По умолчанию он ото
бражается сверху но его расположение по отношению к таблице можно изменить с помощью CSSсвойства captionside.
table captionside bottom Зачем вообще использовать этот элемент если можно просто разместить рядом с таблицей заголовок или текст абзацаÐ С помощью caption текст связывается с таблицей и далее интерпретируется в качестве ее заго
ловка – экранный диктор не сможет интерпретировать этот текст в ка
честве отдельного элемента. Вы хотите чтобы заголовок отображался как обычный текст абзаца или заголовок третьего уровня в графиче
ском броузереÐ Нет ничего проще – для этого достаточно всего лишь создать соответствующие правила стилей на CSS как вы сделали бы это для любого другого элемента.
Элемент ®
<th scope¡”col”></th>
Элемент th предназначен для обозначения данных используемых в ка
честве заголовка строки или столбца. В приведенном примере он при
меняется по отношению и к тем и другим для более конкретного ука
зания используется атрибут scope тега <th>. Он может принимать значе
ние col Áколонка столбец или row Áряд строка в зависимости от того к чему относится.
Перед тем как начать оформление вида таблиц в соответствии с общим дизайном сайта рекомендуется вначале обеспечить их доступность для пользователей таких устройств как экранные дикторы. Доступ
ность относится к тем вопросам решение которых большинство разра
ботчиков откладывают на потом говоря: «Сначала разберусь с дизай
ном а потом возьмусь за это». Однако если контроль за доступностью оставляют на конец всей разработки то может случиться что к нему и вовсе не возвращаются а если и возвращаются то для исправления возникающих проблем чаще всего требуется значительное количество времени особенно в сложных приложениях. Если вы возьмете за пра
вило продумывать эти аспекты непосредственно в процессе разработки сайта то вскоре обнаружите что это стало вашей второй натурой лишь незначительно увеличив время работы над проектом.
CSSатрибуты позволяют оформить таблицу быстро и просто. К приатрибуты позволяют оформить таблицу быстро и просто. К при
меру в самом начале разработки сайта в котором будет много таблиц я создаю правило стиля с селектором класса .datatable которое будет содержать основные описания стилей для всех таблиц и которое можно с легкостью добавить к тегу <table> каждого из них. Затем я создаю пра
вила стиля для .datatable th Áячеек с заголовком .datatable td Áобыч
ных ячеек и .datatable caption Áзаголовков таблицыÂ.
Создание рамки вокруг таблицы без использования H¨©ª«атрибута ¬®¤¯e¤
137
Такой подход значительно облегчает добавление новых таблиц. По
скольку все стили уже имеются достаточно всего лишь применить по отношению к таблице класс .datatable. Если в дальнейшем потребует
ся изменить вид таблиц на сайте достаточно отредактировать каскад
ную таблицу стилей.
Создание рамки вокруг таблицы без использования ÀÁÂÃ-атрибута ¿ª°ª
С помощью λϺатрибута можно создать лишь стандартную невыраλϺатрибута можно создать лишь стандартную невыраатрибута можно создать лишь стандартную невыра
зительную рамку поэтому использовать его не рекомендуется. Вместо этого можно воспользоваться средствами CSS – это дает гораздо больCSS – это дает гораздо боль – это дает гораздо боль
шую свободу выбора визуального оформления. Следующий код задает рамку для таблицы:
­¢Ì­. ©фрагментª
.datatable border 1p­ solid A© Применение данного правила стиля создает вокруг таблицы светло
голубую рамку толщиной в один пиксел как показано на рис. ..
Рис. 5.3. Добавление рамки для таблицы в целом с помощью ¯
Можно также определить рамки для индивидуальных ячеек:
­¢Ì­. ©фрагментª
.datatable td¨ .datatable th border 1p­ solid ® Применение данного правила стиля приводит к отображению чуть бо
лее светлой рамки вокруг ячеек td и th класса datatable как показано на рис. .À.
138 Глава ¦. Табличные данные Рис. 5.4. Добавление рамки для отдельных ячеек с помощью ¯
Обсуждение
Экспериментируя с различными значениями CSSсвойств задающих параметры табличных рамок можно добиться множества притягива
ющих внимание визуальных эффектов пусть даже таблица содержит совершенно прозаические данныеÚ Можно использовать рамки разных цветов для ячеек с заголовками и обычных ячеек а также изменять толщину и вид рамки ячеек. При желании можно использовать для верхней и левой частей рамки один оттенок цвета а для нижней и пра
вой – другой.
Свойство borderstyle может принимать множество различных значе
ний. Мы уже знакомы со значением solid используемым для отображе
ния сплошной рамки это и другие значения и результат их обработки показан в табл. ..
Таблица Ì.¡. Значения ¯свойства ¤­
double roove inset
outset ride solid
dashed dotted
a
none / hidden
µ
§¨£¢§£¨ ©¦ª«¥¢£¢ ведет себя немного странно: при задании значения dotted для рамки толщиной в один пиксел она будет отображаться как dashed.
Удаление пустого пространства между ячейками после добавления рамок
139
У
даление пустого пространства между ячейками¤ появляющегося после добавления рамок
Вы наверняка когданибудь пытались удалить пустое пространство меж
ду ячейками с помощью атрибута cellspacin¡”” элемента table. Однако в результате получалась рамка толщиной в два пиксела поскольку рам
ки соприкасаются но не перекрывают друг друга. Ниже приводится ме
тод создания аккуратной однопиксельной рамки вокруг ячеек.
Решение
Пустое пространство между ячейками можно убрать путем присвоения значения collapse свойству bordercollapse:
­¢Ì­.
.datatable border 1p­ solid A© bordercollapse collapse .datatable td¨ .datatable th border 1p­ solid ® На рис. .À. показана таблица до применения свойства bordercollapse на рис. . отображается эффект применения данного свойства.
Рис. 5.5. Перекрытие рамок таблицы
Представление табличных данных в привлекательной и удобной форме
Для структурирования табличных данных лучше всего использовать λϺ несмотря на то что по умолчанию такие таблицы выглядят не 10 Глава ¦. Табличные данные слишком привлекательно. К счастью вид таблицы можно изменить с помощью CSS что почти не увеличивает объем разметки и позволяет в дальнейшем управлять отображением табличных данных из таблицы стилей.
Рис. 5.6. Неотформатированные табличные данные выглядят не слишком привлекательно
Представленные ранее в настоящей главе с помощью λϺтаблицы данные могут послужить примером табличных данных. В основу сле
дующего примера легла разметка обработка которой в броузере пока
зана на рис. ..
Применим к этой таблице такую таблицу стилей:
­¢Ì¤ ­.
body font .em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif .datatable border 1p­ solid ©© bordercollapse collapse .datatable td¨ .datatable th border 1p­ solid ©© te­talin riht paddin .em .datatable th border 1p­ solid backroundcolor fontweiht bold te­talin left paddin .em Представление табличных данных в привлекательной и удобной форме
11
.datatable caption font bold 1« “Times ew oman”¨ Times¨ serif backroundcolor ® color 1A paddin .®em .em border 1p­ solid ¢A© На рис. . показан результат. Надо сказать получилось вполне симпа
тичноÚ
Рис. 5.7. Благодаря ¯ таблица выглядит более привлекательно
Обсуждение
В данном случае я поставила перед собой цель максимально прибли
зить вид таблицы к виду стандартной электронной таблицы ©¦Í£«. Пре©¦Í£«. Пре. Пре
жде всего было создано базовое правило для элемента body. Подобные правила скорее всего станут частью большинства каскадных таблиц стилей для сайтов создаваемых на основе CSS:
­¢Ì¤ ­. ©фрагментª
body font .em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif Затем зададим стиль для таблицы в целом:
­¢Ì¤ ­. ©фрагментª
.datatable border 1p­ solid ©© bordercollapse collapse Как мы уже видели свойство border позволяет задать параметры рамки вокруг таблицы а свойство bordercollapse удаляет пустое пространство между ее ячейками.
12 Глава ¦. Табличные данные Затем обратимся к ячейкам таблицы:
­¢Ì¤ ­. ©фрагментª
.datatable td border 1p­ solid ©© te­talin riht paddin .em
Здесь я добавила рамку для ячеек таблицы и выровняла их содержимое по правой стороне с помощью свойства te­talin чтобы она больше по
ходила на электронную таблицу. На данный момент при просмотре до
кумента вы увидите рамку вокруг всех ячеек кроме тех что содержат заголовки как показано на рис. ..
Рис. 5.8. Применение свойства ¤ по отношению к элементам ­ и ­¤ Затем была добавлена рамка и цвет фона для ячеек с заголовками. Я ис
пользовала более темный цвет для рамки поскольку их фон также тем
нее фона обычных ячеек что позволяет выделить заголовки:
­¢Ì¤ ­. ©фрагментª
.datatable th border 1p­ solid backroundcolor fontweiht bold te­talin left paddin .em В завершение зададим стиль для элемента caption чтобы он выглядел частью таблицы. ­¢Ì¤ ­. ©фрагментª
.datatable caption font bold .¢em “Times ew oman”¨ Times¨ serif backroundcolor ® Чередование фонового цвета строк таблицы
13
color 1A paddin .®em .em border 1p­ solid ¢A© Чередование фонового цвета строк таблицы
Решение
При просмотре таблицы с большим количеством данных бывает трудно удержать взгляд на конкретной строке. Чтобы помочь пользователям сориентироваться можно использовать два различных фоновых цвета поочередно. Неважно добавляете ли вы ряды таблицы вручную или же отображаете данные из базы данных – для создания описанного эф
фекта можно использовать классы CSS.
Ниже представлена необходимая разметка:
­¢Ì­­. ­ ©фрагментª
<table summary¡”ist of new students ” class¡”datatable”> <caption>tudent ist</caption> <tr> <th scope¡”col”>tudent ame</th> <th scope¡”col”>ate of irth</th> <th scope¡”col”>lass</th> <th scope¡”col”>I</th> </tr> <tr> <td>Òoe los</td> <td>//1¢¢</td> <td>rs Òones</td> <td>1¢</td> </tr> <tr class¡”altrow”> <td>illiam mith</td> <td>//1¢¢</td> <td>rs Òones</td> <td>11</td> </tr> <tr> <td>Òane Toad</td> <td>1//1¢¢</td> <td>rs Òones</td> <td>1</td> </tr> <tr class¡”altrow”> <td>Amanda illiams</td> <td>1¢//1¢¢</td> <td>rs dwards</td> <td>11</td>
1 Глава ¦. Табличные данные </tr> <tr> <td>Óylie Òameson</td> <td>1//1¢¢</td> <td>rs Òones</td> <td>1</td> </tr> <tr class¡”altrow”> <td>ouise mith</td> <td>1//1¢¢</td> <td>rs dwards</td> <td>11¢</td> </tr> <tr> <td>Òames Òones</td> <td>®/®/1¢¢</td> <td>rs dwards</td> <td>1</td> </tr></table>
А ниже представлена связанная с ним таблица стилей:
­¢Ì­­. ©фрагментª
body font .em Arial¨ elvetica¨ sansserif .datatable border 1p­ solid ©© bordercollapse collapse width « .datatable td border 1p­ solid ©© paddin .em .datatable th border 1p­ solid backroundcolor fontweiht bold te­talin left paddinleft .em .datatable caption font bold 11« Arial¨ elvetica¨ sansserif color 1A te­talin left paddin .®em .em Чередование фонового цвета строк таблицы
15
.datatable tr.altrow backroundcolor ¤¤ color Результат обработки данного кода показан на рис. ..
Рис. 5.9. Чередование различного цвета фона для облегчения ориентирования в больших таблицах
Обсуждение
Каждая вторая строка в приведенной выше таблице относится к классу altrow:
­¢Ì­­. ­ ©фрагментª
<tr class¡”altrow”>
Если вы прочли предыдущие решения в этой главе то использованные в CSSкоде свойства должны быть вам хорошо знакомы. Кроме того я добавила следующий класс:
­¢Ì­­. ©фрагментª
.datatable tr.altrow backroundcolor ¤¤ color Эти стили будут применены ко всем элементам tr класса altrow находя
щимся внутри таблицы класса datatable.
Если вы формируете таблицу динамически с помощью °S¸ ¸Î¸ или иной подобной технологии извлекающей данные из базы данных то для чередования фонового цвета придется приписывать данный класс каждому второму отображаемому ряду.
16 Глава ¦. Табличные данные Взгляд в будущее
Добавлять имя класса для каждого второго ряда довольно утомительно и вы не ошиблись если задумались о наличии альтернативного реше
ния той же самой задачи. Эффекта чередования можно достичь исклю
чительно средствами CSS. Надо отметить что этот метод гораздо эффек
тивнее. Воспользовавшись селектором псевдокласса CSS :¡±±¢ можно выбрать все четные или нечетные ряды таблицы ничего не ме
няя в λϺразметке. Наступят времена когда все броузеры будут под
держивать этот псевдокласс и жизнь разработчиков на CSS станет го
раздо проще. Понять механизм функционирования этого псевдоклас
са достаточно сложно поэтому рекомендую вам обратиться к справоч
ной документации CSS ߣ¤£¢£§Í£ в которой он прекрасно представлен.
С помощью данного селектора псевдокласса можно выбирать элементы в зависимости от количества предшествующих ему элементов того же уровня.
Вернемся к изначальному коду таблицы до добавления имени класса для рядов. Можно обратиться ко всем четным рядам таблицы с помо
щью следующего CSSкода:
.datatable trnth child2n backroundcolor ¤¤ color Для обращения ко всем нечетным рядам можно использовать следую
щий CSSкод:
.datatable trnth child2n1 backroundcolor ¤¤ color Содержащиеся в данном селекторе числовые выражения могут пока
заться замысловатыми но к счастью разработчикам настолько часто приходится выполнять подобную задачу что в спецификации CSS был описан более простой синтаксис. Вместо числовых выражений в скоб
ках можно использовать ключевые слова:
.datatable trnthchildeven Á.datatable trnthchildodd Á
На момент написания данной книги эти примеры обрабатывались по
следними версиями 䪣¢µ и Sµ¤µ¢¡ но пока данный псевдокласс не по䪣¢µ и Sµ¤µ¢¡ но пока данный псевдокласс не по и Sµ¤µ¢¡ но пока данный псевдокласс не поSµ¤µ¢¡ но пока данный псевдокласс не по но пока данный псевдокласс не по
­­£.­­.¤­¤­ ¤¦
Изменение фонового цвета строки при наведении на нее указателя мыши
17
лучит широкую поддержку во многих броузерах использовать такой прием рано.
Совет
Обеспечение поддержки с помощью ¥¦¦§rt ½ava¯criptбиблиотека ¾¿Àery поддерживает селекторы C¯¯¸
®
поэтому ее можно использовать для че
редования фонового цвета ячеек таблицы Для создания описанного эффекта выполняющего эстетическую функцию можно использовать ½ava¯criptÁ при этом не нужно добавлять имена классов элементам разметки
Изменение фонового цвета строки при наведении на нее указателя мыши
Решение
Чтобы таблицу было легче воспринимать можно изменять цвет строки при наведении на нее указателя мыши – это выделит содержимое. Та
кой эффект показан на рис. ..
Рис. 5.10. Выделение строки при наведении на нее указателя мыши
Реализовать его достаточно просто для этого достаточно добавить в та
блицу стилей следующее правило:
­¢Ì­­. ©фрагментª
.datatable trhover backroundcolor ¤¤ color ГотовоÚ
­­¤.ÁÕ.­
18 Глава ¦. Табличные данные Обсуждение
Такой документ будет корректно отображаться во всех современных броузерах в том числе и §¨£¢§£¨ ©¦ª«¥¢£¢ но за исключением §¨£¢§£¨ ©¦ª«¥¢£¢ . Однако если данные в таблице представлены логично и все понятно и без фонового выделения то такой эффект можно считать при
ятным дополнением но не обязательным – без которого нельзя было бы пользоваться сайтом.
Если по какимлибо причинам вам непременно нужно реализовать дан
ную функцию для пользователей §¨£¢§£¨ ©¦ª«¥¢£¢ можно добавить простой сценарий на ˵̵SÍ¢¡ª¨. Для изменения фонового цвета ряда таблицы при наведении на него указателя мыши в §¨£¢§£¨ ©¦ª«¥¢£¢ нужно задать необходимые свойства для CSSкласса Áв этом примере я назову его hiliteÂ.
­¢Ì ­. ©фрагментª
.datatable trhover¨ datatable trhilite backroundcolor ¤¤ color После таблицы добавьте на страницу следующий код на ˵̵SÍ¢¡ª¨:
­¢Ì ­. ­ ©фрагментª
<script type¡”te­t/¦avascript”>var rows ¡ document.etlementsyTaame‘tr’ for var i ¡ i < rows.lenth iÕÕ rowsÌiÎ.onmouseover ¡ function this.classame Õ¡ ‘ hilite’ rowsÌiÎ.onmouseout ¡ function this.classame ¡ this.classame.replace‘hilite’¨ ‘’ </script>
В данном сценарии осуществляется поиск всех тегов <tr> в документе и присвоение каждому из них обработчика событий mouseover и mouseout. Они присваивают рядам CSSкласс hilite при наведении на него указа
теля мыши и удаляют его при его смещении в другую область. Как вид
но на рис. . такое сочетание CSS и ˵̵SÍ¢¡ª¨ приводит к желаемоCSS и ˵̵SÍ¢¡ª¨ приводит к желаемо и ˵̵SÍ¢¡ª¨ приводит к желаемо˵̵SÍ¢¡ª¨ приводит к желаемо приводит к желаемо
му результату.
Рассматриваемый сценарий на ˵̵SÍ¢¡ª¨ динамически задает CSSкласс для тега. В данном случае мы добавляем класс hilite в тег <tr> по собы
тию mouseover для чего используется свойство onmouseover:
­¢Ì ­. ­ ©фрагментª
rowsÌiÎ.onmouseover ¡ function this.classame Õ¡ ‘ hilite’ Изменение фонового цвета строки при наведении на нее указателя мыши
19
Рис. 5.11. Выделение ряда в Ñ­­ Ò¦ Ã с помощью Ö»­
После наступления события mouseout мы удаляем класс:
­¢Ì ­. ­ ©фрагментª
rowsÌiÎ.onmouseout ¡ function this.classame ¡ this.classame.replace‘hilite’¨ ‘’ Изменяя имя класса элементов в ответ на действия пользователя с по
мощью ˵̵SÍ¢¡ª¨ можно добиться разнообразных привлекательных и ненавязчивых эффектов. Этот прием можно применить например для выделения определенной области путем изменения имени класса соответствующего элемента div по событию mouseover.
Примечание
Ненавязчивый ¥¦¦§rt Вы наверняка заметили что код на ½ava¯cript был добавлен не к самой таблицеÁ весь сценарий был размещен только внутри эле
мента script Такой прием называется ненавязчивым ¥¦¦§rtÁ его смысл состоит в разделении документа и сценариев подобно тому как мы размеща
ем раздельно разметку и каскадную таблицу стилей
Сценарий на ½ava¯cript должен быть запущен после загрузки таблицы по½ava¯cript должен быть запущен после загрузки таблицы по должен быть запущен после загрузки таблицы по
скольку до этого отсутствует сам объект по отношению к которому сценарий должен выполняться В качестве варианта можно написать функцию которая будет выполняться по окончании загрузки страницыÁ в этом случае код на ½a½a
va¯cript можно хранить в отдельном файле указав ссылку на него в коде стра можно хранить в отдельном файле указав ссылку на него в коде стра
ницы Кроме того чтобы сценарий загружался только при открытии страницы в броузере nternet ¡p¢orer £ можно использовать условные комментарии Подробнее об этом мы поговорим в разделе «Определение различных стилей для nternet ¡p¢orer £ и ¹» главы ¹
Как и в предыдущем примере в данном случае на помощь может прийти ис
пользование различных библиотек таких как ¾¿Àery которые как нельзя кста¾¿Àery которые как нельзя кста которые как нельзя кста
ти когда поддержка тех или иных свойств в старых броузерах отсутствует
150 Глава ¦. Табличные данные Чередование фонового цвета столбцов таблицы
Чередование фонового цвета строк встречается гораздо чаще чем чере
дование цвета столбцов. Однако этот прием достаточно эффективен для выделения группы данных.
Решение
Для описания колонок таблицы мы воспользуемся элементом col. При этом можно задать для них фоновый цвет с помощью CSS. В следующей разметке видны добавленные для каждого столбца элементы col каж
дому из которых присвоено имя класса Áкак и в примере с изменением фонового цвета строк в разделе «Чередование фонового цвета строк та
блицы»Â.
­¢Ì. ­ ©фрагментª
<table class¡”datatable”> <col class¡”odd” /> <col class¡”even” /> <col class¡”odd” /> <col class¡”even” /> <tr> <th>ool A</th> <th>ool </th> <th>ool </th> <th>ool </th> </tr> <tr> <td>nland</td> <td>Australia</td> <td>ew Öealand</td> <td>¤rance</td> </tr> <tr class¡”even”> <td>outh Africa</td> <td>ales</td> <td>cotland</td> <td>Ireland</td> </tr> <tr> <td>amoa</td> <td>¤i¦i</td> <td>Italy</td> <td>Arentina</td> </tr> <tr class¡”even”> <td>A</td>
Чередование фонового цвета столбцов таблицы
151
<td>anada</td> <td>omania</td> <td>urope </td> </tr> <tr> <td>epechae </td> <td>Asia</td> <td>epechae 1</td> <td>amibia</td> </tr></table>
Классам присвоенным элементам col можно задать определенные пра
вила стилей как показано ниже результат обработки данного кода по
казан на рис. ..
­¢Ì. ©фрагментª
body font .em Arial¨ elvetica¨ sansserif .datatable border 1p­ solid ©© bordercollapse collapse width « .datatable col.odd backroundcolor ¢¤¤ color .datatable col.even backroundcolor ¤®¤¤ color .datatable td borderp­ solid ffffff paddin .em .datatable th borderp­ solid ffffff backroundcolor ® color ¤¤¤¤¤¤ fontweiht bold te­talin left paddin .em 152 Глава ¦. Табличные данные Рис. 5.12. Чередование фонового цвета столбцов путем задания стилей для элемента Обсуждение
С помощью элемента col можно более гибко задавать стили для столбцов таблицы чтобы они отличались визуально и пользователю было удоб
нее воспринимать содержащиеся в них данные. Если элементы col явля
ются дочерними по отношению к элементу colroup то для управления внешним видом столбцов можно применить правила стилей по отноше
нию к нему. При отсутствии элемента colroup броузер считает что в та
блице только одна группа столбцов содержащая все элементы col.
Ниже представлен пример вложенных элементов col:
­¢Ì. ­ ©фрагментª
<table class¡”datatable”><colroup class¡”odd”> <col /> <col /></colroup><colroup class¡”even”> <col /> <col /></colroup>…
Ниже представлены правила стилей применяемые по отношению к элементу colroup а не col:
­¢Ì. ©фрагментª
.datatable colroup.odd backroundcolor ¢¤¤ color .datatable colroup.even backroundcolor ¤®¤¤ color Создание календаря с помощью ­
153
В результате получим таблицу с двумя колонками одного цвета и двумя колонками другого цвета что показано на рис. ..
Рис. 5.13. Задание вида таблицы при использовании Создание календаря с помощью SS
Календари также содержат табличные данные. Пример календаря взятый из настольного приложения показан на рис. .À. В качестве заголовков столбцов выступают расположенные сверху названия дней недели. Поэтому для создания календарей целесообразно использовать таблицы при этом объем λϺкода можно свести к минимуму приλϺкода можно свести к минимуму прикода можно свести к минимуму при
менив CSS для задания внешнего вида календаря.
Рис. 5.14. Календарь из настольного приложения
15 Глава ¦. Табличные данные Решение
Решение основано на использовании простой и доступной таблицы ко
торая средствами CSS преображается в привлекательный календарь изображенный на рис. .. Учитывая его несложную структуру он идеально подходит для приложения связанного с базой данных в ко
тором таблица создается кодом на стороне сервера:
­¢Ì. ­ ©фрагментª
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>alendar</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /><link rel¡”stylesheet” type¡”te­t/css” href¡”cal.css” /></head><body><table class¡”clmonth” summary¡”alendar for Òune ¢”><caption>Òune ¢</caption><tr> <th scope¡”col”>onday</th> <th scope¡”col”>Tuesday</th> <th scope¡”col”>ednesday</th> <th scope¡”col”>Thursday</th> <th scope¡”col”>¤riday</th> <th scope¡”col”>aturday</th> <th scope¡”col”>unday</th></tr><tr> <td class¡”previous”>1</td> <td class¡”active”>1 <ul> <li>ew pupils’ open day</li> <li>ear theater trip</li> </ul></td> <td></td> <td></td> <td>®</td> <td></td> <td>©</td></tr><tr> <td class¡”active”> <ul> <li>ear nlish e­am</li> </ul></td> <td></td>
Создание календаря с помощью ­
155
<td>¢</td> <td>1</td> <td>11</td> <td>1</td> <td>1</td></tr><tr> <td>1®</td> <td>1</td> <td>1©</td> <td class¡”active”>1 <ul> <li>ports ay</li> </ul></td> <td class¡”active”>1 <ul> <li>ear parents’ evenin</li> <li>ri¥eivin</li> </ul></td> <td>1¢</td> <td></td></tr><tr> <td>1</td> <td></td> <td></td> <td class¡”active”>® <ul> <li>ear parents’ evenin</li> </ul></td> <td></td> <td>©</td> <td></td></tr><tr> <td></td> <td>¢</td> <td class¡”active”> <ul> <li>¤irst niht of school play</li> </ul></td> <td class¡”ne­t”>1</td> <td class¡”ne­t”></td> <td class¡”ne­t”></td> <td class¡”ne­t”>®</td></tr></table></body></html>
156 Глава ¦. Табличные данные ­¢Ì.
body backroundcolor ¤¤¤¤¤¤ color fontsi¥e ¢« .clmonth bordercollapse collapse width p­ .clmonth caption te­talin left font bold 11« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom .®em .clmonth th border 1p­ solid AAAAAA borderbottom none paddin .em .©em .em .©em backroundcolor color ¤¤¤ font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif width 11p­ .clmonth td border 1p­ solid AAA font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif paddin .em .©em .em .©em verticalalin top .clmonth td.previous¨ .clmonth td.ne­t backroundcolor ¤©¤©¤© color ©©© .clmonth td.active backroundcolor 11 color border p­ solid ®©® .clmonth ul liststyletype none marin paddinleft 1em paddinriht .©em .clmonth li marinbottom 1em Создание календаря с помощью ­
157
Рис. 5.15. Окончательный вид календаря оформленного с помощью ¯
Обсуждение
Решение поставленной задачи начнем с создания самой простой таб
лицы. У нее есть заголовок Áтекущий месяц а названия дней недели выступают в качестве заголовков колонок определенных с помощью тега <th>:
­¢Ì. ­ ©фрагментª
<table class¡”clmonth” summary¡”alendar for Òune ¢”> <caption>Òune ¢</caption> <tr> <th scope¡”col”>onday</th> <th scope¡”col”>Tuesday</th> <th scope¡”col”>ednesday</th> <th scope¡”col”>Thursday</th> <th scope¡”col”>¤riday</th> <th scope¡”col”>aturday</th> <th scope¡”col”>unday</th></tr>
Таблице присвоено имя класса clmonth. Использование класса вместо I объясняется тем что в некоторых случаях может возникнуть необ
ходимость отображения сразу нескольких месяцев на одной странице. Если потом выяснится что таблице необходимо присвоить I – напри
мер для создания функции скрытия и отображения страницы с помо
щью ˵̵SÍ¢¡ª¨ – то можно кроме класса добавить и идентификатор.
Числа содержатся в отдельных ячейках а мероприятия представлены в виде списка в соответствующей ячейке.
158 Глава ¦. Табличные данные В приведенной ниже разметке видно что двум ячейкам таблицы добав
лены классы. Класс previous отмечает ячейки содержащие дни которые относятся к предыдущему месяцу Áдля выделения дней относящихся к следующему месяцу будет использоваться класс ne­t ячейкам со
держащим информацию о событиях присваивается класс active:
­¢Ì. ­ ©фрагментª
<tr> <td class¡”previous”>1</td> <td class¡”active”>1 <ul> <li>ew pupils’ open day</li> <li>ear theater trip</li> </ul></td> <td></td> <td></td> <td>®</td> <td></td> <td>©</td></tr>
Вид таблицы без использования CSS представлен на рис. ..
Рис. 5.16. Вид календаря без использования ¯
Итак разметка готова и можно приступить к визуальному оформле
нию. Зададим основные стили для элемента body в том числе и пара
метры шрифта. Затем зададим стиль для класса clmonth чтобы рамки перекрывали друг друга и между ячейками не оставалось пустого про
странства а также укажем ширину таблицы:
Создание календаря с помощью ­
159
­¢Ì. ©фрагментª
body backroundcolor ¤¤¤¤¤¤ color fontsi¥e ¢« .clmonth bordercollapse collapse width p­ Мы указали стили для элемента caption являющегося дочерним по от
ношению к элементу класса clmonth а затем для заголовков Áth и ячеек Átd таблицы:
­¢Ì. ©фрагментª
.clmonth caption te­talin left font bold 11« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom .®em .clmonth th border 1p­ solid AAAAAA borderbottom none paddin .em .©em .em .©em backroundcolor color ¤¤¤ font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif width 11p­ .clmonth td border 1p­ solid AAA font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif paddin .em .©em .em .©em verticalalin top Как видно на рис. . наш календарь начинает приобретать определен
ные визуальные черты.
Теперь можно задать оформление для списков событий расположен
ных внутри ячеек удалив маркеры и добавив больше пустого простран
ства между пунктами списка:
­¢Ì. ©фрагментª
.clmonth ul liststyletype none marin paddinleft 1em paddinriht .©em 160 Глава ¦. Табличные данные .clmonth li marinbottom 1em Наконец добавим стили классов previous и ne­t чтобы не относящиеся к текущему месяцу дни отображались в оттенках серого. Кроме того зададим стиль для класса active используемого для выделения дней с событиями:
­¢Ì. ©фрагментª
.clmonth td.previous¨ .clmonth td.ne­t backroundcolor ¤©¤©¤© color ©©© .clmonth td.active backroundcolor 11 color border p­ solid ®©® Мы рассмотрели лишь один из немногих способов создания календа
рей. Календари часто используют в блогах: при щелчке по числу можно перейти к сделанной в этот день записи. Если убрать из нашего λϺ
кода все события оставить только первые буквы названий дней недели Рис. 5.17. Благодаря новому оформлению элементов ­ ­ и ­¤ календарь выглядит привлекательнее
Создание календаря с помощью ­
161
и слегка изменить CSSкод мы получим простой миниатюрный каленCSSкод мы получим простой миниатюрный каленкод мы получим простой миниатюрный кален
дарь который вполне можно использовать в этих целях Áрис. .Â.
Рис. 5.18. Создание миниатюрного календаря
Ниже представлены λϺ и CSSкоды этой версии календаря:
­¢ÌÍ. ­ ©фрагментª
<table class¡”clmonth” summary¡”alendar for Òune ¢”> <caption>Òune ¢</caption> <tr> <th scope¡”col”></th> <th scope¡”col”>T</th> <th scope¡”col”></th> <th scope¡”col”>T</th> <th scope¡”col”>¤</th> <th scope¡”col”></th> <th scope¡”col”></th> </tr> <tr> <td class¡”previous”>1</td> <td class¡”active”>1</td> <td></td> <td></td> <td>®</td> <td></td> <td>©</td> </tr> <tr> <td class¡”active”></td> <td></td> <td>¢</td> <td>1</td> <td>11</td> <td>1</td> <td>1</td> </tr> <tr> <td>1®</td>
162 Глава ¦. Табличные данные <td>1</td> <td>1©</td> <td class¡”active”>1</td> <td class¡”active”>1</td> <td>1¢</td> <td></td> </tr> <tr> <td>1</td> <td></td> <td></td> <td class¡”active”>®</td> <td></td> <td>©</td> <td></td> </tr> <tr> <td></td> <td>¢</td> <td class¡”active”></td> <td class¡”ne­t”>1</td> <td class¡”ne­t”></td> <td class¡”ne­t”></td> <td class¡”ne­t”>®</td> </tr></table>
­¢ÌÍ.
body backroundcolor ¤¤¤¤¤¤ color fontsi¥e ¢« .clmonth bordercollapse collapse .clmonth caption te­talin left font bold 11« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom .®em .clmonth th border 1p­ solid AAAAAA borderbottom none paddin .em .®em .em .®em backroundcolor color ¤¤¤ font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif .clmonth td border 1p­ solid AAA Заключение
163
font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif paddin .em .®em .em .®em verticalalin top .clmonth td.previous¨ .clmonth td.ne­t backroundcolor ¤©¤©¤© color ©©© .clmonth td.active backroundcolor 11 color border p­ solid ®©® Заключение
В данной главе мы увидели что таблицы живыздоровы и еще не раз сослужат нам хорошую службу если их правильно использовать – для представления табличных данных конечноÚ С помощью CSS можно превратить обычные таблицы в весьма привлекательные элементы ин
терфейса доступные для альтернативных устройств. Поэтому примите таблицы такими какие они есть и пусть они выполняют свою привыч
ную работу по представлению табличных данныхÚ
Глава . Формы и пользовательские интерфейсы
Формы являются неотъемлемой частью практически любого сайта. Они используются для передачи персональных данных от пользовате
лей для написания сообщений на форумах добавления товаров в кор
зину обновления блогов – и это только начало перечняÚ
Формы получили широкое распространение в вебсреде однако не
смотря на это λϺ по сути не дает разработчику никаких возможλϺ по сути не дает разработчику никаких возмож по сути не дает разработчику никаких возмож
ностей выбора визуального оформления поэтому формы как правило отображаются в соответствии с внутренней таблицей стилей броузера. Появление CSS принесло с собой множество способов адресации к элеCSS принесло с собой множество способов адресации к эле принесло с собой множество способов адресации к эле
ментам форм и в данной главе мы увидим для каких из них можно задать собственные стили и зачем это может понадобиться. Кроме того мы рассмотрим несколько нечасто используемых λϺтегов и атриλϺтегов и атритегов и атри
бутов форм которые позволят повысить доступность и юзабилити на
ших форм они также могут послужить дополнительными элементами по отношению к которым можно применять CSSстили.
На протяжении следующих нескольких страниц мы рассмотрим раз
личные методы создания форм – как с помощью таблиц так и путем позиционирования элементов средствами CSS. По поводу целесообразCSS. По поводу целесообраз. По поводу целесообраз
ности разметки форм с помощью таблицы ведутся оживленные дис
куссии моя точка зрения по этому вопросу состоит в следующем: если форма по сути представляет собой таблицу Áкак в примере с электрон
ной таблицей который вы найдете в этой главе то ее структуру вполне естественно было бы отобразить с помощью таблицы. В противном слу
чае ваша форма скорее всего будет более доступна для всех категорий пользователей и для альтернативных устройств если она создана сред
ствами CSS.
При работе с формами крайне важно помнить о проблемах юзабилити. Формы предназначены для того чтобы пользователь мог ввести с их Изменение вида элементов формы с помощью ­
165
помощью какиелибо данные но если ему непонятно как ими пользо
ваться они будут совершенно бесполезными пусть и очень красивыми. В большинстве случаев я советую не увлекаться чрезмерным украша
тельством форм поскольку это может привести посетителей сайта в за
мешательство. Кроме того учтите что различные броузеры обладают разными возможностями управления внешним видом элементов форм поэтому обязательно тестируйте написанный CSSкод в как можно большем количестве броузеров под различными платформами. Изменение вида элементов формы с помощью SS
Без применения каскадных таблиц стилей элементы формы будут ото
бражены в соответствии с используемыми броузером и операционной системой настройками по умолчанию. Однако использование CSS по
зволяет создать формы соответствующие дизайну вашего сайта.
Решение
Стиль элемента формы как и любого другого λϺэлемента можно задать с помощью CSS.
Рис. 6.1. Вид формы по умолчанию в броузере £
Изображенная на рис. . форма оформлена в соответствии с настрой
ками по умолчанию используемыми броузером Sµ¤µ¢¡ под ÏµÍ äS Ç. Ее вид будет изменяться при просмотре в различных броузерах под разны
ми платформами. Ниже представлена типичная форма:
166 Глава °. Формы и пользовательские интерфейсы ­¢Ã­. ­ ©фрагментª
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head> <title> styled form elements</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”elements.css” /></head><body> <form method¡”post” action¡”e­ample1.html” id¡”form1”> <div><label for¡”name”>hat is your name×</label><br/> <input type¡”te­t” name¡”name” id¡”name” /></div>
<div><label for¡”color”>elect your favorite color</label> <select name¡”color” id¡”color”> <option value¡”blue”>blue</option> <option value¡”red”>red</option> <option value¡”reen”>reen</option> <option value¡”yellow”>yellow</option> </select> </div>
<div><label for¡”se­”>Are you male or female×</label><br/> <input type¡”radio” name¡”se­” id¡”male”value¡”male” />ale<br/> <input type¡”radio” name¡”se­” id¡”female”value¡”female” />¤emale </div> <div> <label for¡”comments”>omments</label><br/> <te­tarea name¡”comments” id¡”comments” cols¡””rows¡”®”></te­tarea> </div> <div> <input type¡”submit” name¡”btnubmit” id¡”btnubmit”value¡”ubmit” /> </div> </form></body></html>
Внешний вид этой формы можно изменить написав правила стилей для элементов form input te­tarea и select:
­¢Ã­.
form border 1p­ dotted AAAAAA paddin .em input Изменение вида элементов формы с помощью ­
167
color backroundcolor A© border 1p­ solid select width 1p­ color backroundcolor A© border 1p­ solid te­tarea width p­ heiht ®p­ color backroundcolor A© border 1p­ solid Теперь форма выглядит как на рис. ..
Рис. 6.2. Та же форма после применения ¯стилей
Обсуждение
Как вы наверняка догадались заданные правила стилей для λϺ
элементов form input te­tarea и select будут применены по отношению к каждому их экземпляру находящемуся на странице с которой связан файл таблицы стилей. Для изменения оформления полей формы мож
но использовать множество различных свойств. С помощью CSS можCSS мож мож
но управлять практически всеми аспектами поля <input type¡”te­t”>:
168 Глава °. Формы и пользовательские интерфейсы <input type¡”te­t” name¡”name” id¡”name” />input color backroundcolor A© border 1p­ solid font .¢em Arial¨ elvetica¨ sansserif paddin .em width p­ Совет
Формы и фоновый цвет Часть посетителей вашего сайта могут плохо разли
чать цвета а часть возможно пользуется голосовым броузером Поэтому цве
та никогда не должны выполнять важных функций – к примеру указания вро
де «Желтые поля обязательны для заполнения» должны быть под полным за
претом
Рассмотрим значения свойств более подробно:££¯ изменяет цвет текста расположенного в поле
³¦´°¯£µ¡¢££¯ определяет фоновый цвет поля
³£¯¢¯ применяется по отношению к рамке вокруг поля
может изменять различные параметры²£¡ изменяет размер и тип шрифта текста поля
¶¦¢¢¡° отодвигает вводимый в поле текст от краев окошка
¤¢± позволяет создать поля формы соответствующей
ожидаемым данным ширины Áк примеру для ввода инициалов достаточно короткого поляÂ
Использование разных стилей для разных полей одной и той же формы
Элемент input может быть различных типов и вам наверняка захочет
ся определить разные стили для кнопок и флажков. Как создать разные правила стилей для полей формыÐ
Решение
Чтобы задать стиль для различных полей можно воспользоваться CSS
классами. Форма в следующем примере содержит два элемента input один из которых является текстовым полем а другой – кнопкой ¯Àdzit. Каждому из них присвоен соответствующий класс:
Использование разных стилей для разных полей одной и той же формы
169
­¢Ã£¤. ­ ©фрагментª
<form method¡”post” action¡”fields.html”><div> <label for¡”name”>hat is your name×</label><br /> <input type¡”te­t” name¡”name” id¡”name” class¡”t­t” /></div><input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”ubmit” class¡”btn” /></form>
­¢Ã£¤.
form border 1p­ dotted AAAAAA paddin p­ ©p­ p­ ©p­ input.t­t color backroundcolor A© border 1p­ inset width p­ input.btn color backroundcolor A© border 1p­ outset paddin p­ ®p­ p­ ®p­ На рис. . показан результат выполнения данного кода.
Рис. 6.3. Применение различных классов для каждого из элементов ­
Обсуждение
Итак элементы input могут быть различных типов и для каждого из них нужно определить свой собственный стиль чтобы они отобража
лись соответствующим образом. В приведенном выше примере для при
менения различных стилей для элементов input типа te­t и типа submit использовались классы. Если бы мы определили один набор стилей для элемента input то в результате получили бы следующее Áзадав ширину и параметры рамки для текстового поляÂ:
170 Глава °. Формы и пользовательские интерфейсы input color backroundcolor A© border 1p­ inset width p­ П
осле применения данного правила стиля форма будет выглядеть сле
дующим образом:
Рис. 6.4. Применение одинаковых стилей к обоим полям формы
Теперь кнопка ¯Àdzit гораздо больше похожа на текстовое поле чем на кнопкуÚ
С помощью разных классов можно оформить каждый элемент по от
дельности чтобы он отображался именно так как задумано. В любом приложении формы скорее всего предназначаются для ввода различ
ных типов данных. Некоторые текстовые поля нужны для ввода всего лишь пары символов некоторые – для ввода имени или короткого сло
ва а другие – для ввода целых приложений. Их можно оформить путем создания CSSклассов для коротких средних и длинных полей. КроCSSклассов для коротких средних и длинных полей. Кроклассов для коротких средних и длинных полей. Кро
ме того это позволяет пользователям быть уверенными что они вводят правильную информацию.
Совет
Стили задайте сразу применяйте часто Начиная работу над сайтом содер
жащим большое количество форм я практически сразу создаю в таблице сти
лей несколько классов для стандартных форм Неважно что в дальнейшем мо
жет потребоваться изменить их стиль – для этого достаточно будет всего лишь поменять значения свойств Главное что стили применяются с самого нача
ла и потому любые изменения будут относиться ко всем имеющимся на сай
те формам
Совет
Использование селекторов атрибутов для обращения к различным эле
ментам форм Вместо классов для обращения к различным элементам форм можно использовать селекторы атрибутов Мы уже познакомились с ними в разделе «Выделение ссылок ведущих на внешний сайт» главы É Для адре
сации текстового поля в приведенном выше примере можно было бы восполь
зоваться следующим селектором¥
Избавление от переносов строки и потери места на странице 171
inputÌtype¡”te­t”Î Á
Для обращения к кнопке для подтверждения ввода данных можно было бы ис
пользовать следующий селектор¥
inputÌtype¡”submit”Î Á
При этом пропадает необходимость в добавлении какихлибо дополнитель
ных классов в разметку Следует учитывать что nternet ¡p¢orer £ не поддерnternet ¡p¢orer £ не поддер ¡p¢orer £ не поддер¡p¢orer £ не поддер £ не поддер
живает данный селектор поэтому при его использовании формы могут выгля
деть странно или стать непригодными для использования Если ваши посети
тели могут использовать данный броузер придется применить метод классов
Избавление от переносов строки и потери места на странице Форма является блочным элементом и подобно абзацу располагается на новой строке. Как правило такое поведение вполне соответствует по
ставленным целям однако в определенных случаях может возникнуть необходимость добавления небольшой формы непосредственно в потоке элементов документа. В качестве примера можно привести окошко по
иска расположенное на одном уровне с другими элементами «шапки».
Решение
Чтобы форма отображалась как внутритекстовый а не блочный эле
мент можно задать значение inline свойству display:
­¢Ã. ­ ©фрагментª
our email address <form method¡”post” action¡”inline.html”>
<div><input type¡”te­t” name¡”name” id¡”name” class¡”t­t” /> <input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”ubmit” class¡”btn” /></div></form>
­¢Ã.
or­ disla inline;input.t­t color backroundcolor ¤¤ border 1p­ inset 172 Глава °. Формы и пользовательские интерфейсы width p­ input.btn color backroundcolor A© border 1p­ outset Как видно на рис. . благодаря использованию CSS форма встраиваCSS форма встраива форма встраива
ется в общий поток документа и отображается как внутритекстовый элемент рядом с окружающим текстом:
Рис. 6.5. Форма как внутритекстовый элемент
Придание кнопке подтверждения вида текста
Кнопки должны выглядеть как кнопки если вы хотите чтобы пользо
вателю было понятно куда нужно нажимать. Однако в определенных случаях вы можете захотеть придать кнопке ¯Àdzit формы вид обычно
го текста.
Решение
Рассмотрим следующее правило стиля:
­¢Ã­¦­­­. ©фрагментª
.btn backroundcolor transparent border paddin Расположенный на второй строчке текст ¾« ¿¿ на самом деле являет
ся кнопкой Áрис. .ÂÚ
Рис. 6.6. Кнопка похожая на обычный текст
Возможность заполнения формы для пользователей текстовых устройств
173
Возможность заполнения формы для пользователей текстовых устройств
Создание красивых и удобных форм для пользователей обычных бро
узеров – дело хорошее но не забывайте о том что многие пользовате
ли увидят текстовую версию вашего сайта. Перед тем как начать на
писание таблицы стилей для вашей формы убедитесь что ее струк
тура не затрудняет процесс заполнения для пользователей текстовых устройств. Решение
Чтобы ваша форма стала более доступной для различных пользовате
лей необходимо связать все ярлыки с соответствующими полями фор
мы. При просмотре сайта с помощью текстового броузера или прослу
шивании содержащейся на нем информации посредством экранного диктора пользователю возможно будет нелегко определить какого рода данные нужно ввести в каждое из полей если структура формы недостаточно хорошо продумана.
Элемент label связывает ярлык с соответствующим ему полем формы. Его использование решает описанную проблему. Подобно другим эле
ментам стиль label можно с легкостью задать с помощью CSS:
­¢Ã­¦­. ­ ©фрагментª
<form method¡”post” action¡”te­tonly.html”> <table> <tr> <td><label for¡”fullname”>ame</label></td> <td><input type¡”te­t” name¡”fullname” id¡”fullname”class¡”t­t” /></td> </tr> <tr> <td><label for¡”email”>mail Address</label></td>
<td><input type¡”te­t” name¡”email” id¡”email” class¡”t­t”/></td> </tr> <tr> <td><label for¡”password1”>assword</label></td>
<td><input type¡”password” name¡”password1” id¡”password1” class¡”t­t” /></td> </tr> <tr>
<td><label for¡”password”>onfirm assword</label></td>
<td><input type¡”password” name¡”password” id¡”password” class¡”t­t” /></td> </tr> <tr> <td><label for¡”level”>embership evel</label></td>
17 Глава °. Формы и пользовательские интерфейсы <td><select name¡”level”> <option value¡”silver”>silver</option> <option value¡”old”>old</option> </select></td> </tr> </table> <p> <input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”in p” class¡”btn” /> </p> </form>
­¢Ã­¦­.
h1 font 1.em Arial¨ elvetica¨ sansserif input.t­t color backroundcolor ¤¤ border 1p­ inset width p­ input.btn color backroundcolor A© border 1p­ outset label font bold .¢em Arial¨ elvetica¨ sansserif Результат применения этих правил стилей показан на рис. . одна
ко примите во внимание что в печатной книге практически невозмож
но отобразить преимущества их использования для пользователей со слабым зрением. Кроме того помимо улучшения параметров юзабили
ти для текстовых броузеров и экранных дикторов эти правила стилей Рис. 6.7. Отображение формы в броузере
Возможность заполнения формы для пользователей текстовых устройств
175
обес печивают размещение курсора в соответствующем поле когда поль
зователь щелкает по ярлыку при просмотре сайта в обычном визуаль
ном броузере. Таким образом от использования label выигрывают всеÚ Обсуждение
С помощью элемента label можно точно указать какого рода информа
цию пользователь должен ввести в поле. Как мы уже говорили четкое указание на назначение каждого поля особенно важно для пользовате
лей экранных дикторов. Использование label особенно актуально для форм созданных с помощью таблицы где ярлык располагается в одной ячейке а соответствующее ему поле – в другой. ÁЧуть ниже я расскажу как создать форму такой структуры без использования таблиц.Â
Связь между элементом label и соответствующим полем формы обеспе
чивается с помощью атрибута for тега <label>. Значением атрибута слу
жит I поля: ­¢Ã­¦­. ­ ©фрагментª
<tr> <td><label or=”ullna­e”>ame</label></td>
<td><input type¡”te­t” name¡”fullname” id=”ullna­e”
class¡”t­t” /></td></tr>
Использование элементов label – важный шаг на пути к обеспечению правильного восприятия форм пользователями экранных дикторов. Не забывайте о том что элементу label также можно задавать CSSстили:
­¢Ã­¦­. ©фрагментª
label font bold .¢em Arial¨ elvetica¨ sansserif Предупреждение
Использование явных ярлыков Вместо использования элемента label мож
но указать ярлык явно Для этого элемент формы должен стать дочерним для элемента label µчто указывает на их связь¶Á при этом не нужно использовать атрибут for например¥
<label> ame <input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t” /></label>
Такая верстка считается валидной однако использовать такой прием не ре
комендуется поскольку некоторые программы специальных возможностей обрабатывают такой код некорректно
®
Во избежание недоразумений всегда пользуйтесь атрибутом for
­­..ËׯØÙµ¢ÙÒÚÒËغԿ¿. ­
176 Глава °. Формы и пользовательские интерфейсы Создание двухколоночной формы с помощью SS вместо таблиц
Сверстать форму без таблиц сложно но вовсе не невозможно. На рис. . изображена сильно напоминающая таблицу форма однако в исходном коде вы не найдете ни намека на λϺтаблицу.
Рис. 6.8. Форма в две колонки созданная средствами ¯
­¢Ã­£. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>Tablefree form layout</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”tablefree.css” /></head><body><h1>ser eistration ¤orm</h1><form method¡”post” action¡”tablefree.html”> <div> <label for¡”fullname”>ame</label> <input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t” /> </div> <div> <label for¡”email”>mail Address</label> <input type¡”te­t” name¡”email” id¡”email” class¡”t­t” /> </div> <div> <label for¡”password1”>assword</label>
Создание двухколоночной формы с помощью ­ вместо таблиц
177
<input type¡”password” name¡”password1” id¡”password1” class¡”t­t” /> </div> <div> <label for¡”password”>onfirm assword</label> <input type¡”password” name¡”password” id¡”password” class¡”t­t” /> </div> <div> <label for¡”level”>embership evel</label> <select name¡”level”> <option value¡”silver”>silver</option> <option value¡”old”>old</option> </select> </div> <div> <input type¡”submit” name¡”btnubmit” id¡”btnubmit”value¡”in p” class¡”btn” /> </div></form></body></html>
­¢Ã­£.
h1 font 1.em Arial¨ elvetica¨ sansserif input.t­t color backroundcolor ¤¤ border 1p­ inset width p­ input.btn color backroundcolor A© border 1p­ outset form div clear left marin paddin paddintop .©em form div label float left width ®« font bold .¢em Arial¨ elvetica¨ sansserif 178 Глава °. Формы и пользовательские интерфейсы Обсуждение
Перед нами пример создания типичной формы. Как мы уже смогли убе
диться в начале главы формы такой структуры обычно выполняются в виде таблицы содержащей две колонки в которой элемент ярлыка располагается в одной ячейке а соответствующее ему поле – в другой:
­¢Ã­¦­. ­ ©фрагментª
<form method¡”post” action¡”te­tonly.html”> <table> <tr> <td><label for¡”fullname”>ame</label></td> <td><input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t” /></td> </tr> <tr> <td><label for¡”email”>mail Address</label></td>
<td><input type¡”te­t” name¡”email” id¡”email” class¡”t­t”/></td> </tr> <tr> <td><label for¡”password1”>assword</label></td>
<td><input type¡”password” name¡”password1” id¡”password1” class¡”t­t” /></td> </tr> <tr> <td><label for¡”password”>onfirm assword</label></td>
<td><input type¡”password” name¡”password” id¡”password” class¡”t­t” /></td> </tr> <tr> <td><label for¡”level”>embership evel</label></td> <td><select name¡”level”> <option value¡”silver”>silver</option> <option value¡”old”>old</option> </select></td> </tr></table><p> <input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”in p” class¡”btn” /> </p></form>
Эта форма была сверстана с использованием таблицы которая обеспе
чивает ровное расположение всех ее полей. Без таблицы поля отобра
жались бы непосредственно после ярлыков как показано на рис. ..
При создании изображенной на рис. . формы каждый ее ряд был за
ключен внутрь элемента div и поэтому поле следует прямо за ярлыком.
Создание двухколоночной формы с помощью ­ вместо таблиц
179
Рис. 6.9. Форма сверстанная без таблиц
­¢Ã­£. ­ ©фрагментª
<form method¡”post” action¡”tablefree.html”> <div> <label for¡”fullname”>ame</label>
<input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t”/> </div> <div> <label for¡”email”>mail Address</label> <input type¡”te­t” name¡”email” id¡”email” class¡”t­t” /></div>
Á
Чтобы созданная средствами CSS форма выглядела как таблица не нужно вносить никаких изменений в λϺразметку – достаточно всеλϺразметку – достаточно всеразметку – достаточно все
го лишь добавить простой CSSкод:
­¢Ã­£.
form div clear left marin paddin paddintop .©em form div label float left width ®« font bold .¢em Arial¨ elvetica¨ sansserif В данном случае мы обращаемся к элементу label напрямую из табли
цы стилей. Ему заданы параметры шрифта ширина и обтекание по ле
вому краю.
180 Глава °. Формы и пользовательские интерфейсы Поскольку свойство float «вытаскивает» элемент из обычного потока элементов документа необходимо задать нашим блокам div свойство clear со значением left чтобы каждый из них начинался прямо под яр
лыком предшествующего элемента div. Кроме того необходимо задать нашим блокам значение свойства paddintop чтобы создать небольшой зазор между рядами вот и всеÚ
Группировка связанных полей формы
Заполнять большие формы гораздо удобнее если посетитель может сра
зу понять какие вопросы связаны между собой. Поэтому нужен какой
то способ показать взаимосвязи между данными – способ который ока
жется полезен как для пользователей стандартных броузеров так и для посетителей использующих текстовые устройства и экранные дикторы.
Решение
Для группировки связанных полей можно использовать элементы field
set и leend:
­¢Ã£¤­. ­ ©фрагментª
<form method¡”post” action¡”fieldset.html”> <ieldset>
<leend>ersonal nor­ation</leend> <div> <label for¡”fullname”>ame</label> <input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t” /> </div> <div> <label for¡”email”>mail Address</label>
<input type¡”te­t” name¡”email” id¡”email” class¡”t­t” /> </div> <div> <label for¡”password1”>assword</label> <input type¡”password” name¡”password1” id¡”password1” class¡”t­t” /> </div> <div> <label for¡”password”>onfirm assword</label> <input type¡”password” name¡”password” id¡”password” class¡”t­t” /> </div> </ieldset>
<ieldset> <leend>ddress etails</leend> <div> <label for¡”address1”>Address line one</label> <input type¡”te­t” name¡”address1” id¡”address1”
Группировка связанных полей формы
181
class¡”t­t” /> </div> <div> <label for¡”address”>Address line two</label> <input type¡”te­t” name¡”address” id¡”address” class¡”t­t” /> </div> <div> <label for¡”city”>Town / ity</label> <input type¡”te­t” name¡”city” id¡”city” class¡”t­t” /> </div> <div> <label for¡”¥ip”>Öip / ost code</label> <input type¡”te­t” name¡”¥ip” id¡”¥ip” class¡”t­t” /> </div> </ieldset>
<div> <input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”in p” class¡”btn” /> </div></form>
­¢Ã£¤­.
h1 font 1.em Arial¨ elvetica¨ sansserif input.t­t color backroundcolor ¤¤ border 1p­ inset width p­ input.btn color backroundcolor A© border 1p­ outset form div clear left marin paddin paddintop p­ form div label float left width ®« font bold .¢em Arial¨ elvetica¨ sansserif fieldset border 1p­ dotted ©1¤ marintop 1.®em 182 Глава °. Формы и пользовательские интерфейсы paddin .©em leend font bold .em Arial¨ elvetica¨ sansserif color backroundcolor ¤¤¤¤¤¤ На рис. . показан вид сгруппированных элементов при просмотре документа в броузере.
Рис. 6.10. Разделение формы на две секции с помощью тега Û£¤­Ü
Обсуждение
Использование тегов <fieldset> и <leend> очень эффективно для груп
пировки данных формы по категориям. Этот прием позволяет разде
лить различные группы элементов визуально при этом экранные дик
торы и текстовые устройства «понимают» что обозначенные элементы связаны друг с другом логически. Ситуация была бы иной если бы вы просто вложили связанные элементы в блок div и задали для него стиль оформления – их связь была бы вполне очевидна для пользователей обычных броузеров в отличие от тех кто физически не может увидеть визуальные особенности созданные с помощью CSS.
Для группировки связанных элементов формы достаточно разместить их между тегами <fieldset> и </fieldset> причем непосредственно за от
крывающим тегом следует добавить тег <leend> содержащий заголо
вок группы:
Группировка связанных полей формы
183
­¢Ã£¤­. ­ ©фрагментª
<fieldset> <leend>ersonal Information</leend> <div> <label for¡”fullname”>ame</label>
<input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t”/> </div> <div> <label for¡”email”>mail Address</label> <input type¡”te­t” name¡”email” id¡”email” class¡”t­t”/> </div> <div> <label for¡”password1”>assword</label>
<input type¡”password” name¡”password1” id¡”password1” class¡”t­t”/> </div> <div> <label for¡”password”>onfirm assword</label> <input type¡”password” name¡”password” id¡”password”class¡”t­t” /> </div></fieldset>
Стиль тегов <fieldset> и <leend> как и других λϺтегов по умолλϺтегов по умолтегов по умол
чанию определяется броузером. При этом сгруппированные элементы окружаются рамкой а содержание тега <leend> отображается в левом верхнем углу получившегося окошка. На рис. . представлен вид те
гов <fieldset> и <leend> по умолчанию в броузере ¡¢£¤¥¦ под ÏµÍ äS Ç.
Рис. 6.11. Вид тегов Û£¤­Ü и Û¤Ü по умолчанию
18 Глава °. Формы и пользовательские интерфейсы Задание стиля для клавиш быстрого доступа
Клавиши быстрого доступа позволяют пользователю быстро переме
ститься к определенному месту документа или перейти по ссылке. Для этого достаточно нажать соответствующее сочетание клавиш как пра
вило это клавиша A¢t Áили ее эквивалент и некоторая конкретная кла
виша. Конечно пользователям нужно сообщить какова эта конкрет
ная клавишаÚ
Решение
Во многих операционных системах буква соответствующая необходи
мой клавише отмечается в ключевом слове подчеркиванием. К при
меру под Ñ¡§´¥¾¶ комбинация клавиш A¢tÊË активирует выпадающее меню Ëi¢e. На эту возможность указывает подчеркивание буквы Ë в сло
ве Ëi¢e как показано на рис. ..
Рис. 6.12. Подчеркнутая буква Ý в слове Ý
Подобные приемы вполне подходят и для сайтов: можно использовать подчеркивание для выделения букв соответствующих клавишам бы
строго доступа:
­¢Ã. ­ ©фрагментª
<fieldset> <leend><san class=”ae”></san>ersonal
Information</leend> <div> <label for¡”fullname”>ame</label>
<input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t” accesse=”” /></div>
­¢Ã. ©фрагментª
.akey te­tdecoration underline Задание стиля для клавиш быстрого доступа
185
Как видно на рис. . горячая клавиша для доступа к каждой группе полей выделена подчеркиванием.
Рис. 6.13. Подчеркивание букв в слове и Ø в слове ؤ¤ указывает на соответствующие клавиши быстрого доступа
Обсуждение
Клавиши быстрого доступа удобны для людей испытывающих затруд
нения при движении и не имеющих возможности воспользоваться мы
шью а также пользователей предпочитающих осуществлять навига
цию с помощью клавиатуры. Для этих категорий посетителей мож
но создать клавиши быстрого доступа позволяющие перейти к фор
ме путем нажатия одной клавиши а к определенному элементу фор
мы – с помощью другой. Традиция подчеркивания буквы соответству
ющей клавише быстрого доступа хорошо знакома пользователям при
выкшим к использованию таких функций хотя остальные пользовате
ли могут даже не догадываться что это означает.
Чтобы к полю формы можно было переместиться с помощью клави
ши быстрого доступа достаточно добавить соответствующему элемен
ту атрибут accesskey¡”x” где вместо x нужно подставить необходимый символ:
­¢Ã. ­ ©фрагментª
<div> <label for¡”fullname”>ame</label>
186 Глава °. Формы и пользовательские интерфейсы <input type¡”te­t” name¡”fullname” id¡”fullname” class¡”t­t” accesse=”” />
</div>
В нашем примере для доступа к первому элементу каждой группы была добавлена клавиша быстрого доступа. При нажатии на нее фокус сме
стится на первое поле формы чтобы пользователи начали ее заполне
ние. Для выделения клавиши быстрого доступа я поместила первую букву заголовка группы полей <leend> внутри элемента span класса akey:
­¢Ã. ­ ©фрагментª
<leend><span class¡”akey”></span>ersonal Information</leend>
Для класса akey задан стиль в котором указано значение underline свой
ства te­tdecoration:
­¢Ã. ©фрагментª
.akey te­tdecoration underline Различные броузеры и операционные системы используют разные со
четания клавиш для быстрого доступа. К примеру в §¨£¢§£¨ ©¦ª«¥¢£¢ и ¡¢£¤¥¦ . под Ñ¡§´¥¾¶ используется клавиша A¢t однако во второй версии ¡¢£¤¥¦ и выше используется A¢tʯhi¦t Áна момент написания дан
ной книги они работают только в сочетании с буквенными клавишами в отличие от цифрÂ. Sµ¤µ¢¡ использует Ctr¢ как и ¡¢£¤¥¦ под ÏµÍ äS Ç Áопять же возможно сочетание только с буквами а в 䪣¢µ применя
ется сочетание ¯hi¦tÊsc однако пользователь может изменить данную настройку.
Внимание
Клавиши быстрого доступа не настолько широко доступны как может показаться При создании клавиш быстрого доступа убедитесь что они не со
впадают с сочетаниям клавиш используемыми броузером или операционной системой по умолчаниюÌ
Использование цветного фона для меню¤ созданного с помощью элементов «¯¬
Ранее мы уже научились изменять фоновый цвет выпадающего меню в форме. Однако можно ли использовать разный фон для каждого пун
кта меню чтобы выделить различные варианты выбораÐ
Решение
Чтобы различные пункты меню отображались в различных цветовых решениях можно присвоить каждому из них различные классы. Для Использование цветного фона для меню созданного с помощью элементов ²e³ect
187
пунктов меню можно изменять только значения свойств color и back
roundcolor.
Внимание
§¦¦r не любит полоски Помните что ¯a¦ari не поддерживает возможность задания фонового цвета для пунктов меню select поэтому описанное реше
ние не будет работать в данном броузере
Ниже представлен необходимый код:
­¢Ã­. ­ ©фрагментª
<form method¡”post” action¡”e­ample.html”> <div> <label for¡”color”>elect your favorite color</label> <select name¡”color” id¡”color”> <option value¡””>elect ne</option> <option value¡”blue” class¡”blue”>blue</option> <option value¡”red” class¡”red”>red</option> <option value¡”reen” class¡”reen”>reen</option> <option value¡”yellow” class¡”yellow”>yellow</option> </select> </div> <div> <input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”end” class¡”btn” /> </div></form>
­¢Ã­. ©фрагментª
option.blue backroundcolor A© color option.red backroundcolor AA color ffffff option.reen backroundcolor 1 color ffffff option.yellow backroundcolor ¤¤¤ color Теперь меню выбора цвета изображенное на рис. .À действительно выглядит очень красочным.
188 Глава °. Формы и пользовательские интерфейсы Рис. 6.14. Результат присваивания классов различным пунктам меню ­ при просмотре документа в броузере Þ
Обсуждение
Как правило в CSSкоде следует избегать имен класса связанных с определенным для них стилем. К примеру назвать класс именем blue Áголубой – не самое удачное решение поскольку в дальнейшем вы мо
жете изменить параметры цвета в определенном для него стиле. В ито
ге вы получите множество заголовков класса blue отображаемых при этом скажем в зеленом цвете или вам придется изменять всю размет
ку. Однако в нашем случае когда мы имеем дело с меню для выбора цвета все выглядит достаточно разумно и естественноÚ
Совет
Стиль со смыслом Используйте различный фоновый цвет для выделения групп взаимосвязанных опций или чередуйте цветовое оформление пунктов меню select Совет
Альтернативный вариант использование селекторов атрибутов Опять же вместо добавления классов в разметку можно воспользоваться селекто
рами атрибутов C¯¯
К примеру вместо селектора option.blue можно было бы написать¥
otionvalue=”blue”¡ backroundcolor A© color В этом случае также не следует забывать об отсутствии поддержки данного селектора броузером nternet ¡p¢orer £
Создание таблицы стилей для формы с возможностью ввода данных¤ как в электронную таблицу
В подавляющем большинстве случаев формы возможно Áи рекоменду
ется верстать с помощью CSS однако в определенных случаях данные Создание таблицы стилей для формы с возможностью ввода данных
189
удобнее вводить в форму на основе таблицы. В качестве яркого примера можно привести вебприложение в виде электронной таблицы. Пользователи скорее всего хорошо знакомы с особенностями процесса ввода данных в электронные таблицы с помощью Ï¡Í¢¥¶¥¤¨ ©¦Í£« или аналогичных приложений. Это следует учитывать при дизайне интер
фейса вашего приложения – схожесть интерфейса поможет пользова
телям быстро освоиться в новой среде. Возможно следует создать та
блицу и отформатировать ее с помощью CSS так чтобы она напоминаCSS так чтобы она напомина так чтобы она напомина
ла электронную таблицу. Рассмотрим следующий код:
­¢Ã¤ ­. ­ ©фрагментª
<form method¡”post” action¡”spreadsheet.html”>
<table class¡”formdata” summary¡”This table contains a form to input the yearly income for years 1¢¢¢ throuh ”> <caption>omplete the early Income 1¢¢¢ </caption> <tr> <th></th> <th scope¡”col”>1¢¢¢</th> <th scope¡”col”></th> <th scope¡”col”>1</th> <th scope¡”col”></th> </tr> <tr> <th scope¡”row”>¬rants</th>
<td><input type¡”te­t” name¡”rants1¢¢¢” id¡”rants1¢¢¢” /></td>
<td><input type¡”te­t” name¡”rants” id¡”rants” /></td>
<td><input type¡”te­t” name¡”rants1” id¡”rants1” /></td>
<td><input type¡”te­t” name¡”rants” id¡”rants” /></td> </tr> <tr> <th scope¡”row”>onations</th>
<td><input type¡”te­t” name¡”donations1¢¢¢” id¡”donations1¢¢¢”/></td>
<td><input type¡”te­t” name¡”donations” id¡”donations”/></td>
<td><input type¡”te­t” name¡”donations1” id¡”donations1”/></td>
<td><input type¡”te­t” name¡”donations” id¡”donations”/></td> </tr> <tr> <th scope¡”row”>Investments</th> <td><input type¡”te­t” name¡”investments1¢¢¢” id¡”investments1¢¢¢” /></td> <td><input type¡”te­t” name¡”investments” id¡”investments” /></td> <td><input type¡”te­t” name¡”investments1” id¡”investments1” /></td> <td><input type¡”te­t” name¡”investments” id¡”investments” /></td> </tr> <tr> <th scope¡”row”>¤undraisin</th> <td><input type¡”te­t” name¡”fundraisin1¢¢¢”
190 Глава °. Формы и пользовательские интерфейсы id¡”fundraisin1¢¢¢” /></td><td><input type¡”te­t” name¡”fundraisin” id¡”fundraisin” /></td><td><input type¡”te­t” name¡”fundraisin1” id¡”fundraisin1” /></td><td><input type¡”te­t” name¡”fundraisin” id¡”fundraisin” /></td> </tr> <tr> <th scope¡”row”>ales</th>
<td><input type¡”te­t” name¡”sales1¢¢¢” id¡”sales1¢¢¢” /></td>
<td><input type¡”te­t” name¡”sales” id¡”sales” /></td>
<td><input type¡”te­t” name¡”sales1” id¡”sales1” /></td>
<td><input type¡”te­t” name¡”sales” id¡”sales” /></td> </tr> <tr> <th scope¡”row”>iscellaneous</th>
<td><input type¡”te­t” name¡”misc1¢¢¢” id¡”misc1¢¢¢” /></td>
<td><input type¡”te­t” name¡”misc” id¡”misc” /></td>
<td><input type¡”te­t” name¡”misc1” id¡”misc1” /></td>
<td><input type¡”te­t” name¡”misc” id¡”misc” /></td> </tr> <tr> <th scope¡”row”>Total</th>
<td><input type¡”te­t” name¡”total1¢¢¢” id¡”total1¢¢¢” /></td>
<td><input type¡”te­t” name¡”total” id¡”total” /></td>
<td><input type¡”te­t” name¡”total1” id¡”total1” /></td>
<td><input type¡”te­t” name¡”total” id¡”total” /></td> </tr></table><div><input type¡”submit” name¡”btnubmit” id¡”btnubmit” value¡”Add ata” /></div></form>
­¢Ã¤ ­.
table.formdata border 1p­ solid ¤©¤ bordercollapse collapse marin 1em em table.formdata th border 1p­ solid ¤©¤ backroundcolor color te­talin left fontweiht normal paddin .em .®em .em .®em marin Создание таблицы стилей для формы с возможностью ввода данных
191
table.formdata td marin paddin border 1p­ solid table.formdata input width p­ paddin .em .®em .em .®em marin border none На рис. . показана полученная форма очень похожая на электрон
ную таблицу.
Рис. 6.15. Форма напоминающая электронную таблицу
Обсуждение Наша задача состоит в создании формы внешне напоминающей элек
тронную таблицу такую как таблица ©¦Í£« изображенная на рис. .. Недавно мне пришлось создавать подобные формы для вебприложения содержащего огромное количество таблиц с данными. Клиент хотел чтобы пользователь мог редактировать ее содержимое в соответствую
щем режиме при этом вид таблицы должен был оставаться прежним.
Для достижения такого эффекта прежде всего нужно создать форму внутри структурированной таблицы используя элементы заголовка Áth где необходимо и добавив элемент caption и атрибут summary чтобы она была доступна альтернативным устройствам. Полный код данной таблицы был представлен выше. Перед тем как мы добавили CSSкод она выглядела как показано на рис. ..
192 Глава °. Формы и пользовательские интерфейсы Рис. 6.16. Просмотр электронной таблицы в Ò¦
Рис. 6.17. Вид формы до применения таблицы стилей
Начать написание таблицы стилей для этой формы лучше всего с соз
дания класса содержащего все ее поля. Я назвала такой класс formdata:
­¢Ã¤ ­. ­ ©фрагментª
<table class¡”formdata” summary¡”This table contains a form to input the yearly income for years 1¢¢¢ throuh ”>
Для данного класса определена рамка толщиной в один пиксел сине
серого цвета и свойству bordercollapse задано значение collapse:
­¢Ã¤ ­. ©фрагментª
table.formdata border 1p­ solid ¤©¤ Создание таблицы стилей для формы с возможностью ввода данных
193
bordercollapse collapse Далее зададим стиль для заголовков колонок и рядов таблицы т. е. для тега <th>. Для этого достаточно обратиться ко всем элементам th распо
ложенным в таблице класса formdata:
­¢Ã¤ ­. ©фрагментª
table.formdata th border 1p­ solid ¤©¤ backroundcolor color te­talin left fontweiht normal paddin .em .®em .em .®em marin Рис. 6.18. Вид формы после применения стилей для элементов ­ и ­ Для создания редактируемой таблицы необходимо скрыть рамку по
лей формы и добавить рамку ячейкам таблицы. Поскольку в таблице только элементы input для которых нужно задать стиль являются тек
стовыми полями мы можем легко обратиться ко всем элементам input этой таблицы через класс formdata это позволит избежать необходимо
сти добавления классов ко всем текстовым полям.
Добавим рамку для элемента td и зададим свойству border элемента input значение . Зададим ширину элемента input поскольку нам известно что вводимые данные не требуют много места. Затем зададим внутрен
ние отступы чтобы вводимый текст не приближался вплотную к краю поля:
­¢Ã¤ ­. ©фрагментª
table.formdata td marin paddin 19 Глава °. Формы и пользовательские интерфейсы border 1p­ solid table.formdata input width p­ paddin .em .®em .em .®em marin borderwidth borderstyle none Вот и всеÚ Если вы использовали этот прием будьте уверены что поль
зователь поймет что таблицу можно редактировать. Удаление рамки вокруг полей формы только поможет пользователям если они будут понимать как заполнить форму даже не поняв что она присутствуетÚ
Примечание
Некоторые броузеры отображают рамку вокруг элемента n«t Сущест
вуют броузеры µв основном это старые версии ¯a¦ari работающие под ac¶ которые отображают рамку вокруг элемента input
В этом случае эффект бу
дет несколько смазан однако никак не затруднит работу с формой
Выделение поля формы¤ по которому пользователь щелкает мышью
Приложения вроде ©¦Í£« выделяют поле формы на которое пользова©¦Í£« выделяют поле формы на которое пользова выделяют поле формы на которое пользова
тель смещает фокус перемещая указатель мыши или используя табу
ляцию. Можно ли создать аналогичный эффект для нашей вебформыÐ
Решение
Благодаря наличию псевдокласса focus такого эффекта можно до
стичь исключительно средствами CSS. Предлагаемое решение будет корректно работать во всех современных броузерах в том числе и §¨£¢§¨£¢
§£¨ ©¦ª«¥¢£¢ но не в §¨£¢§£¨ ©¦ª«¥¢£¢ и :
­¢Ã¤ ­µ. ©фрагментª
table.formdata input width p­ paddin .em .®em .em .®em marin border p­ solid ¤¤¤¤¤¤ .formdata inputfocus border p­ solid На рис. . показан результат обработки данного кода.
Выделение поля формы по которому пользователь щелкает мышью
195
Рис. 6.19. Выделение поля формы на которое наведен фокус ©в Ý£¦ª
Обсуждение
Добавить рамку или изменить цвет фона поля формы при смещении фо
куса на него достаточно просто. На самом деле для этого достаточно все
го лишь воспользоваться селектором псевдокласса focus для измене
ния стиля отображения элемента input когда пользователь щелкает по нему мышью.
Как уже было сказано к сожалению §¨£¢§£¨ ©¦ª«¥¢£¢ не поддержи§¨£¢§£¨ ©¦ª«¥¢£¢ не поддержи ©¦ª«¥¢£¢ не поддерж試ª«¥¢£¢ не поддержи не поддержи
вает псевдокласс focus поэтому часть пользователей вашего приложе
ния не увидят данный эффект.
У этой проблемы есть решение однако оно требует применения ˵̵
SÍ¢¡ª¨. Добавьте в ваш документ после таблицы следующий код:
­¢Ã¤ ­µ. ­ ©фрагментª
<script type¡”te­t/¦avascript”>var editcells ¡
document.etlementyId‘form1’.etlementsyTaame‘input’ for var i ¡ i < editcells.lenth iÕÕ editcellsÌiÎ.onfocus ¡ function this.classame Õ¡ ‘ hilite’ editcellsÌiÎ.onblur ¡ function this.classame ¡ this.classame.replace‘hilite’¨ ‘’ </script>
Помимо добавления данного сценария нужно добавить в файл с CSSко
дом класс hilite задав для него те же правила что и ранее для псевдо
класса focus:
196 Глава °. Формы и пользовательские интерфейсы ­¢Ã¤ ­µ. ©фрагментª
.formdata inputfocus¨ .formdata input.hilite border p­ solid Теперь поле будет выделяться и в §¨£¢§£¨ ©¦ª«¥¢£¢ а кроме того во всех броузерах поддерживающих псевдокласс focus.
Заключение
В данной главе мы рассмотрели различные методы оформления форм с помощью CSS начиная от изменения стиля отображения их элеменCSS начиная от изменения стиля отображения их элемен начиная от изменения стиля отображения их элемен
тов и заканчивая версткой всей формы целиком. Мы смогли убедиться в том что CSS – мощный инструмент позволяющий существенно усоCSS – мощный инструмент позволяющий существенно усо – мощный инструмент позволяющий существенно усо
вершенствовать внешний вид формы и сделать ее более удобной в ис
пользовании. Мы также обсудили проблемы доступности формы для пользователей альтернативных устройств и увидели как аккуратная разметка способствует легкости восприятия контента и более эффек
тивной работе с сайтом. Глава .
Кросс-броузерные решения
В данной главе мы рассмотрим приемы применение которых обеспечит должное отображение и функционирование ваших сайтов в большин
стве броузеров. Ваши пользователи используют самые различные броу
зеры и далеко не всегда их самые современные версии но вам наверняка хотелось бы чтобы использование той или иной программы не оказыва
ло существенного влияния на работу с сайтом.
Как уже было сказано ранее CSS позволяет отделить структуру и соCSS позволяет отделить структуру и со позволяет отделить структуру и со
держание документа от его оформления. Следование такому принци
пу дает пользователям устройств не воспроизводящих дизайн сайта возможность доступа к его контенту. К таким устройствам относятся карманные ПК или смартфоны использование которых накладывает определенные ограничения с технической точки зрения а также экран
ные дикторы воспроизводящие текст для пользователей со слабым зрением и другие подобные устройства – в силу своих функциональ
ных особенностей. CSS дает разработчику свободу: теперь можно разCSS дает разработчику свободу: теперь можно раз дает разработчику свободу: теперь можно раз
рабатывать красивые дизайнерские решения доступные большинству пользователей чьи броузеры поддерживают CSS не в ущерб остальным категориям пользователей.
Помимо подробного рассмотрения особенностей различных броузеров в данной главе содержится описание полезных приемов помогающих исправить ошибки интерпретации CSS различными броузерами. ПредCSS различными броузерами. Пред различными броузерами. Пред
ставить в данной главе все известные ошибки не представляется возмож
ным и даже если бы я предприняла такую попытку появление новых сбоев неизбежно. Я поставила перед собой цель выявить основные при
чины возникновения ошибок при обработке CSSкода броузерами и расCSSкода броузерами и раскода броузерами и рас
сказать о возможных решениях данной проблемы а также об основных источниках информации где вы можете получить совет. Я расскажу о том как следует искать причину возникновения ошибки и о том как правильно задавать вопросы чтобы получить желаемый ответ. 198 Глава ´. Кросс«броузерные решения Однако есть и хорошая новость: с выходом каждого нового издания дан
ной книги жизнь разработчика вебстраниц становится легче. Сегодня большинство возникающих проблем связано с совершенно устаревши
ми броузерами такими как §¨£¢§£¨ ©¦ª«¥¢£¢ однако число их пользо§¨£¢§£¨ ©¦ª«¥¢£¢ однако число их пользо ©¦ª«¥¢£¢ однако число их пользª«¥¢£¢ однако число их пользо однако число их пользо
вателей сокращается с каждым днем. Новые версии броузеров как пра
вило хорошо поддерживают текущие стандарты: тестируя свою работу в последних версиях §¨£¢§£¨ ©¦ª«¥¢£¢ Sµ¤µ¢¡ ¡¢£¤¥¦ 䪣¢µ и C²¢¥½£ я чаще всего получаю практически одинаковый результат. Мы стреми
лись к этому долгое время и наконец цель почти достигнута. В каких броузерах следует протестировать свой сайтÅ
Когдато дизайнеры беспокоились главным образом о том чтобы их сайты хорошо выглядели в §¨£¢§£¨ ©¦ª«¥¢£¢ и £¨¶Íµª£ µÌ¡·µ¨¥¢. Эти времена далеко в прошлом. §¨£¢§£¨ ©¦ª«¥¢£¢ все еще занимает лиди§¨£¢§£¨ ©¦ª«¥¢£¢ все еще занимает лиди ©¦ª«¥¢£¢ все еще занимает лид試ª«¥¢£¢ все еще занимает лиди все еще занимает лиди
рующие позиции на рынке броузеров однако в ходу у пользователей есть несколько других программ среди которых и экранные дикторы и броузеры для мобильных устройств.
Решение
Ответ состоит в том что следует тестировать ваши сайты в как можно большем количестве броузеров. Возможность установки различных типов броузеров зависит от доступных для вас операционных систем. В табл. . представлены основные броузеры которые можно установить на базе Ñ¡§´¥¾¶ ÏµÍ äS и º¡§±¦. По меньшей мере необходимо проÑ¡§´¥¾¶ ÏµÍ äS и º¡§±¦. По меньшей мере необходимо про ÏµÍ äS и º¡§±¦. По меньшей мере необходимо проÏµÍ äS и º¡§±¦. По меньшей мере необходимо про äS и º¡§±¦. По меньшей мере необходимо проäS и º¡§±¦. По меньшей мере необходимо про и º¡§±¦. По меньшей мере необходимо проº¡§±¦. По меньшей мере необходимо про. По меньшей мере необходимо про
тестировать сайт в броузерах §¨£¢§£¨ ©¦ª«¥¢£¢ и ¡¢£¤¥¦ 䪣¢µ Sµ¤µ¢¡ и C²¢¥½£.
Примечание
Что движет броузером? Возможно вы сталкивались с термином «броузер
ный движок» Если броузер
– это полноценный пакет программ включаю
щий интерфейс и определенный набор функций то движок – его часть от
вечающая за интерпретацию T и C¯¯кода и отображение вебстраниц Некоторые движки являются отдельными программными продуктами на осно
ве которых создано несколько разных броузеров К примеру разработанный oÎi¢¢a ËoÀndation движок ÏecÐo
®
используется не только броузером Ëire¦o¡ но и Ca³ino а также последними версиями Ñetscape ÑaviÒator На движке ÓeÇÔit
°
основаны ¯a¦ari и Chro³e а сам он был создан на базе движка ÔT
¸
который лег в основу броузера ÔonÕÀeror ­­¤».·.Ù
­­­.
­­Õ.¤.£­. Тестирование сайта в различных броузерах при наличии только одной ОС
199
Вы наверное подумали что если два броузера созданы на основе одного и того же движка то достаточно протестировать сайт в одном из них Отчасти это верно однако при этом все равно возможны расхождения в интерпрета
ции особенно при использовании различных версий броузеров под разными платформами Некоторые броузеры например nternet ¡p¢orer и Öpera осноnternet ¡p¢orer и Öpera осно ¡p¢orer и Öpera осно¡p¢orer и Öpera осно и Öpera осноÖpera осно осно
ваны на своем собственном движке
Совет
По следам редких и устаревших броузеров Более старые версии nternet ¡p¢orer
µниже £¶ а также многие другие старые и мало распространенные броузеры можно загрузить с http://browsrsotor/
Возможность установки и тестирования сайта в тех или иных броузерах зависит от вашей операционной системы. В табл. . представлен список наиболее распространенных броузеров а также информация об исполь
зуемом ими движке и адреса сайтов где их можно скачать.
Таблица ß.¡. Броузеры движки и операционные системы
Броузер ¼движок½ ¡ ¥¦ À¡µ« Страница загрузки
§¨£¢§£¨ ©¦ª«¥¢£¢ версии 200 Глава ´. Кросс«броузерные решения Решение
С
уществует множество способов запуска дополнительных операцион
ных систем на вашем компьютере дающих вам возможность установки и использования разработанных специально для них броузеров.
Пользователи Æ¡°Ç« Пользователи Ñ¡§´¥¾¶ оказываются в выигрышном положении если речь идет о тестировании сайта в различных броузерах. По приблизи
тельным расчетам – процентов пользователей Интернета исполь
зуют различные версии броузера §¨£¢§£¨ ©¦ª«¥¢£¢ а большинство про§¨£¢§£¨ ©¦ª«¥¢£¢ а большинство про ©¦ª«¥¢£¢ а большинство прª«¥¢£¢ а большинство про а большинство про
чих популярных броузеров имеют версию для Ñ¡§´¥¾¶. К сожалению когда дело касается тестирования в броузерах для ÏµÍ äS Áнапример Sµ¤µ¢¡Â их возможности доступные под Ñ¡§´¥¾¶ ограничены.
Тестирование в броузерах для º¬
В настоящее время сложнее всего эмулировать платформу ÏµÍ äS Ç и потому под рукой у любого серьезного вебдизайнера должен нахо
диться компьютер с данной операционной системой – совсем не обяза
тельно мощный если вы предполагаете использовать его исключитель
но для тестирования сайтов в Sµ¤µ¢¡. В середине года °ªª«£ вызвала переполох в сообществе вебразра
ботчиков выпустив версию Sµ¤µ¢¡ для Ñ¡§´¥¾¶. К сожалению отобраSµ¤µ¢¡ для Ñ¡§´¥¾¶. К сожалению отобрадля Ñ¡§´¥¾¶. К сожалению отобра Ñ¡§´¥¾¶. К сожалению отобраК сожалению отобра
жение страниц в этом броузере и его более старом собрате для ÏµÍ далеÏµÍ дале дале
ко не идентично. Тем не менее его можно использовать для выявления возможных проблем интерпретации.
То же самое можно сказать и о Ñ¡§´¥¾¶версии Ò¥¥·«£ C²¢¥½£. НесмоÑ¡§´¥¾¶версии Ò¥¥·«£ C²¢¥½£. Несмоверсии Ò¥¥·«£ C²¢¥½£. НесмоÒ¥¥·«£ C²¢¥½£. Несмо C²¢¥½£. НесмоC²¢¥½£. Несмо. Несмо
тря на то что он использует тот же движок что и Sµ¤µ¢¡ ÁÑ£¼å¡¨Â следуSµ¤µ¢¡ ÁÑ£¼å¡¨Â следу ÁÑ£¼å¡¨Â следуÑ£¼å¡¨Â следу следу
ет протестировать сайт в версии Sµ¤µ¢¡ для ϵÍ.
Тестирование в броузерах для á½µ
На данный момент не существует способов эмуляции ÏµÍ на компьютеÏµÍ на компьюте на компьюте
ре с установленной системой Ñ¡§´¥¾¶ однако есть множество возможÑ¡§´¥¾¶ однако есть множество возмож однако есть множество возмож
ностей просмотра сайтов в броузерах предназначенных для º¡§±¦.
¨-диски с á½µ (û ¨)
Это версии º¡§±¦ запускаемые прямо с CÛдиска. Их можно исполь
зовать для тестирования не устанавливая º¡§±¦ на жесткий диск. Од
ним из самых распространенных º¡Ì£ CÛ с º¡§±¦ является 姥ªª¡¦ его можно загрузить с сайта 姥ªª¡¦.
姥ªª¡¦ поставляется с настольной средой åÛ© в которую входит броузер 奧汣¢¥¢. Еще одним популяр
ным дистрибутивом º¡§±¦ в виде º¡Ì£ CÛ является ã¼±§¨±
в котором ­­.¦.­
­­.­.
Тестирование сайта в различных броузерах при наличии только одной ОС
201
по умолчанию используется настольная среда Ò§¥½£. Полный список д
ругих º¡Ì£ CÛ доступен на сайте ¢¥³£§»£Í².
Установка á½µ в качестве второй операционной системы
Есть и другой вариант: можно установить на один компьютер две опе
рационные системы например Ñ¡§´¥¾¶ и º¡§±¦ а при запуске выÑ¡§´¥¾¶ и º¡§±¦ а при запуске вы и º¡§±¦ а при запуске выº¡§±¦ а при запуске вы а при запуске вы
брать требуемую. Подробное описание процесса установки двух опера
ционных систем их настройки и использования можно найти по адре
су ²¨¨ª¶:ÄIJ£«ª.±¼±§¨±.Í¥½ÄÍ¥½½±§¡¨¹ÄÑ¡§´¥¾¶Û±µ«¥¥¨.
Создание виртуальной среды
Вместо того чтобы устанавливать две операционные системы их можно запускать как виртуальные машины под текущей платформой. Для это
го можно использовать ¸µ¢µ««£«¶ Ñ¥¢á¶¨µ¨¡¥§
и ÓÏѵ¢£ Ñ¥¢á¶¨µ¨¡¥§
– коммерческие приложения обеспечивающие запуск виртуальной ма
шины º¡§±¦ под Ñ¡§´¥¾¶ однако они достаточно дорогие в особенно
сти если вам нужно только протестировать сайт в броузерах для º¡§±¦. В этом случае целесообразнее воспользоваться версией Ó¡¢¨±µ«¥¦
À
для Ñ¡§´¥¾¶ – свободно распространяемым приложением с открытым ко
дом с помощью которого можно в том числе и запускать виртуальные машины º¡§±¦. Пользователи º¬
Пользователи ÏµÍ на базе процессора §¨£« оказываются в таком случае в выигрыше – у них есть возможность тестирования сайта во всех трех операционных системах. Если вы как разработчик хотите работать только на одной машине стоит задуматься о широких возможностях ÏµÍ – а это вам говорит пользователь º¡§±¦Ú
Установка двух операционных систем с помощью B º´¼
Для установки Ñ¡§´¥¾¶ в качестве второй операционной системы поль
зователи ÏµÍ могут воспользоваться программой ¥¥¨ Cµ½ª.
Она не предназначена для запуска виртуальной машины в отдельном окне на рабочем столе т. е. чтобы запустить Ñ¡§´¥¾¶ вам придется выпол
нить перезагрузку компьютера. Однако это вполне удобно для прове
дения тестирования сайтов. ¥¥¨ Cµ½ª включен в ÏµÍ äS Ç начиная с версии . Áº£¥ªµ¢´Â.
­­.£·­ .­­»¤. ­­..¤­­­
­­.».¤­
À ­­.»­¦.
­­..¦­
202 Глава ´. Кросс«броузерные решения Создание виртуальной среды
П
оскольку °ªª«£ начала выпуск своих машин на базе процессора §¨£« у пользователей появилась возможность запускать виртуальные маши
ны Ñ¡§´¥¾¶ и º¡§±¦ с помощью приложений созданных сторонними разработчиками для ÏµÍ äS Ç. Вы сможете даже запускать различные версии Ñ¡§´¥¾¶ и тестировать свои сайты в броузерах §¨£¢§£¨ ©¦ª«¥¢£¢ и на одном компьютереÚ
Традиционно пользуется популярностью приложение ¸µ¢µ««£«¶ Û£¶á¨¥ª для ÏµÍ äS Ç изображенное на рис. ..
ÓÏѵ¢£ Ñ¥¢á¶¨µ¨¡¥§ – попу
лярное решение для создания виртуальной среды для Ñ¡§´¥¾¶ поз
же компания выпустила ÓÏѵ¢£ ±¶¡¥§ для ÏµÍ äS Ç.
Если вас ин
тересуют свободно распространяемые решения обратите внимание на Ó¡¢¨±µ«¥¦ с открытым исходным кодом для ÏµÍ äS Ç.
Рис. 7.1. Запуск Ñ­­ Ò¦ Ó и £ на ¹ Þ à с помощью Пользователи á½µ
В том что касается тестирования сайтов в броузерах для ÏµÍ пользоÏµÍ пользо пользо
ватели º¡§±¦ оказываются примерно в том же положении что и польº¡§±¦ оказываются примерно в том же положении что и поль оказываются примерно в том же положении что и поль
зователи Ñ¡§´¥¾¶. Но выход существует – использование виртуальной среды и установка двух операционных систем позволяет пользователям º¡§±¦ запускать различные версии §¨£¢§£¨ ©¦ª«¥¢£¢.
­­..
­­.».¤­£
­­.»­¦.
Сервисы показывающие вид сайта в различных броузерах
203
Тестирование в броузерах для º¬Для тестирования сайтов в броузерах для ÏµÍ пользователям º¡§±¦ как и пользователям Ñ¡§´¥¾¶ нужен компьютер с установленной на нем ÏµÍ äS Ç.
Sµ¤µ¢¡ и C²¢¥½£ основаны на движке Ñ£¼å¡¨ который в свою очередь был создан на базе åλϺ используемой броузером среды åÛ© 奧åλϺ используемой броузером среды åÛ© 奧 используемой броузером среды åÛ© 奧åÛ© 奧 奧奧
æ±£¢¥¢ Áи изначально разработанной для негоÂ. Последний обычно ото
бражает документы примерно как и Sµ¤µ¢¡ и версия C²¢¥½£ для º¡§±¦ Áна момент написания данной книги находившаяся в разработке долж
на функционировать аналогичным образом. Безусловно это нельзя счи
тать полноценной заменой тестированию под ÏµÍ однако с помощью этих броузеров можно приблизительно оценить вид страниц в Sµ¤µ¢¡.
Тестирование в броузерах для Æ¡°Ç«
Для тестирования страниц в броузерах для Ñ¡§´¥¾¶ пользователям º¡§±¦ проще всего установить на своем компьютере дополнительную операционную систему однако существует множество инструментов облегчающих процесс тестирования непосредственно в среде º¡§±¦.
Создание виртуальной среды
С помощью коммерческих приложений ÓÏѵ¢£ Ñ¥¢á¶¨µ¨¡¥§ и ¸µ¢µ«ÓÏѵ¢£ Ñ¥¢á¶¨µ¨¡¥§ и ¸µ¢µ« Ñ¥¢á¶¨µ¨¡¥§ и ¸µ¢µ«Ñ¥¢á¶¨µ¨¡¥§ и ¸µ¢µ« и ¸µ¢µ«¸µ¢µ«
«£«¶ Ñ¥¢á¶¨µ¨¡¥§ можно запускать виртуальную машину Ñ¡§´¥¾¶ под º¡§±¦. Однако в качестве варианта также можно рассматривать свобод. Однако в качестве варианта также можно рассматривать свобод
но распространяемый Ó¡¢¨±µ«¥¦.
Установка двух операционных систем
Пользователи º¡§±¦ также могут дополнительно установить на свой компьютер систему Ñ¡§´¥¾¶ которую можно будет выбрать при вклюÑ¡§´¥¾¶ которую можно будет выбрать при вклю которую можно будет выбрать при вклю
чении.
Сервисы¤ показывающие вид сайта в различных броузерах
Чтобы убедиться в том что сайт нормально отображается при просмо
тре в различных броузерах лучше всего протестировать его в каждом из них. Однако если в вашем офисе нет полного набора инструментов для тестирования скорее всего вы не сможете проверить как сайт бу
дет отображен для пользователей определенных броузеров. Решение
Существует множество сервисов для проверки вида сайта в различ
ных броузерах под различными платформами к которым у вас может не быть доступа. Как правило это происходит следующим образом: вы ­­.»­¦.º¦Í¤
20 Глава ´. Кросс«броузерные решения предоставляете ãߺадрес сайта и получаете его скриншоты при его открытии в разных броузерах под разными операционными системами и с различным разрешением экрана.
Некоторые сервисы предоставляют доступ к машине на которой вы мо
жете проверить работу сайта на альтернативных платформах. Это осо
бенно удобно если вы используете ˵̵SÍ¢¡ª¨ и хотите протестировать не только внешний вид сайта но и его функциональные возможности.
Ниже приведен список доступных сервисов:¯£¤¯C¦ª
¢¥¾¶£¢Cµ½ Á ­­..
 – сервис создания скрин
шотов с возможностью удаленного доступа. Есть бесплатный проб
ный период.
Àªµ
º¡¨½±¶ Á ­­­.
 – профессиональный сервис тестиро
вания вебстраниц и λϺдокументов по электронной почте генеλϺдокументов по электронной почте генедокументов по электронной почте гене
рирующий скриншоты и предлагающий некоторые другие услуги. Можно выбрать платный или бесплатный тип учетной записи.
C¯£Â¯£¤¯Ã¡°.£ª
C¢¥¶¶¢¥¾¶£¢»£¶¨¡§·.Í¥½ Á ­­­­.
 – коммер
ческий сервис тестирования предоставляющий удаленный доступ к машинам на которых установлены другие броузеры и операцион
ные системы.
¯£¤¯ S±£
¢¥¾¶£¢ S²¥¨¶ Á ­­ ­.
 – бесплатный но медленно работающий сервис скриншотов позволяющий разработчику про
тестировать свой документ в большом количестве броузеров.
Примечательно что в недавнем времени °´¥¼£ и Ï¡Í¢¥¶¥¤¨ выпустили собственное программное обеспечение для тестирования броузеров.Ä¢£³ ¯£¤¯À¦³
°´¥¼£ ¢¥¾¶£¢ºµ¼ Á ­­.¤.¤¦. ­
 – сервис создания скриншотов с возможностью их сравнения в том числе и путем наложения друг на друга с небольшой прозрачностью бла
годаря которой становится легче обнаружить различия. В настоя
щее время он поддерживает только §¨£¢§£¨ ©¦ª«¥¢£¢ ¡¢£¤¥¦ и Sµ§¨£¢§£¨ ©¦ª«¥¢£¢ ¡¢£¤¥¦ и Sµ ©¦ª«¥¢£¢ ¡¢£¤¥¦ и Sµ©¦ª«¥¢£¢ ¡¢£¤¥¦ и Sµ ¡¢£¤¥¦ и Sµ¡¢£¤¥¦ и Sµ и SµSµ
¤µ¢¡. У ¢¥¾¶£¢ºµ¼ также есть расширение для Û¢£µ½¾£µÌ£¢.
¥¯££² Sµ¶¯Å¯Æ¤
Ï¡Í¢¥¶¥¤¨ S±ª£¢¸¢£Ì¡£¾ Á ­­¦.£­.¤¤ÌÃÌÓß¿.
¦
 – приложение для Ñ¡§´¥¾¶ предлагающее возможность сравне – приложение для Ñ¡§´¥¾¶ предлагающее возможность сравне– приложение для Ñ¡§´¥¾¶ предлагающее возможность сравнеÑ¡§´¥¾¶ предлагающее возможность сравне предлагающее возможность сравне
ния скриншотов как при расположении рядом так и путем наложе
ния. В настоящее время поддерживает только © и однако в бу© и однако в бу и однако в бу
дущем планируется реализация поддержки других броузеров.
Возможность поддержки нескольких версий µ¶te¤¶et ·¸¥³®¤e¤ в ¹i¶¯®º²
205
Обсуждение
Кроме того если у вас нет возможности просмотра сайта в какомлибо броузере можно воспользоваться почтовой рассылкой. Пользователи большинства форумов в том числе и форумов S¡¨£¸¥¡§¨ ¥¢±½¶
и под
писчики рассылок посвященных вебдизайну и вебпрограммированию привыкли к просьбам протестировать сайт а в качестве благодарности вы можете помочь другим людям увидеть их страницы в доступных вам броузерах.
Возможность поддержки нескольких версий I¡ª¡ ³µ¼¯ªª в Æ¡°Ç«
Различные версии броузера §¨£¢§£¨ ©¦ª«¥¢£¢ Á и  поразному об§¨£¢§£¨ ©¦ª«¥¢£¢ Á и  поразному об ©¦ª«¥¢£¢ Á и  поразному оᩦª«¥¢£¢ Á и  поразному об Á и  поразному об
рабатывают CSSкод но Ñ¡§´¥¾¶ как правило не позволяет устаCSSкод но Ñ¡§´¥¾¶ как правило не позволяет устакод но Ñ¡§´¥¾¶ как правило не позволяет устаÑ¡§´¥¾¶ как правило не позволяет уста как правило не позволяет уста
навливать сразу несколько версий этого броузера. Как в таком случае протестировать сайт в более старых но все еще используемых версиях §¨£¢§£¨ ©¦ª«¥¢£¢Ð
Решение
Программное обеспечение Ó¡¢¨±µ« ¸C от Ï¡Í¢¥¶¥¤¨ распространяемое бесплатно позволяет протестировать сайт в броузерах §¨£¢§£¨ ©¦ª«¥¢£¢ версий и на одном компьютере с операционной системой Ñ¡§´¥¾¶. Для этого вам придется пройти несколько этапов но сам способ дей
ствительно эффективен. В качестве основного броузера на вашей ма
шине будет установлен §¨£¢§£¨ ©¦ª«¥¢£¢ а на виртуальных машинах будет доступен §¨£¢§£¨ ©¦ª«¥¢£¢ и .
. Обновите §¨£¢§£¨ ©¦ª«¥¢£¢ до версии если вы еще этого не сделали.
. Загрузите и установите Ó¡¢¨±µ« ¸C с сайта Ï¡Í¢¥¶¥¤¨ Ó¡¢¨±µ« ¸C.
. Загрузите образ виртуальной машины Ó¡¢¨±µ« ¸C Áограничен по вре
мени действия с предустановленным Ï¡Í¢¥¶¥¤¨ Ñ¡§´¥¾¶ и §¨£¢§£¨ ©¦ª«¥¢£¢ для © и © из Центра загрузок Ï¡Í¢¥¶¥¤¨.
Большим пре
имуществом использования этого образа является отсутствие необхо
димости в покупке дополнительной лицензии для запуска Ñ¡§´¥¾¶.
À. Для начала работы с образом виртуальной машины распакуйте ар
хив и запустите Ó¡¢¨±µ« ¸C. Включите проводник файлов образа и отÓ¡¢¨±µ« ¸C. Включите проводник файлов образа и от ¸C. Включите проводник файлов образа и от¸C. Включите проводник файлов образа и от. Включите проводник файлов образа и от
дельная версия Ñ¡§´¥¾¶ запустится в окне на вашем рабочем столе. ­­.­­.£
­­.£­.¤»­¤£­.¦
­­.£­.£áºÑ¤âߢÓÃÓ
206 Глава ´. Кросс«броузерные решения Совет
Режим IE± в IE² На панели ×eve¢oper Too¢s броузера nternet ¡p¢orer Ø есть функция включения режима интерпретации ¹ Она работает по принципу об¹ Она работает по принципу об¹ Она работает по принципу об
ратной совместимости гарантирующему нормальное отображение сайтов не работающих в Ø В этом случае броузер начинает вести себя как предыдуØ В этом случае броузер начинает вести себя как предыдуØ В этом случае броузер начинает вести себя как предыду
щая версия что может решить возникшую проблему Кроме того это дает вам возможность быстро протестировать свой сайт в ¹ если вы по тем или иным причинам не хотите запускать образ виртуальной машины µили же запускаете одну виртуальную машину ÓindoÙs
в системе ac¶
На момент написания настоящей книги Ï¡Í¢¥¶¥¤¨ не предоставляла об
разов виртуальной машины для более ранних версий §¨£¢§£¨ ©¦ª«¥¢£¢ однако если вам действительно крайне необходимо протестировать сайт в более ранних версиях данного броузера чем существуют их автономные версии в которых можно проверить насколько правильно интерпретируется ваш CSSкод. Программу установки нескольких ав
тономных версий §¨£¢§£¨ ©¦ª«¥¢£¢ можно скачать на сайте »¢£´¥¶¥¤¨
но учтите что они могут сильно «капризничать». Как правило в них бесполезно тестировать сценарии на ˵̵SÍ¢¡ª¨ поскольку для их об
работки используется уже установленная на данный момент маши
на ËSÍ¢¡ª¨ а не ее более ранние версии которые были бы установлены с теми версиями §¨£¢§£¨ ©¦ª«¥¢£¢. Однако такой способ вполне подой
дет для разработчиков желающих протестировать свою работу в са
мых старых версиях §¨£¢§£¨ ©¦ª«¥¢£¢.
Примечание
Автономные версии Internet Erer Существуют инсталляторы в теории позволяющие вам запускать несколько версий nternet ¡p¢orer на одном комnternet ¡p¢orer на одном ком ¡p¢orer на одном ком¡p¢orer на одном ком на одном ком
пьютере но я рекомендую вам воздержаться от их использования Посколь
ку является частью ÓindoÙs невозможно запустить две абсолютно разные версии на одной машине и некоторые приемы например использование условных комментариев не будут работать корректно Для тестирования сай
та в различных версиях нужно либо несколько компьютеров либо несколь нужно либо несколько компьютеров либо несколь нужно либо несколько компьютеров либо несколь
ко виртуальных машин
Определение круга броузеров¤ для которых необходимо поддерживать все аспекты дизайна страницы
Как вы еще увидите для старых броузеров можно написать отдельные таблицы стилей а затем определить какую таблицу должна исполь
зовать каждая конкретная версия с помощью условных комментари
ев. Огромным преимуществом верстки страницы с применением CSS ­­­¤£­.¹­ÍÑÒ
Указание базовой таблицы стилей для самых старых броузеров
207
является доступность контента всем пользователям вне зависимости от того насколько старым броузером они пользуются. При этом нужно четко осознавать что вы не обязаны представить посетителям вашего сайта использующим © в точности то же что пользователям © или последней версии ¡¢£¤¥¦.
Решение
Соглашение с заказчиком или политика вашей компании почти полно
стью определяет для вас границы реализации для различных броузе
ров однако если у вас есть право голоса по этому вопросу вы можете об
ратиться к схеме çã Ò¢µ´£´ ¢¥¾¶£¢ S±ªª¥¢¨
которая послужит опо
рой для обоснования подхода к реализации поддержки определенных функций в различных броузерах. По сути с помощью данной схемы разработчики çµ²¥¥Ú определяют степень поддержки посетителей сво
его сайта использующих различные броузеры. Поскольку домашняя страница çµ²¥¥Ú является самой посещаемой в мире они располагают достаточным количеством данных для обоснования своих решений.
На мой взгляд нельзя закрывать доступ к контенту вашего сайта ни для одного пользователя как вы увидите несколько позже для самых старых броузеров можно создать даже простую λϺверсию сайта вовсе не используя CSS. Для более новых броузеров еще не поддержиCSS. Для более новых броузеров еще не поддержи. Для более новых броузеров еще не поддержи
вающих спецификации CSS . и CSS Áв настоящее время получаюCSS . и CSS Áв настоящее время получаю. и CSS Áв настоящее время получаюCSS Áв настоящее время получаю Áв настоящее время получаю
щую широкое распространение можно ограничиться более лаконич
ным дизайном – данный подход вполне приемлем для §¨£¢§£¨ ©¦ª«¥¢§¨£¢§£¨ ©¦ª«¥¢ ©¦ª«¥¢©¦ª«¥¢
£¢ . В разделе «Достижение прозрачности изображения в формате ¸Ò в §¨£¢§£¨ ©¦ª«¥¢£¢ » мы рассмотрим два способа решения проблемы связанной с отсутствием поддержки прозрачности формата ¸Ò броу¸Ò броу броу
зером ©. При этом разработчик может пойти одним из двух путей: найти способ отображения всех особенностей дизайна включая про
зрачность или создать более простую версию сайта с использованием файлов в формате Ò. Схема çã Ò¢µ´£´ ¢¥¾¶£¢ S±ªª¥¢¨ может поÒ. Схема çã Ò¢µ´£´ ¢¥¾¶£¢ S±ªª¥¢¨ может по. Схема çã Ò¢µ´£´ ¢¥¾¶£¢ S±ªª¥¢¨ может по
мочь вам в выборе решения и предоставит необходимую информацию для его объяснения клиенту.
Указание базовой таблицы стилей для самых старых броузеров
В настоящее время технология CSS получила настолько широкое расCSS получила настолько широкое рас получила настолько широкое рас
пространение в вебсреде что пользователям очень старых броузеров таких как £¨¶Íµª£ À доступны лишь крайне ограниченные возмож£¨¶Íµª£ À доступны лишь крайне ограниченные возмож À доступны лишь крайне ограниченные возмож
ности современных сайтов. Однако с ними также следует считаться по крайней мере обеспечивая возможность нормального восприятия кон
тента и отсутствие сбоев вызванных использованием современных до
­­¤». .­
208 Глава ´. Кросс«броузерные решения стижений CSS. Для таких устаревших броузеров нужно создать специCSS. Для таких устаревших броузеров нужно создать специ. Для таких устаревших броузеров нужно создать специ
альную простую таблицу стилей а основную таблицу стилей привязать не распознаваемыми ими средствами.
Решение
£¨¶Íµª£ À §¨£¢§£¨ ©¦ª«¥¢£¢ À и другие старые броузеры не поддержи
вают возможность ссылки на таблицу стилей с помощью метода Ðimport а благодаря особенностям CSS эта непонятная команда будет ими про
игнорирована. Мы можем воспользоваться этим для выполнения нашей задачи: более старые броузеры прочтут специально созданный для них набор стилей а более новые броузеры понимающие команду Ðimport смогут увидеть полную таблицу стилей.
Внутри элемента head вашего документа необходимо указать ссылку на базовую таблицу стилей с помощью элемента link – она будет прочтена всеми броузерами поддерживающими CSS. Затем привяжите полную таблицу стилей Áили таблицы стилей с помощью метода Ðimport кото
рый будет пропущен без внимания старыми броузерами:
­¢ß­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”>
<html ­mlns¡”http//www.w.or/1¢¢¢/­html” ­mllan¡”en” lan¡”en”> <head> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <title>ervin a basic stylesheet</title>
<link rel¡”stylesheet” href¡”basicËbasic.css” type¡”te­t/css” media¡”screen” /> <stle te=”tet/css” ­edia=”screen”> ¢i­ort “basic_deaultcss”; </stle> </head> <body> <div class¡”content”> <h1>ervin a basic style sheet to old browsers</h1> <p> is now used so e­tensively on the eb that …</p> </div> </body></html>
Представленная ниже таблица стилей ³¦Ç³¦. содержит несколь
ко простых правил стилей обеспечивающих читаемость страницы. Если у вас есть возможность тестирования в броузере £¨¶Íµª£ À
таблицу Версию À. данного броузера можно загрузить из архива £Ì¥«¨.¥¢· Á ­­
.»­.á»­µ­¿.Ó она продолжает работать под Ñ¡§
´¥¾¶ Ǹ и Ó¡¶¨µ. Указание базовой таблицы стилей для самых старых броузеров
209
можно немного усложнить не рискуя возникновением сбоев. В настоя
щее время такими старыми броузерами пользуются единицы. Отображе
ние для них документа в базовом стиле – хороший результат поскольку он по крайней мере обеспечивает им возможность прочитать содержимое сайта чего конечно недостаточно для остальных пользователей. ­¢ßÍ.
body backroundcolor fff color marin paddin « body¨ h1¨ h¨ h¨ h®¨ h¨ h©¨ ol¨ ul¨ li¨ p fontfamily verdana¨ arial¨ helvetica¨ sansserif color Помните что современные броузеры прочтут обе таблицы стилей по
этому в основной из них помимо добавления дополнительных свойств необходимо переопределить те свойства базовой таблицы стилей кото
рые вы хотели бы отображать подругому в более новых броузерах.
Чтобы продемонстрировать данный подход на практике я добавила не
сколько правил в следующий код результат его обработки показан на рис. . и .:
Рис. 7.2. Вид документа в Ú­ ¿.Ó
210 Глава ´. Кросс«броузерные решения ­¢ßͤ£­.
h1 color cc marin .content backroundcolor ececec paddin .©em Рис. 7.3. Вид того же документа в Ù ¯ Обсуждение
Броузеры с минимальной поддержкой CSS доставляют больше всего хлопот поскольку они понимают достаточно чтобы предпринять по
пытку интерпретации кода но недостаточно для того чтобы сделать это правильноÚ Расширенные возможности CSS применяемые при разра
ботке среднего современного сайта скорее всего будут отображены ста
рым броузером искаженно или вообще не позволят открыть страницу. Скрытие стилей с помощью метода Ðimport позволит избежать таких сбо
ев. На самом деле даже не обязательно добавлять базовую таблицу сти
лей – если вы присоединяете свою таблицу стилей с помощью Ðimport то в старых броузерах документ будет отображен в соответствии с их вну
тренней таблицей стилей.
Однако использование базовой таблицы стилей связанной с докумен
том при помощи ссылки обладает дополнительным преимуществом: Что такое режим совместимости и как его избежать
211
это позволит избежать «мелькания неотформатированного контента»
. Этот досадный сбой состоит в том что пользователи §¨£¢§£¨ ©¦ª«¥¢£¢ на долю секунды видят неотформатированный документ Áоформленный в соответствии с используемой по умолчанию таблицей стилей пока ваша таблица стилей находится в процессе загрузки. Добавление ссыл
ки перед выражением импорта – как в данном примере – позволяет ре
шить описанную проблему. Таким образом мы можем выразить свое лояльное отношение к оставшимся пользователям неуклюжих броузе
ров с помощью всего лишь одной уловкиÚ
Что такое режим совместимости и как его избежать
Вы разрабатываете сайт на ÇλϺ и CSS тестируете его в §¨£¢§£¨ ©¦ÇλϺ и CSS тестируете его в §¨£¢§£¨ ©¦ и CSS тестируете его в §¨£¢§£¨ ©¦CSS тестируете его в §¨£¢§£¨ ©¦ тестируете его в §¨£¢§£¨ ©¦§¨£¢§£¨ ©¦ ©¦©¦
ª«¥¢£¢ все казалось бы отлично но... затем вы открываете тот же до все казалось бы отлично но... затем вы открываете тот же до
кумент в ¡¢£¤¥¦ и Sµ¤µ¢¡ и обнаруживаете что все отображается совер¡¢£¤¥¦ и Sµ¤µ¢¡ и обнаруживаете что все отображается совер и Sµ¤µ¢¡ и обнаруживаете что все отображается соверSµ¤µ¢¡ и обнаруживаете что все отображается совер и обнаруживаете что все отображается совер
шенно подругому. Что же происходитÐ
Решение
Помимо сбоев в §¨£¢§£¨ ©¦ª«¥¢£¢ причиной этого может послужить ра§¨£¢§£¨ ©¦ª«¥¢£¢ причиной этого может послужить ра ©¦ª«¥¢£¢ причиной этого может послужить р੦ª«¥¢£¢ причиной этого может послужить ра причиной этого может послужить ра
бота броузера в режиме совместимости. У многих современных броу
зеров есть два режима отображения. Режим совместимости отобража
ет документ как это сделали бы старые броузеры такие как £¨¶Íµª£ À и §¨£¢§£¨ ©¦ª«¥¢£¢ À и с соответствующими ошибками. Стандартный режим отображения обрабатывает документы в соответствии со специ
фикацией ÑC Áили максимально приближенно к нимÂ.
• Плохо структурированные документы содержащие устаревшую ин
формацию в описании doctype Áили вовсе не имеющие описания doc
type отображаются в режиме совместимости.
• Если в документе содержится чтолибо перед выражением T в том числе и пролог ÇϺ необходимый для документов на ÇλϺ §¨£¢§£¨ ©¦ª«¥¢£¢ отобразит его в режиме совместимости.
• Документы созданные с помощью строгого стандарта λϺ À или ÇλϺ Áс соответствующей декларацией отображаются в стан Áс соответствующей декларацией отображаются в стан
дартном режиме.
Переключение между стандартным режимом и режимом совместимо
сти в зависимости от описания типа документа называется переключе
нием режима отображения. Все предельно просто: используйте описа
ние типа документа переводящее броузер в стандартный режим и убе
дитесь что элемент doctype идет первым по порядку чтобы © не на что было пожаловаться. Ниже приведен список описаний типа документа ­­.­.£.
212 Глава ´. Кросс«броузерные решения использование которых осуществляет переключение броузеров §¨£¢§£¨ ©¦ª«¥¢£¢ §¨£¢§£¨ ©¦ª«¥¢£¢ ÏµÍ äª£¢µ Sµ¤µ¢¡ ¡¢£¤¥¦ и C²¢¥½£ в стандартный режим.
ÈÃ¥À 4.É1 說£¡¦
<T T I “////T T ®.1 Transitional//” “http//www.w.or/T/html®/loose.dtd”>
ÈÃ¥À 4.É1 ʯ¦ª
<T T I “////T T ®.1 ¤rameset//” “http//www.w.or/T/html®/frameset.dtd”>
ÈÃ¥À 4.É1 S¯
<T T I “////T T ®.1//” “http//www.w.or/T/html®/strict.dtd”>
ËÈÃ¥À 1.É Ã¯¦¡£¡¦
<T html I “////T T 1. Transitional//” “http//www.w.or/T/­html1/T/­html1transitional.dtd”>
ËÈÃ¥À 1.É Ê¯¦ª
<T html I “////T T 1. ¤rameset//” “http//www.w.or/T/­html1/T/­html1frameset.dtd”>
ËÈÃ¥À 1.É S¯
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”>
ËÈÃ¥À 1.1
<T html I “////T T 1.1//” “http//www.w.or/T/­html11/T/­html11.dtd”>
Документы на ÇλϺ должны содержать в начале пролог ÇϺ на
пример такой:
<£­l version=”1” encodin=”ut ”£><T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”>
Á</html>
К сожалению изза него §¨£¢§£¨ ©¦ª«¥¢£¢ перейдет в режим совме§¨£¢§£¨ ©¦ª«¥¢£¢ перейдет в режим совме ©¦ª«¥¢£¢ перейдет в режим совм婦ª«¥¢£¢ перейдет в режим совме перейдет в режим совме
стимости поэтому придется его убрать:
Полный список возможного содержания ´¥Í¨¹ª£ и информация о его вли
янии на работу различных броузеров доступны по адресу ­­­£¤­. ­­ ­¤­­ ­. ­.
Задание разных таблиц стилей для µ¶te¤¶et ·¸¥³®¤e¤ ° и ´
213
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”>
Á</html>
Обсуждение
Самыми известными являются особенности режима совместимости §§
¨£¢§£¨ ©¦ª«¥¢£¢. При его включении броузер использует неверную блоч ©¦ª«¥¢£¢. При его включении броузер использует неверную блоч©¦ª«¥¢£¢. При его включении броузер использует неверную блоч. При его включении броузер использует неверную блоч
ную модель CSS которая использовалась в §¨£¢§£¨ ©¦ª«¥¢£¢ и .. ТаCSS которая использовалась в §¨£¢§£¨ ©¦ª«¥¢£¢ и .. Та которая использовалась в §¨£¢§£¨ ©¦ª«¥¢£¢ и .. Та§¨£¢§£¨ ©¦ª«¥¢£¢ и .. Та ©¦ª«¥¢£¢ и .. Т੦ª«¥¢£¢ и .. Та и .. Та
ким образом вместо того чтобы добавить внутренний отступ и рамку к окошку путем прибавления к его ширине Á пикселов пикселов с каждой стороны Áитого À пикселов броузер отображает окошко шириной в пикселов и отнимает от этого значения величину отсту
пов. На рис. .À показаны различия между двумя режимами.
Режим совместимости
Стандартный режим
Рис. 7.4. Отображение документа в режиме совместимости и в стандартном режиме в Ñ­­ Ò¦
При разработке нового сайта я рекомендую вам стремиться к соответ
ствию требованиям стандартного режима какое бы описание типа до
кумента вы ни использовали. Новые броузеры скорее всего поддержи
вают стандарты ÑC и выводят документ соответствующим образом вне зависимости от того поддерживают ли они переключение режима отображения. В режиме совместимости броузеры ведут себя слишком уж странно поэтому лучше с ним не связываться и оградить себя от проблем с самого начала.
Задание разных таблиц стилей для I¡ª¡ ³µ¼¯ªª 6 и 7
На момент написания данной книги броузер §¨£¢§£¨ ©¦ª«¥¢£¢ достав§¨£¢§£¨ ©¦ª«¥¢£¢ достав ©¦ª«¥¢£¢ доста⩦ª«¥¢£¢ достав достав
лял разработчикам немало головной боли поскольку количество его пользователей все еще велико а сам броузер крайне плохо поддержива
ет большую часть спецификации CSS выдавая кучу ошибок. Ï¡Í¢¥¶¥¤¨ исправила наиболее известные из них и реализовала поддержку спец
ификации CSS. в §¨£¢§£¨ ©¦ª«¥¢£¢ однако и он во многом уступает современным броузерам таким как §¨£¢§£¨ ©¦ª«¥¢£¢ . Поэтому оста§¨£¢§£¨ ©¦ª«¥¢£¢ . Поэтому оста ©¦ª«¥¢£¢ . Поэтому ост੦ª«¥¢£¢ . Поэтому оста . Поэтому оста
ется группа пользователей не имеющих желания или возможности об
21 Глава ´. Кросс«броузерные решения новить свой броузер и хотя среди пользователей © наблюдается тен© наблюдается тен наблюдается тен
денция к переходу к © их количество пока остается значительным и с этим нужно считаться. Решение
Самый эффективный метод связи определенных правил стиля с кон
кретными версиями §¨£¢§£¨ ©¦ª«¥¢£¢ состоит в использовании услов§¨£¢§£¨ ©¦ª«¥¢£¢ состоит в использовании услов ©¦ª«¥¢£¢ состоит в использовании усло⩦ª«¥¢£¢ состоит в использовании услов состоит в использовании услов
ных комментариев. Условные комментарии – характерная особен
ность §¨£¢§£¨ ©¦ª«¥¢£¢ с их помощью можно выделить часть λϺ
кода и определить при каких условиях броузер должен его обработать а при каких – проигнорировать. Условные комментарии можно исполь
зовать для того чтобы только определенным версиям © был доступен тег <link>.
Прежде всего необходимо создать таблицу стилей содержащую прави
ла для предотвращения ошибок в §¨£¢§£¨ ©¦ª«¥¢£¢ – не нужно копи§¨£¢§£¨ ©¦ª«¥¢£¢ – не нужно копи ©¦ª«¥¢£¢ – не нужно коп試ª«¥¢£¢ – не нужно копи – не нужно копи
ровать всю основную таблицу стилей достаточно лишь переписать или добавить необходимые правила. Затем разместите внутри элемента head вашего документа ссылку на нее окруженную условными комментари
ями например:
<Ìif I ©Î><link rel¡”stylesheet” type¡”te­t/css” href¡”ie©fi­es.css” /><ÌendifÎ>
Благодаря приведенному выше коду только §¨£¢§£¨ ©¦ª«¥¢£¢ сможет «увидеть» таблицу стилей ieiescss. В следующем коде таблица сти
лей будет доступна только ©:
<Ìif I Î><link rel¡”stylesheet” type¡”te­t/css” href¡”iefi­es.css” /><ÌendifÎ>
Следующий код объявляет таблицу стилей доступной для версий §¨£¢§¨£¢
§£¨ ©¦ª«¥¢£¢ и ниже:
<Ìif lte I Î><link rel¡”stylesheet” type¡”te­t/css” href¡”iefi­es.css” /><ÌendifÎ>
Условные комментарии должны располагаться внутри элемента head вашего документа причем после основной таблицы стилей иначе пра
вила написанные специально для © будут переопределены правила© будут переопределены правила будут переопределены правила
ми содержащимися в основной таблице стилей.
Синтаксис такого условного комментария дает разработчику много до
полнительных возможностей. Дополнительную информацию об услов
ных комментариях можно получить в документации S¡¨£¸¥¡§¨ CSS Уход от наиболее распространенных ошибок в µ¶te¤¶et ·¸¥³®¤e¤ ° и ´
215
ߣ¤£¢£§Í£.
В последующих решениях мы рассмотрим способы исполь
зования условных комментариев для указания дополнительной та
блицы стилей а также файла со сценарием на ˵̵SÍ¢¡ª¨ для §¨£¢§£¨ ©¦ª«¥¢£¢ .
Уход от наиболее распространенных ошибок в I¡ª¡ ³µ¼¯ªª 6 и 7
На текущий момент самыми «проблемными» броузерами остаются §§
¨£¢§£¨ ©¦ª«¥¢£¢ Áи в меньшей степени Â. Используя накопившиеся ме ©¦ª«¥¢£¢ Áи в меньшей степени Â. Используя накопившиеся м婦ª«¥¢£¢ Áи в меньшей степени Â. Используя накопившиеся ме Áи в меньшей степени Â. Используя накопившиеся ме
тодические наработки вы сможете обеспечить надежную работу своих сайтов в этих броузерах не отказываясь при этом от создания сложных макетов страниц позволяющих получить все преимущества поддерж
ки технологии CSS последними версиями броузеров.
Решение
Приведу свои соображения по поводу различных методов работы с CSS и советы по обеспечению нормального отображения сайтов §¨£¢§£¨ ©¦§¨£¢§£¨ ©¦ ©¦©¦
ª«¥¢£¢ и .
Процесс разработки
Следующая схема работы помогает мне избежать большинства возмож
ных ошибок © и . Работайте с самым современным броузером
Изначально следует разрабатывать сайт с расчетом на современные бро
узеры хорошо поддерживающие спецификацию CSS например поCSS например по например по
следние версии ¡¢£¤¥¦ 䪣¢µ и Sµ¤µ¢¡. Поддержка броузерами стандар¡¢£¤¥¦ 䪣¢µ и Sµ¤µ¢¡. Поддержка броузерами стандар 䪣¢µ и Sµ¤µ¢¡. Поддержка броузерами стандар䪣¢µ и Sµ¤µ¢¡. Поддержка броузерами стандар и Sµ¤µ¢¡. Поддержка броузерами стандарSµ¤µ¢¡. Поддержка броузерами стандар. Поддержка броузерами стандар
тов CSS становится все более полной а вовсе не наоборот поэтому на
писанный код также должен соответствовать спецификации посколь
ку в этом случае он будет корректно отображаться будущими броузера
ми. В процессе разработки сайта я никогда не открываю его в §¨£¢§£¨ ©¦ª«¥¢£¢ поскольку в этом случае может быть трудно удержаться от на поскольку в этом случае может быть трудно удержаться от на
писания дополнительного кода для исправления найденных ошибок. Для начала нужно убедиться что сайт нормально работает в броузерах с хорошей поддержкой CSS а уже потом заниматься поправками для остальных броузеров.
Проведите валидацию ÀÁÂÃ- и SS-кода
Если ваша разметка соответствует стандартам ÑC то возникающие в старых броузерах ошибки будет легче исправить. Броузеры поразному ­­£.­­.¤­­
216 Глава ´. Кросс«броузерные решения обрабатывают код в который закрались ошибки и потому незакрытый тег <div> или пропущенная точка с запятой в правиле стиля может при
вести к досадным сбоям в ходе дальнейшей разработки. Поэтому перед тем как продолжить обязательно воспользуйтесь сервисом валидации CSSкода и разметки документа ÑC
и проверьте свой документ на на
личие ошибок. Протестируйте сайт в других современных броузерах
Затем посмотрите как сайт отображается в других современных броу
зерах: ¡¢£¤¥¦ 䪣¢µ Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь¡¢£¤¥¦ 䪣¢µ Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь 䪣¢µ Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь䪣¢µ Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне довольSµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне довольC²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь и §¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь§¨£¢§£¨ ©¦ª«¥¢£¢ . Мне доволь ©¦ª«¥¢£¢ . Мне доволь©¦ª«¥¢£¢ . Мне доволь . Мне доволь
но редко приходится вносить в код какиелибо исправления для этих броузеров и они как правило незначительны и касаются реализации отдельных элементов структуры документа. Для современных броузе
ров я никогда не использую хитроумные приемы или альтернативные таблицы стилей поскольку всегда можно найти более простой способ решения проблемы. Проверьте сайт в I¡ª¡ ³µ¼¯ªª 6 и 7
Если ваш CSSкод прошел валидацию и корректно обрабатывается большинством современных броузеров то пришло время исправлять ошибки его интерпретации старыми броузерами. Я твердо придержи
ваюсь мнения что не стоит нагромождать свой код дополнениями предназначенными для устаревших броузеров.
Скорее всего при просмотре сайта в © вы обнаружите какиелибо про© вы обнаружите какиелибо про вы обнаружите какиелибо про
блемы – возможно небольшие несоответствия вроде лишних отступов между элементами страницы или более серьезные недочеты – напри
мер когда определенные части вашей страницы «уезжают» из предна
значенной для них области или вовсе исчезают. В такой ситуации глав
ное – сохранять спокойствие. Большинства сбоев © можно с легкостью избежать изменив или добавив несколько правил стилей специально для этого броузера.
То же самое можно сказать и о © с тем лишь исключением что этот броузер работает более корректно.
Добавьте таблицы стилей¤ предназначенные для конкретных броузеров¤ с помощью условных комментариев
На данном этапе нужно добавить дополнительные таблицы стилей для © иÄили © с помощью условных комментариев. Этот метод был рас иÄили © с помощью условных комментариев. Этот метод был рас© с помощью условных комментариев. Этот метод был рас с помощью условных комментариев. Этот метод был рас
смотрен в предыдущем разделе. Такую таблицу стилей нужно добавить в заголовок Áhead вашего документа после уже указанных в его λϺ
коде таблиц стилей чтобы содержащиеся в них правила написанные специально для §¨£¢§£¨ ©¦ª«¥¢£¢ и переопределили аналогичные правила в основной таблице стилей.
­­»¤­..
Уход от наиболее распространенных ошибок в µ¶te¤¶et ·¸¥³®¤e¤ ° и ´
217
Исправление ошибок¤ возникающих в I¡ª¡ ³µ¼¯ªª
Теперь можно постепенно начать исправление возникающих в §¨£¢§£¨ ©¦ª«¥¢£¢ и ошибок добавляя необходимые правила в альтернатив и ошибок добавляя необходимые правила в альтернатив
ную таблицу стилей будучи в полной уверенности что они будут ис
пользованы только теми броузерами для правильной работы которых они необходимы. Использование рассматриваемых ниже приемов по
зволяет избежать большинства проблем §¨£¢§£¨ ©¦ª«¥¢£¢ . Для исправ§¨£¢§£¨ ©¦ª«¥¢£¢ . Для исправ ©¦ª«¥¢£¢ . Для испра⩦ª«¥¢£¢ . Для исправ . Для исправ
ления сбоев §¨£¢§£¨ ©¦ª«¥¢£¢ обычно необходима лишь часть из них. В © редко встречаются «баги» отсутствующие в © а алгоритм их ис© редко встречаются «баги» отсутствующие в © а алгоритм их ис редко встречаются «баги» отсутствующие в © а алгоритм их ис© а алгоритм их ис а алгоритм их ис
правления как правило один и тот же.
Проверьте ¨ÈÁɳ
Убедитесь что в первой строчке вашего документа указано правильное описание типа документа. О важности использования правильного эле
мента doctype говорилось в предшествующем разделе «Что такое режим совместимости и как его избежатьл. Указание неправильного типа до
кумента может привести к тому что ваши документы будут выглядеть довольно странно. Поэтому прежде чем начать чтото предпринимать для исправления ошибок убедитесь что все броузеры в том числе © и отображают страницу в стандартном режиме.
Отсутствие поддержки свойства ´¡-®Ê® в I³6
§¨£¢§£¨ ©¦ª«¥¢£¢ не поддерживает свойство minheiht задающее ми
нимальную высоту элемента а вместо этого интерпретирует значение свойства heiht в этом смысле. Таким образом в других броузерах зна
чение свойства heiht определяет фиксированную высоту элемента а §¨£¢§£¨ ©¦ª«¥¢£¢ воспринимает его в качестве значения минималь§¨£¢§£¨ ©¦ª«¥¢£¢ воспринимает его в качестве значения минималь ©¦ª«¥¢£¢ воспринимает его в качестве значения минималь©¦ª«¥¢£¢ воспринимает его в качестве значения минималь воспринимает его в качестве значения минималь
ной высоты поэтому размер блока по вертикали может увеличиваться и превысить задуманные для него параметры.
Чтобы избежать такой ситуации достаточно использовать свойство heiht в таблице стилей для © в том же качестве что и свойство min
heiht в основной таблице стилей.
Свойство ®º«Ãº¾½
В движке © и есть таинственный компонент – свойство hasayout причина большого количества самых причудливых «багов». Существу
ют элементы ответственные за размер и расположение содержащегося в них контента считается что они обладают этим свойством. Прочие элементы определяют свой размер и расположение за счет родительско
го элемента или более отдаленного предка. Если элемент не определя
ет структуру своего содержимого это может привести к странным по
следствиям – например исчезновению части контента или неправиль
ному отображению структуры документа. Некоторые элементы среди которых ячейки таблицы по умолчанию обладают свойством hasayout чего однако нельзя сказать об элементах div. Если элементу задать та
кие CSSсвойства как float со значением left или riht он также начи
218 Глава ´. Кросс«броузерные решения нает определять структуру документа что приводит к решению боль
шинства возникающих проблем. Самое главное – найти CSSсвойство которое изменит статус элемента но не повредит структуре документа.
Для © присвоить элементу свойство hasayout можно задав значение â его свойству heiht. Как уже было сказано выше © воспринимает свойство heiht как minheiht поэтому такое значение определит мини
мальную высоту элемента что не окажет никакого влияния на струк
туру документа а сам элемент попрежнему сможет вместить весь необ
ходимый контент. Конечно такие правила нужно указывать в таблице стилей предназначенной специально для ©. © напротив совершенно верно обрабатывает свойство heiht поэто
му такой трюк в данном случае не сработает. Однако вместо этого мож
но задать любое даже нулевое значение свойству minheiht что также изменит статус элемента в ©. Это вполне надежный способ поскольку значением свойства minheiht по умолчанию также является . Не всегда удается сразу определить какой элемент требует добавления такого «триггера» изменения статуса но обычно виновника всех бес
порядков на странице можно вычислить поступательно. Вначале я рас
сматриваю элементы с самой высокой степенью вложенности т. е. если несколько блоков div вложены друг в друга то я добавляю значение вы
соты для последнего из них обновляю страницу и смотрю привело ли это к какимто изменениям. Если все осталось попрежнему я перехо
жу к div на уровень выше и т. д.
Относительное позиционирование элемента
Если изменение статуса элемента другими способами не дает желаемо
го результата можно попробовать присвоить элементу свойство posi
tion со значением relative. Обратите внимание что после этого все его дочерние элементы будут располагаться относительно него. Если такой прием не нарушает дизайн сайта вполне можно им воспользоваться.
Прочие ошибки
Приведенные выше приемы помогут вам решить самые серьезные про
блемы однако вы можете столкнуться и с менее значительными недо
статками интерпретации такими как неправильно рассчитанные от
ступы или незначительное смещение элементов. Самое время вспом
нить о том что вы имеете дело со старыми броузерами выдающи
ми кучу ошибок поэтому не нужно бояться изменять правила стилей в специально предназначенных для них таблицах стилей регулируя величину отступов или перемещая элементы до тех пор пока не будет достигнут желаемый результат. Использование условных комментари
ев гарантирует отсутствие какихлибо сбоев при просмотре сайта в дру
гих броузерах. Надеюсь вам не придется делать слишком много допол
нительной работы такого рода поскольку при изменении структуры страницы скорее всего придется все создавать заново иногда прихо
дится буквально по кусочкам собирать мозаику сложной страницыÚ
Достижение прозрачности изображения в формате »¼½ в µ¶te¤¶et ·¸¥³®¤e¤ °
219
Достижение прозрачности изображения в формате NË в I¡ª¡ ³µ¼¯ªª 6
Одним из самых потрясающих дополнений версии броузера §¨£¢§£¨ ©¦ª«¥¢£¢ стала поддержка прозрачности изображений ¸Ò. Как уже было сказано в главе при обсуждении фоновых изображений с помо
щью изображений в формате ¸Ò действительно можно достичь про¸Ò действительно можно достичь про действительно можно достичь про
зрачности: их можно отображать поверх фона различных цветов без пиксельного галоэффекта и использовать для создания визуальных эффектов с применением непрозрачных фоновых слоев. Однако если вы просто разместите такие изображения на странице пользователи §¨£¢§£¨ ©¦ª«¥¢£¢ увидят непрозрачные картинки как показано на рис. .. Есть ли какойнибудь способ обойти этот досадный недочет и подружить © с ¸ÒÐ
Рис. 7.5. Отображение прозрачных изображений ÚÙ в Ñ­­ Ò¦ Ã Решение
Чтобы изображения в формате ¸Ò отображались в §¨£¢§£¨ ©¦ª«¥¢£¢ прозрачными придется использовать небольшой сценарий на ˵̵
SÍ¢¡ª¨. Он был создан Аароном Будманом Á°µ¢¥§ ±´½µ§Â
и в дальней
­­..­áÕ­â­ ­.¦
220 Глава ´. Кросс«броузерные решения шем доработан Дрю МакЛелланом ÁÛ¢£¾ Ïͺ£««µ§Â с тем чтобы обеспе
чить поддержку фоновых изображений.
Прежде всего создадим прозрачный Ò размером × ª¦ и сохраним его под именем «.°².
Затем создадим новый файл сценария на ˵̵SÍ¢¡ª¨ Áкоторый будет пред˵̵SÍ¢¡ª¨ Áкоторый будет пред Áкоторый будет пред
назначен только для §¨£¢§£¨ ©¦ª«¥¢£¢  и добавим в него следующий код:
­¢ß ­.Á
function addoadventfunc var oldonload ¡ window.onload if typeof window.onload ¡ ‘function’ window.onload ¡ func else window.onload ¡ function if oldonload oldonload func var bsleiht ¡ function function fnoadns var rslt ¡ naviator.appªersion.match/I ØdÕØ.ØdÕ/¨ ‘’ var itsAll¬ood ¡ rslt ¡ null ÙÙ umberrsltÌ1Î >¡ . for var i ¡ document.all.lenth 1¨ ob¦ ¡ null ob¦ ¡ document.allÌiÎ i if itsAll¬ood ÙÙ
ob¦.currenttyle.backroundImae.match/Ø.pn/i ¡ null fn¤i­nob¦ ob¦.attachvent“onpropertychane”¨ fnropertyhaned if ob¦.taame¡¡’A’ ÚÚ ob¦.taame¡¡’IT’ ÙÙ ob¦.style.position ¡¡ ‘’ ob¦.style.position ¡ ‘relative’ function fnropertyhaned if window.event.propertyame ¡¡ “style.backroundImae” var el ¡ window.event.srclement if el.currenttyle.backroundImae.match/­Ø.if/i ­­­ ¤.­µÓÅ ­¤­ ¤
Достижение прозрачности изображения в формате »¼½ в µ¶te¤¶et ·¸¥³®¤e¤ °
221
var b ¡ el.currenttyle.backroundImae var src ¡ b.substrin¨b.lenth el.filters.item.src ¡ src el.style.backroundImae ¡ “url/im/shim.if” function fn¤i­nob¦ var mode ¡ ‘scale’ var b ¡ ob¦.currenttyle.backroundImae var src ¡ b.substrin¨b.lenth if ob¦.currenttyle.backroundepeat ¡¡ ‘norepeat’ mode ¡‘crop’ ob¦.style.filter ¡“proidImaeTransform.icrosoft.AlphaImaeoadersrc¡’”Õ src Õ “’¨ si¥inethod¡’” Õ mode Õ “’” ob¦.style.backroundImae ¡ “url/im/shim.if” return init function if naviator.platform ¡¡ “in” ÙÙ naviator.appame ¡¡“icrosoft Internet ­plorer” ÙÙ window.attachvent addoadventfnoadns bsleiht.init Чтобы данный сценарий выполнялся только в §¨£¢§£¨ ©¦ª«¥¢£¢ его нужно добавить с помощью условных комментариев:
­¢ß ­. ­ ©фрагментª
<Ìif I ©Î><script type¡”te­t/¦avascript” src¡”bsleiht.¦s”></script><ÌendifÎ>
Если вы сохраните страницу на данном этапе и откроете ее в §¨£¢§£¨ ©¦ª«¥¢£¢ окажется что фоновое изображение элемента div с идентифи
катором content исчезло. Его можно вернуть задав ему свойство heiht. Достаточно значения 1« поскольку §¨£¢§£¨ ©¦ª«¥¢£¢ интерпретиру§¨£¢§£¨ ©¦ª«¥¢£¢ интерпретиру ©¦ª«¥¢£¢ интерпретиру©¦ª«¥¢£¢ интерпретиру интерпретиру
ет его как минимальный размер элемента и будет растягивать блок до тех пор пока он не сможет вместить все вложенные элементы. Посколь
ку это правило стиля предназначено только для §¨£¢§£¨ ©¦ª«¥¢£¢ его нужно разместить либо внутри элемента style в заголовке head вашего документа либо добавить в созданную специально для этого броузера 222 Глава ´. Кросс«броузерные решения таблицу стилей привязанную к документу с помощью условных ком
ментариев:
­¢ß ­. ­ ©фрагментª
<Ìif I ©Î><style type¡”te­t/css”>content heiht 1« </style><script type¡”te­t/¦avascript” src¡”bsleiht.¦s”></script><ÌendifÎ>
Обновите страницу в §¨£¢§£¨ ©¦ª«¥¢£¢ и вы увидите что поверх фона будет отображаться прозрачная заливка как показано на рис. ..
Рис. 7.6. Отображение прозрачных изображений ÚÙ в Ñ­­ Ò¦ Ã
Обсуждение
Использование описанного приема может вызвать массу других непри
ятностей. Например может возникнуть впечатление будто некоторые области страницы покрыты фоновым изображением делая ссылки не
доступными для перехода а поля для ввода текста – не принимающими фокус. Эту проблему чаще всего можно решить добавив элементу опи
Корректное отображение в µ· ¾ сайта соответствующего стандартам ¹­
223
сание positionrelative однако это также усложняет нашу задачу. Тем не менее благодаря возможности использования полностью прозрач
ных изображений можно добиться большей гибкости дизайна а если подходить к делу тщательно и аккуратно все будет отлично работать.
Совет
Без хитростей Существует и другой способ решения данной проблемы¥ мож
но использовать отдельные изображения созданные специально для nternet ¡p¢orer
£ путем указания ссылки на них в соответствующей таблице стилей чтобы при просмотре сайта в этом броузере они отображались вместо ÚÑÏ При этом сайт будет выглядеть немного подругому но учитывая что nternet ¡p¢orer
£ отстает от современности уже на две версии и постепенно теряет своих пользователей такое решение вполне приемлемо В настоящее время мы часто комбинируем эти методы¥ где это представляется возможным мы ис
пользуем ÏË а если это слишком сложно в данной ситуации применяем сцеÏË а если это слишком сложно в данной ситуации применяем сце а если это слишком сложно в данной ситуации применяем сце
нарий на ½ava¯cript
Корректное отображение в I³ 8 сайта¤ соответствующего стандартам Æ3
Как уже было сказано ранее §¨£¢§£¨ ©¦ª«¥¢£¢ может отображать сай§¨£¢§£¨ ©¦ª«¥¢£¢ может отображать сай ©¦ª«¥¢£¢ может отображать са驦ª«¥¢£¢ может отображать сай может отображать сай
ты так же как это сделала бы его предыдущая версия в том числе и при
сваивая части из них свойство hasayout и вызывая множество несоот
ветствий с которыми дизайнеры боролись на протяжении многих лет. Как удостовериться что © использует самый современный режим отображения а не имитирует поведение © при отображении вашего вебсайтаÐ
Решение
§¨£¢§£¨ ©¦ª«¥¢£¢ – очень мощный броузер и вам наверняка хотелось бы чтобы он не жалел сил и отображал разрабатываемый вами новый сайт как можно лучше. Рассматривая результат обработки CSSкода различными броузерами я пришла к выводу что в настоящее время можно встретить не так уж много расхождений между © ¡¢£¤¥¦ или Sµ¤µ¢¡ или À. Как обычно по умолчанию §¨£¢§£¨ ©¦ª«¥¢£¢ будет использовать переключение режимов отображения чтобы решить как нужно отображать страницу – в стандартном режиме или в режиме со
вместимости. Для поддержки обратной совместимости и в то же время пытаясь «не порвать Всемирную паутину» Ï¡Í¢¥¶¥¤¨ ввела вид в режи
ме совместимости ÁC¥½ªµ¨¡¼¡«¡¨¹ Ó¡£¾Â и головную метку ­uacompatuacompatuacompatcompatcompat
ible дающую броузеру указания по поводу того каким образом ему следует отображать страницы – максимально соответствуя стандартам или имитируя способ обработки кода броузером §¨£¢§£¨ ©¦ª«¥¢£¢ .
22 Глава ´. Кросс«броузерные решения Вид в режиме совместимости можно включить в броузере а метка ­uacompatible указывается в коде документа с помощью тега <meta /> или в заголовке λ»¸ пересылаемом с сервера. Пользователь может включить отображение в режиме совместимости нажав на кнопку Co³patiÇi¢ity ¬ieÙ кроме того все сайты включенные в список C¥½ªµ
¨¡¼¡«¡¨¹ Ó¡£¾ º¡¶¨ броузера §¨£¢§£¨ ©¦ª«¥¢£¢ для Ñ¡§´¥¾¶ также будут отображаться в режиме совместимости. Данный список составлен Ï¡Ï¡
Í¢¥¶¥¤¨ и пользователи © могут оформить подписку на него.
Метка ­uacompatible – это указание для броузера переопределяющее все текущие настройки совместимости. Ниже приведен пример тега ½£¨µ:
<meta httpe£uiv¡”Aompatible” content¡”I¡” />
Его использование обеспечит отображение страницы в §¨£¢§£¨ ©¦ª«¥¢£¢ в режиме наибольшего соответствия стандартам. Чтобы при обработ
ке документа броузер имитировал поведение §¨£¢§£¨ ©¦ª«¥¢£¢ нужно задать значение атрибута I¡mulateI. При указании значения I¡de §¨£¢§£¨ ©¦ª«¥¢£¢ и ниже всегда будет использовать для отображения сайтов режим наибольшего соответствия стандартам. Если вы занимаетесь разработкой сайта с нуля я рекомендую вам обой
тись без заголовка ­uacompatible или выставить значение I¡de. При использовании правильного элемента doctype §¨£¢§£¨ ©¦ª«¥¢£¢ поста§¨£¢§£¨ ©¦ª«¥¢£¢ поста ©¦ª«¥¢£¢ пост੦ª«¥¢£¢ поста поста
рается отобразить сайт как можно лучше безо всякого заголовка ­ua
compatible – вы ведь пишете код в соответствии со стандартами и со
вершенно не планируете попасть в тот злополучный список Ï¡Í¢¥¶¥¤¨Ð В противном случае – при использовании ­uacompatible – рекомен
дую вам использовать именно значение I¡de Áа не I¡I и др.Â. Тог
да при выходе й версии §¨£¢§£¨ ©¦ª«¥¢£¢ ваш сайт не застынет навеч§¨£¢§£¨ ©¦ª«¥¢£¢ ваш сайт не застынет навеч ©¦ª«¥¢£¢ ваш сайт не застынет навеч©¦ª«¥¢£¢ ваш сайт не застынет навеч ваш сайт не застынет навеч
но в виде для ©.
Более подробную информацию по данной теме можно найти в замеча
тельной статье опубликованной Фаруком Эйтсом Áµ¢±á °¨£¶Â в сво
ем блоге. Она называется «© µ§´ ¨²£ Çã°C¥½ªµ¨¡¼«£ ¶¡¨±µ¨¡¥§» Á© и ситуация с переключением режимов с помощью заголовка Çã°C¥½
ªµ¨¡¼«£Â.
Что делать¤ если SS не работает
Все мы время от времени сталкиваемся с ситуациями когда CSSкод не работает и все тутÚ Вы перебрали все возможные решения но от
Список таких сайтов можно загрузить с сайта Ï¡Í¢¥¶¥¤¨ по адресу ­­
.£­.¤¤¤­.¦áÝÑâÓÓÌõ¡Å¡ß¿µ¤
Ó¡ßÌß¿ÌÓߤµÌÓÓã¤â
­­£­.Áµ¢¢Å¢Ìµ¿ÌÓ¤­ ¦­­­
Что делать если ­ не работает
225
дельные кусочки текста продолжают исчезать и появляться в §¨£¢§£¨ ©¦ª«¥¢£¢ или же часть его перекрывает остальной контент в Sµ¤µ¢¡. Прежде чем начать посыпать голову пеплом сделайте глубокий вздох и успокойтесь. Решение естьÚ
Решение
Это решение поможет вам найти решениеÚ1. Передохните
Когда все попытки исправления ошибки безуспешны трудно сохра
нять ясность разума в поисках оптимального решения. Поэтому отдо
хните немного: прогуляйтесь сделайте уборку на рабочем столе или займитесь домашними делами. Если ваш начальник рядом и вам неудобно просто встать и отойти в сторону переключитесь на выпол
нение другой задачи: ответьте на письма или удалите ненужные фай
лы. Что угодно главное – отвлечься от проблемы на некоторое время.
2. Проведите валидацию кода документа и таблицы стилей
Затем нужно проверить λϺ и CSSкод если вы до сих пор еще этого не сделали. Возможно проблема возникла изза допущенных в коде ошибок а если даже причина в другом их наличие только все усугубляет.
3. Изолируйте проблему
Может ли ваша ошибка возникнуть независимо от остальных частей документаÐ Сбои часто возникают только при наличии определен
ного набора условий поэтому выявление источника проблемы воз
можно поможет вам в поиске решения. Попробуйте перенести про
блемный фрагмент кода в документ с другой разметкой.
4. Поищите решение в Интернете
Если ваша проблема связана с использованием определенного броу
зера то она скорее всего возникла не впервые. Существует множе
ство хороших сайтов посвященных такого рода проблемам и спосо
бам их решения. Столкнувшись с проблемами в работе я обязатель
но обращаюсь к следующим сайтам:
• CSS ¸¥¡§¨£¢¶ Ò¢¥±ª ­­.­. ­
• ¸¥¶¡¨¡¥§ ¡¶ ©Ì£¢¹¨²¡§· ­­.­»­ .­
• Раздел ¢¥¾¶£¢ ±· Cµ¨£·¥¢¹ на сайте Ͷ¶´ ¾¡á¡ ­­¤.
­.á⯭ÊÊ
S¡¨£¸¥¡§¨ CSS ߣ¤£¢£§Í£
содержит немало полезной информации о под держке различными броузерами тех или иных свойств и селек
­­£.­­.
226 Глава ´. Кросс«броузерные решения торов CSS. Кроме того попробуйте поискать решение в архивах Ͷ¶
´¡¶Í±¶¶
и конечно воспользуйтесь поиском Ò¥¥·«£Ú
. Обратитесь за советом к другим
Если приведенные выше советы не привели к решению проблемы попросите помощи у других людей. Даже самые опытные разработ
чики порой сталкиваются с проблемами которые не могут решить в одиночку. Иногда свежий взгляд посторонних людей может по
мочь найти возможные способы решения проблемы о которых вы не подумали или даже найти готовое решение.
При написании сообщения на форуме или в почтовой рассылке не забывайте о следующих правилах:
• Вначале следует провести поиск по архиву если он есть – воз
можно аналогичные вопросы задают по нескольку раз в день.
• Убедитесь что ваш λϺ и CSSкод прошел валидацию иначе вы рискуете получить ответ «проверьте ваш код на соответствие спецификации это может помочь».
• Выложите пример вашей работы в Сети с тем чтобы указать ссыл
ку на него на форуме. Возможность рассмотрения проблемы не
зависимо от сложной структуры всей страницы является допол
нительным плюсом поскольку другим будет проще разобраться в происходящем.
• Расскажите об испробованных вами способах решения пробле
мы чтобы посетители форума не теряли времени предлагая уже проверенные методы. Кроме того это укажет на то что вы пыта
лись решить проблему самостоятельно перед тем как обратиться за помощью.
• Тема сообщения должна быть информативной. Люди скорее про
читают сообщение с заголовком «Дублирование блоков в ©» чем отреагируют на отчаянный возглас «ПОМОГИТЕÚ». Правиль
ные заголовки повышают информативность архива: достаточно взглянуть на список чтобы получить представление об обсужда
емых темах.
• Будьте вежливы и придерживайтесь темы.
• Терпеливо ждите пока вам ответят. Если рассылка или форум достаточно активны но вы не получили ни одного ответа в тече
ние дня вполне допустимо задать вопрос снова добавив в тему префикс ß©¸äS». При большом объеме поступающих тем часть из них может оставаться незамеченной и повторная публикация ненавязчиво напомнит читателям что ваша проблема осталась нерешенной.
­­.¤.
Интерпретация сообщений выводимых инструментом ¹­ ¿¢³i¯¢t®¤
227
• Получив предложения по решению проблемы примените их на практике. Не расстраивайтесь и не раздражайтесь если они не приводят к желаемому результату или если вам кажется что вам предлагают самые очевидные вещи. Я видела достаточно долгие дискуссии продолжавшиеся до тех пор пока решение не было найдено. Дайте людям возможность помочь вамÚ
• Если вы нашли выход из положения или решили изменить ди
зайн страницы чтобы избежать возникновения проблемы сооб
щите об этом в своей теме описав все подробности в знак ува
жения к тем кто попытался вам помочь. Кроме того это может сослужить хорошую службу тем кто в дальнейшем будет про
сматривать архивы в поисках решения аналогичной проблемы. Очень обидно найти несколько предлагаемых решений пробле
мы не зная какое из них действительно эффективно Áи есть ли среди них эффективные методы в принципеÂ.
Среди подписчиков рассылок посвященных вебдизайну много очень опытных разработчиков прекрасно разбирающихся в CSS. На мой взгляд лучшей рассылкой посвященной CSS является Ͷ¶´¡¶Í±¶¶.
Ее подписчики достаточно активны и дружелюбны и вы можете почерп
нуть массу полезной информации просто читая сообщения и просма
тривая архивы. На сайте S¡¨£¸¥¡§¨ также есть замечательный и очень активный форум
на котором общается много отзывчивых и опытных людей.
Интерпретация сообщений¤ выводимых инструментом Æ3 ̺¯°ºª
Валидация кода документа крайне важна для того чтобы он коррек
тно отображался в броузерах поддерживающих стандарты ÑC. ОднаÑC. ОднаC. ОднаC. Одна. Одна
ко иногда выводимые в ходе этого процесса сообщения об ошибках мо
гут сбить с толку.
Решение
ÁÇÂλϺдокументы можно проверить в режиме онлайн с помощью ин
струмента ÑC Óµ«¡´µ¨¥¢
CSSкод можно проверить с помощью ÑC CSS Óµ«¡´µ¨¥¢.
À
Многие программы для разработки такие как Û¢£µ½¾£µÌ£¢ ­­.¤.
­­.­­. £
­­»¤­..
À ­­Á..»¤­
228 Глава ´. Кросс«броузерные решения имеют встроенные валидаторы а на некоторые броузеры например ¡¢£¤¥¦ можно установить расширение для проверки документов.
Проверка как λϺ так и CSSкода начинается от начала к концу доλϺ так и CSSкода начинается от начала к концу до так и CSSкода начинается от начала к концу доCSSкода начинается от начала к концу докода начинается от начала к концу до
кумента. Иногда по окончании процесса валидации можно получить длинный список ошибок. Однако после исправления первой из них большинство последующих также могут исчезнуть. Это особенно ха
рактерно для проверки ÁÇÂλϺдокументов. Если вы забыли закрыть тег валидатор считает его открытым и выдает кучу ошибок говорящих о том что элемент ° не может располагаться внутри элемента . Закрыв тег вы увидите что все эти ошибки будут исправлены автоматически.
Похожая ситуация может возникнуть при проверке документов типа λϺ Áне ÇλϺ в которых разработчик закрыл тег в соответствии с правилами синтаксиса ÇϺ например:
<link rel¡”stylesheet” href¡”stylesheet.css” type¡”te­t/css” />
Если вы используете такой код в документе в элементе doctype которо
го не указано что он написан на ÇλϺ будет выведено сообщение о том что закрывающий тег </head> расположен в неподходящем месте. Чтобы документ соответствовал стандартам λϺ достаточно удалить косую черту из тега:
<link rel¡”stylesheet” href¡”stylesheet.css” type¡”te­t/css”>
Ошибки и предупреждения
Если в CSSдокументе содержатся синтаксические и прочие ошибки Áнапример пропущена точка с запятой он не пройдет валидацию. Не
обходимо исправить все найденные ошибки и убедиться в том что при обработке кода страница отображается именно так как было задумано. Если CSSкод не содержит ошибок он пройдет валидацию. Однако при его проверке валидатор может вывести различные предупрежде
ния. Вы можете принять их к сведению или проигнорировать – на ваше усмотрение. Самое распространенное предупреждение относится к не
подобающему фону для определенного элемента изза чего часть тек
ста на странице может оказаться непригодной для чтения. Кроме того валидатор может указать на то что определенный фрагмент кода мо
жет вызвать проблемы даже если вы намеренно написали его имен
но таким образом Áнапример если вы хотите чтобы фон одного элемен
та просвечивал сквозь другой элементÂ. Предупреждения следует вос
принимать скорее как совет и напоминание о необходимости проверки кода однако если помимо предупреждений никаких ошибок не выяв
лено таблица стилей полностью прошла валидациюÚ
­­.­.·
Заключение
229
Заключение
В данной главе были рассмотрены решения проблем с которыми вам возможно еще только предстоит столкнуться особенно в том случае если до сих пор вы создавали сайты позиционируя элементы с помо
щью таблиц а не CSS. Именно в таких условиях рождаются самые изоCSS. Именно в таких условиях рождаются самые изо. Именно в таких условиях рождаются самые изо
щренные броузерные ошибки и тестирование сайта в различных вер
сиях различных броузеров приобретает еще более важное значение.
В данной главе я рассказала о своих методах тестирования сайтов вы
явления ошибок и получения помощи в их исправлении. Кроме того я попыталась представить вам дополнительные возможности чтобы ваш сайт отображался подобающим образом для различных категорий пользователей. Если вы читаете книгу последовательно глава за гла
вой то вскоре увидите что все вышесказанное обретает еще большее значение в свете информации об использовании CSS для верстки страCSS для верстки стра для верстки стра
ницы представленной в главе .
Глава . Доступность и альтернативные устройства
CSS позволяет отделить структуру и содержание документа от его оформления. Следование такому принципу дает возможность доступа к его контенту пользователям устройств не воспроизводящих дизайн сайта. Причиной таких ограничений могут быть технические особен
ности как в случае определенных броузеров мобильных устройств или конкретная функциональность как у экранных дикторов воспроизво
дящих текст для пользователей с нарушениями зрения. При этом у нас остается возможность создания красивых и привлекательных с визу
альной точки зрения сайтов для большинства пользователей чьи броу
зеры поддерживают CSS.
Определенным пользователям с ограниченными возможностями вы об
легчите доступ к сайтам созданным с учетом вышесказанных сооб
ражений однако следует подумать и о тех посетителях которые мо
гут увидеть дизайн сайта но которым требуются дополнительные ин
струменты для работы с ним. Чтобы различным категориям пользова
телей было удобно пользоваться вашим сайтом недостаточно просто сверстать макет страницы с использованием CSS. Например некотоCSS. Например некото. Например некото
рые пользователи со слабым зрением смогут прочитать только четкий текст размер шрифта которого можно увеличить. Также в настоящей главе будут рассмотрены вопросы использования альтернативных та
блиц стилей таблиц стилей предназначенных для определенной сре
ды отображения Áнапример для печати и написания CSSкода для моCSSкода для мокода для мо
бильных устройств. Аспекты доступности¤ о которых следует помнить при использовании SS
Чтобы ваш сайт можно было с уверенностью назвать доступным для всех категорий пользователей недостаточно только позаботиться об Аспекты доступности о которых следует помнить при использовании ­
231
удобстве посетителей использующих экранные дикторы. При разра
ботке дизайна сайта необходимо учитывать потребности самых различ
ных пользователей: людей с нарушениями зрения страдающих дис
лексией и тех кто в силу физических ограничений не может пользо
ваться мышью. Такие пользователи скорее всего будут просматривать сайт в обычном вебброузере и только от вас зависит насколько удоб
но им будет работать.
Решение
Ниже представлен достаточно сжатый список полезных приемов часть из которых уже обсуждалась в предыдущих главах книги.
Наряду с фоновым изображением задайте простой цвет фона
Если текст в вашем документе отображается поверх фонового изобра
жения – заданного например для ячейки таблицы или блочного эле
мента – не забудьте указать также и фоновый цвет. Использование фо
нового цвета обеспечит сохранение уровня контрастности текста в том случае если изображение по тем или иным причинам не загрузится. Задав цвет фона¤ задайте цвет текста и наоборот
Чтобы читать документ было удобнее необходимо продумать оптималь
ное сочетание цвета фона и текста для обеспечения должного уровня кон
трастности. Если вы зададите скажем только цвет фона есть вероят
ность того что он сольется с текстом отображаемым в соответствии с на
стройками по умолчанию пользователя. Например в настройках поль
зователя значится что фон должен быть черным а текст – белым а вы задаете черный цвет текста. В этом случае текст простонапросто исчез
нетÚ Если вы хотите дать пользователю возможность самостоятельно определять настройки цвета не следует задавать никаких цветов вооб
ще однако не так уж много вебдизайнеров согласятся на такие условияÚ
Проверьте контрастность цвета
Убедитесь что текст выглядит достаточно контрастно на выбранном фоне. Пользователям со слабым зрением будет крайне сложно прочи
тать текст если уровень его контрастности по отношению к фону неве
лик. Кроме того учтите что пользователи страдающие дальтонизмом могут не различать определенные сочетания цвета фона и текста. По рекомендации консорциума ÑC в документации «Критерии доступ
ности вебконтента» ÁÑC°Ò . S±ÍÍ£¶¶ C¢¡¨£¢¡¥§ .À.
 указано что конт растность между текстом и изображениями должна поддержи
ваться в соотношении по меньшей мере À:. Для оценки уровня кон
трастности между выбранными вами цветами можно воспользоваться ­­..˵¢¢ÓËүׯØÙµ¢µ¢¢Ó¡µ¡¡ä»¤­­
­­
232 Глава ¾. Доступность и альтернативные устройства очень удобной программой º±½¡§¥¶¡¨¹ C¥§¨¢µ¶¨ ßµ¨¡¥ °§µ«¹¶£¢ напи
санной Джезом Лемоном ÁË£³ º£½¥§Â
.
Фоновые изображения следует использовать исключительно в декоративных целях
Добавлять фоновые изображения с помощью CSS настолько просто что можно незаметно для себя приобрести пагубную привычку их повсе
местного использования – и там где надо и там где совсем не надо. Од
нако следует помнить что пользователи отключившие просмотр изо
бражений иÄили CSS вообще не узнают о его существовании. В этом нет ничего страшного если изображение выполняет только декоратив
ную функцию однако если оно несет информативную нагрузку лучше сопроводить его описательным атрибутом alt. Тогда пользователи не имеющие возможности его увидеть смогут узнать что оно существует и прочитать его описание.
Используйте свойство ¯¡-®Ê®¤ чтобы текст было легче читать
Благодаря увеличению высоты строки с помощью свойства lineheiht воспринимать текст будет еще легче однако избегайте слишком боль
ших отступов межу строками поскольку это может привести к обрат
ному эффекту. Оптимальное значение данного свойства составляет от до причем если не указывать единицы то высота строки будет изменяться пропорционально размеру шрифта.
Тестирование сайта в текстовом броузере
Тестирование сайта в текстовом броузере – отличная возможность оце
нить насколько он на самом деле удобен в использовании для различ
ных категорий пользователей. Если в процессе навигации по сайту с помощью текстового броузера у вас не возникнет никаких затрудне
ний то скорее всего пользователи экранных дикторов также не стол
кнутся с какимилибо проблемами.
Решение
Вы можете посмотреть как будет выглядеть ваш сайт в текстовом броу
зере º¹§¦ причем это можно сделать прямо в режиме онлайн с помо
щью º¹§¦ Ó¡£¾£¢.
Помимо того что º¹§¦ – удобный инструмент тести
рования его загрузка и установка бесплатна поэтому вы можете уста
новить себе копию º¹§¦. Это даст вам дополнительную возможность тестирования создаваемых страниц в процессе разработки перед тем как загрузить их на сервер.
­­Á­¤.»­­­­. ­­.¤.¦». ­
Тестирование сайта в текстовом броузере
233
Пользователи á½µÍÎNIÏ
Вполне возможно что º¹§¦ уже установлен в вашей системе в противº¹§¦ уже установлен в вашей системе в против уже установлен в вашей системе в против
ном случае его можно с легкостью добавить через систему управления пакетами. Кроме того его можно загрузить с сайта распространения программного обеспечения º¹§¦.
Пользователи Æ¡°Ç«
Раньше установить º¹§¦ в системе Ñ¡§´¥¾¶ было не такто просто но теперь можно загрузить инсталлятор с сайта Ͷµ§¨.¡§¤¥.
После установ
ки вы сможете запускать º¹§¦ прямо из меню ¯tart.
Пользователи º¬ ÈS Ï
º¹§¦ для ÏµÍ äS Ç можно загрузить с сайта °ªª«£.
Обсуждение
º¹§¦ корректно работает под любой платформой однако для его исполь корректно работает под любой платформой однако для его исполь
зования необходимо выучить несколько несложных команд. На рис. . изображен вид типичного сайта при просмотре в º¹§¦.
Рис. 8.1. Просмотр сайта в º¦
­­¦..
­­.­.£¦. ­
­­..¤¤¦¦Íͦ­¦­. ­
23 Глава ¾. Доступность и альтернативные устройства Чтобы открыть вебстраницу нажмите Ï и введите ее ãߺадрес. Щелк
ните по клавише nter и º¹§¦ загрузит указанную страницу. Если на загружаемом сайте используются Í¥¥á¡£¶ броузер спросит хотите ли вы их принять. Для ответа можно использовать Û ÁдаÂ Ñ Áнет А Áвсегда принимать Í¥¥á¡£¶ с этого сайта или ¬ Áникогда не принимать Í¥¥á¡£¶ с этого сайтаÂ.
Для навигации используйте клавиши со стрелками. С помощью стре
лок указывающих вверх и вниз можно переходить по ссылкам. Щел
чок по стрелке указывающей направо осуществляет переход по теку
щей ссылке а по стрелке указывающей налево – переход на предыду
щую страницу.
В процессе заполнения формы для навигации по ее полям используют
ся верхняя и нижняя клавиши со стрелками а текст вводится с помо
щью клавиатуры как и в обычном броузере. º¹§¦ можно использовать для просмотра локальных файлов что особен можно использовать для просмотра локальных файлов что особен
но удобно в процессе разработки. Если вы используете локальный веб
сервер – например °ªµÍ²£ или S – то можно указать º¹§¦ адрес че°ªµÍ²£ или S – то можно указать º¹§¦ адрес че или S – то можно указать º¹§¦ адрес чеS – то можно указать º¹§¦ адрес че – то можно указать º¹§¦ адрес чеº¹§¦ адрес че адрес че
рез «локальный хост» Á«¥Íµ«²¥¶¨ÄÂ. Обратите внимание что λϺдоку
менты можно открывать и напрямую указав имя файла и путь к нему. Дополнительную информацию об использовании º¹§¦ можно полуº¹§¦ можно полу можно полу
чить в справочной системе вызываемой клавишей навигация по ней осуществляется так же как и по обычным сайтам.
Совет
Доступно на практике Посвятите некоторое время просмотру любимых сай
тов в текстовом броузере и вскоре вы по достоинству оцените необходимость использования атрибута alt для изображений и правильного структурирова
ния документа
Тестирование сайта с помощью экранного диктора
Чтобы понять каким сайт предстанет перед пользователями экранных дикторов лучше всего поставить себя на их место на практике однако самый известный и популярный на сегодняшний день экранный дик
тор Ë°ÑS стоит достаточно дорого Áхотя вы можете воспользоваться демонстрационной версией работающей À минут а изучение особен
ностей его использования займет некоторое время. Какие альтернатив
ные возможности есть у вебразработчиков желающих протестировать созданный сайт с помощью экранного диктораÐ
Создание отдельных таблиц стилей для различных устройств
235
Решение
Получить представление о том как содержащаяся на сайте информа
ция будет воспроизведена экранным диктором можно с помощью ¡¢£ Ó¥¦ расширения для ¡¢£¤¥¦. Пользователи ¡¢£¤¥¦ под Ñ¡§´¥¾¶ ÏµÍ äS Ç или º¡§±¦ могут загрузить его бесплатно с сайта разработчика Чарльза Л. Чена ÁC²µ¢«£¶ º. C²£§Â
а затем установить его в своей систе
ме следуя инструкции. На сайте также можно найти краткое руковод
ство по использованию ¡¢£ Ó¥¦.
Обсуждение
Безусловно попробовав использовать экранный диктор вы получите некоторое представление о том как незрячие пользователи работают с Интернетом однако человек с нормальным зрением никогда не сможет полностью прочувствовать положение такого пользователя и учитывая ограниченное использование экранных дикторов при тестировании сай
та так же глубоко разобраться во всех тонкостях данной программы как те для кого это – единственное средство получения информации из Сети. Поэтому если у вас нет времени на тщательное изучение особен
ностей экранного диктора тестирование сайта с его помощью следует скорее считать попыткой лучше представить себе работу незрячих поль
зователей чем полноценной проверкой сайта на совместимость с экран
ным диктором.
Создание отдельных таблиц стилей для различных устройств
Отдельные таблицы стилей можно создавать для разных броузеров а можно ли для разных устройствÐ
Решение
В спецификации CSS. введено понятие среды отображения которое позволяет вебразработчикам создавать отдельные таблицы стилей или отвести часть общей таблицы стилей для применения к документу при его отображении различными устройствами.
В теге привязывающем таблицу стилей к документу можно указать среду отображения для которой она предназначена. К примеру в сле
дующем теге осуществляется привязка таблицы стилей которая бу
дет использоваться только для отображения сайта броузером на экра
не компьютера:
­­.£»¦.¤.­¤¤. ­
236 Глава ¾. Доступность и альтернативные устройства <link rel¡”stylesheet” type¡te­t/css” href¡”screen.css” ­edia=”screen” />
Для размещенных внутри элемента head правил стилей также можно указать такую метку:
<style type¡”te­t/css” ­edia=”all”>
Á</style>
В обоих примерах значением атрибута media служит название среды отображения для которой предназначена таблица стилей. Она будет использоваться только устройствами поддерживающими указанную среду.
Обсуждение
В спецификации CSS . указаны следующие типы среды отображения:
all подходит для всех устройств
braille для тактильных устройств например брайлеровских дис плеев
e­bossed для постраничной печати по системе Брайля
handheld для портативных устройств Áкак правило с небольшим экра
ном и ограниченной пропускной способностью полосыÂ
rint для документов с постраничной организацией и докумен
тов отображаемых на экране в режиме предпросмотра пе
ред печатью Á¸¢¡§¨ ¸¢£Ì¡£¾Â
roection для презентаций представляемых с помощью проектора Áиспользуется 䪣¢µ в полноэкранном режимеÂ
screen предназначается прежде всего для цветных компьютерных мониторов
seech для синтезаторов речи Áобратите внимание что в CSS с этой целью использовалась среда отображения auralÂ
tt для устройств с фиксированной сеткой символов Áтелетай
пов терминалов или портативных устройств с ограничен
ными возможностями отображения при написании табли
цы стилей для данной среды отображения не следует ис
пользовать в качестве единицы измерения пикселы
tv для телевизионных дисплеев Áцветных с низким разреше
нием ограниченными возможностями прокрутки и функ
цией воспроизведения звукаÂ
­­..˯µ¡¤. ­ä¤­
Создание отдельных таблиц стилей для различных устройств
237
Помимо использования атрибута media как было описано выше у раз
работчика есть возможность указания стилей для различных устройств в единой таблице стилей с помощью правила Ðmedia.
Ниже представлен пример применения этого приема на практике. В рассматриваемой таблице стилей указано что при печати докумен
та должен использоваться шрифт размером в десять пунктов а при ото
бражении его на экране – в пикселов. В обоих случаях цвет текста будет черным:
Ðmedia print body fontsi¥e 1pt Ðmedia screen body fontsi¥e 1p­ Ðmedia screen¨ print body color В настоящее время не так много устройств полностью поддерживают различные среды отображения и метод указания конкретных сти
лей для различных устройств в будущем скорее всего будет заменен модулем запросов среды CSS.
К примеру 䪣¢µ Ï¥¼¡«£ и Sµ¤µ¢¡ для ¡¸²¥§£ прекратили поддержку среды отображения handheld поскольку компанииразработчики считают их полнофункциональными броузе
рами в отличие от типичных маломощных броузеров установленных на портативных устройствах. Вместо этого они сделали выбор в пользу поддержки запросов среды что гораздо эффективнее для указания раз
личных стилей для современных мобильных устройств корректно об
рабатывающих CSSкод но обладающих некоторыми ограничениями обусловленными небольшим размером экрана.
­­£.­­.¤Õ
С помощью запросов среды можно например указать определенные прави
ла стилей для устройств с максимальной шириной экрана в À пикселов. Более подробную информацию можно получить на сайте Сообщества разра
ботчиков 䪣¢µ Á䪣¢µ ۣ̣«¥ª£¢ C¥½½±§¡¨¹Â по адресу ­­¤»..
­»ÅÌ­ ¤» и на сайте Центра разра
ботчиков °ªª«£ Sµ¤µ¢¡ Á°ªª«£ Sµ¤µ¢¡ Û£ÌC£§¨£¢Â по адресу ­­¤».
.£.
238 Глава ¾. Доступность и альтернативные устройства Однако указание различных типов среды все еще остается актуальным одним из самых полезных и поддерживаемых современными броузера
ми типов среды отображения является print. В следующем разделе мы рассмотрим способ его использования для создания версии документа для печати.
Совет
Не нужно начинать с самого начала При создании таблицы стилей для дру
гой среды отображения проще всего скопировать уже существующий файл и сохранить его под новым именем Таким образом все селекторы сразу ока
жутся у вас под рукой и останется всего лишь изменить некоторые из указан
ных для них правил
Создание таблицы стилей для печатной версии документа
Вебстраницы редко удается напечатать удачно поскольку принципы создания страницы хорошо смотрящейся на экране обычно отлича
ются от принципов создания страницы хорошо смотрящейся на бума
ге. Однако используя различные типы среды CSS можно создать таCSS можно создать та можно создать та
блицу стилей применяемую к документу при его печати.
Решение
Можно создать специальную таблицу стилей для печати например:
­¢Ó­­ ­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>rint tyle heet</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /><link rel¡”stylesheet” type¡”te­t/css” href¡”main.css” title¡”default” /><lin rel=”stlesheet” te=”tet/css” hre=”rintcss” ­edia=”rint” /></head><body><div id¡”banner”></div><div id¡”content”> <h1>hinesestyle stuffed peppers</h1>
<p>These stuffed peppers are lovely as a starter¨ or as a side dish for a hinese meal. They also o down well as part of a buffet and even children seem to like them.</p> <h>Inredients</h> Á
Создание таблицы стилей для печатной версии документа
239
</div><div id¡”naviation”> <ul id¡”mainnav”> <li><a href¡””>ecipes</a></li> <li><a href¡””>ontact s</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> </ul></div></body></html>
­¢Ó.
body¨ html marin paddin naviation width p­ font ¢« Arial¨ elvetica¨ sansserif position absolute top ®1p­ left naviation ul liststyle none marin paddin border none naviation li borderbottom 1p­ solid ¢¤¢¤ marin naviation li alink¨ naviation li avisited display block paddin p­ p­ p­ .em borderleft 1p­ solid 111 borderriht 1p­ solid 111 color ¤¤¤¤¤¤ backroundcolor b1 te­tdecoration none naviation li ahover color ¤¤¤¤¤¤ backroundcolor 111 content marinleft ©p­ marinriht ©p­ 20 Глава ¾. Доступность и альтернативные устройства banner heiht ®p­ backroundcolor 111 borderbottom 1p­ solid ¢¤¢¤ te­talin riht paddinriht p­ marintop banner ul marin paddin banner li display inline banner alink¨ banner avisited font « Arial¨ elvetica¨ sansserif color ¤¤¤¤¤¤ backroundcolor transparent content p¨ content li font «/1.©em Arial¨ elvetica¨ sansserif content p marinleft 1.em content h1¨ content h font 1®« ¬eoria¨ “Times ew oman”¨ Times¨ serif content h font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom p­ ­¢Ó­.
body¨ html marin paddin naviation display none content marinleft pt marinriht pt banner display none content p¨ content li font 1pt/pt “Times ew oman”¨ Times¨ serif Создание таблицы стилей для печатной версии документа
21
content p marinleft pt content h1¨ content h font 1©pt ¬eoria¨ “Times ew oman”¨ Times¨ serif color ®b®b®b backroundcolor transparent content h font 1®pt ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom pt borderbottom 1pt dotted Обсуждение
При наличии отдельной таблицы стилей для печати посетителям бу
дет гораздо удобнее работать с вашим сайтом в особенности если вы ис
пользуете много графики. Печать документа содержащего множество изображений может оказаться затратной по количеству чернил и вре
мени при печати на старых принтерах. Кроме того некоторые сайты плохо выглядят на бумаге изза неудачно подобранных цветов или осо
бенностей структуры документа. На рис. . изображена страница со
стоящая из двух колонок созданных с помощью CSS с навигационной панелью сбоку и основной областью содержащей рецепт. Рис. 8.2. Вид страницы состоящей из двух колонок в броузере
22 Глава ¾. Доступность и альтернативные устройства На рис. . изображена та же страница в режиме Úrint ÚrevieÙ.
Эти рисунки позволяют четко увидеть очевидные отличия между ото
бражением на экране и отпечатком. Стандартный лист бумаги форма
та АÀ имеет ограниченную ширину поэтому если на нем разместится меню то на печать рецепта останется только половина ширины листа. Рис. 8.3. Вид страницы в режиме ­ »
Это может привести к тому что длинные рецепты придется печатать на нескольких страницах.
Обычно на сайтах имеется версия для печати тех страниц которые по предположениям разработчиков пользователь может захотеть распе
чатать. Однако применение такого подхода приводит к необходимости обслуживания сразу нескольких версий документа. Кроме того поль
зователь должен найти кнопку Úrint ÁПечать на самой странице вместо того чтобы воспользоваться соответствующей кнопкой броузера. При использовании CSS страница будет отображена в соответствии с праCSS страница будет отображена в соответствии с пра страница будет отображена в соответствии с пра
вилами указанными в таблице стилей для печати вне зависимости от того по какой из кнопок щелкнет пользователь – на странице или в броузере.
Рассмотрим процесс создания таблицы стилей для печати и ее привяз
ки к документу более подробно.
Создание таблицы стилей для печатной версии документа
23
Привязка таблицы стилей для печатиОткройте текущую таблицу стилей и сохраните ее под именем ¶¯¡.. Это наша новая таблица стилей для печатной версии документа. В коде документа необходимо указать ссылку на нее предназначенную для среды отображения print:
<link rel¡”stylesheet” type¡”te­t/css” href¡”print.css” ­edia=”rint” />
Создание правил стилей для печати
После сохранения существующей таблицы стилей под новым именем ее можно взять за основу новой таблицы изменив уже записанные в ней правила. В моем документе навигационная панель расположена вну
три элемента div для него задано следующее правило стиля:
­¢Ó. ©фрагментª
naviation width p­ font ¢« Arial¨ elvetica¨ sansserif position absolute top ®1p­ left Поскольку в печатной версии навигация совершенно бесполезна ее нуж
но скрыть. Для этого заменим содержимое приведенного выше блока описания на единственное свойство с заданным значением displaynone:
­¢Ó­. ©фрагментª
naviation display none Теперь можно удалить все правила применявшиеся к элементам рас
положенным внутри блока naviation.
Кроме того можно расширить область с основным контентом чтобы она заняла все свободное пространство страницы. Найдите в таблице стилей раздел посвященный элементу content:
­¢Ó. ©фрагментª
content marinleft ©p­ marinriht ©p­ Внешний отступ слева можно уменьшить поскольку теперь не нужно выделять дополнительное пространство для размещения панели нави
гации. Кроме того не помешает изменить единицы измерения с пик
2 Глава ¾. Доступность и альтернативные устройства селов Áдля отображения на экране на пункты Áдля печати о чем мы п
одробно говорили в разделе «Выбор единиц измерения для задания размера шрифтов: пикселы пункты пики или чтото другое» главы :
­¢Ó­. ©фрагментª
content marinleft pt marinriht pt При просмотре документа в режиме Úrint ÚrevieÙ как показано на рис. .À или при выводе на печать с помощью броузера мы увидим что панель навигации исчезла и пространство под основной контент используется на странице более эффективно.
На рис. .À видно что в верхней части страницы расположена линия. Это нижняя часть рамки баннера. С последним можно поступить так же как и с панелью навигации. Прежде всего для этого нужно найти применяемое по отношению к баннеру правило в таблице стилей:
­¢Ó. ©фрагментª
banner heiht ®p­ backroundcolor 111 borderbottom 1p­ solid ¢¤¢¤ Рис. 8.4. П
осле удаления панели навигации страница гораздо лучше будет выглядеть на бумаге
Создание таблицы стилей для печатной версии документа
25
По аналогии с панелью навигации зададим для баннера свойство display со значением none и удалим оставшиеся правила для элемента с указан
ным идентификатором.
­¢Ó­. ©фрагментª
banner display none Наконец приступим к форматированию текста. Обычно в версии для печати я изменяю цветной текст на черный или серый за исключени
ем тех случаев когда текст по тем или иным причинам должен сохра
нить цветовое оформление. Размер шрифта укажем в пунктах чтобы он оставался постоянной величиной в различных системах.
Кроме того текст предназначенный для печати лучше оформить шриф
том семейства ¶£¢¡¤ – так он будет лучше восприниматься на бумаге. Ниже приведен измененный код:
­¢Ó­. ©фрагментª
content p¨ content li font 1pt/pt “Times ew oman”¨ Times¨ serif content p marinleft pt content h1¨ content h font 1©pt ¬eoria¨ “Times ew oman”¨ Times¨ serif color ®b®b®b backroundcolor transparent content h font 1®pt ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom pt borderbottom 1pt dotted Теперь страница выглядит еще проще зато читать текст стало значи
тельно удобнее. Ее окончательный вид представлен на рис. ..
Совет
Таблицы стилей для печати и просто таблицы Таблицу стилей для печати предназначенную для сверстанного на C¯¯ документа создать несложно одC¯¯ документа создать несложно од документа создать несложно од
нако помимо этого можно создавать такие таблицы стилей и для макетов на основе таблиц что особенно удобно в том случае если ширина ячеек была задана с помощью C¯¯ При этом можно скрыть ячейки содержащие панель навигации таким же образом как мы поступили с элементом div в приведен
ном выше примере
26 Глава ¾. Доступность и альтернативные устройства Рис. 8.5. Просмотр страницы в режиме ­ » после внесения всех изменений
Добавление на сайт альтернативных таблиц стилей
Некоторые современные броузеры дают пользователю возможность уви
деть список привязанных к документу таблиц стилей и самостоятель
но выбрать одну из них. Таким образом можно с легкостью добавить например таблицу стилей инвертирующую цвета элементов страницы.
Решение
Укажите в коде документа ссылку на альтернативную таблицу стилей присвоив атрибут rel¡”alternate stylesheet” элементу link и задайте со
держащему ее файлу имя которое будет отображено в меню броузера. Оно должно быть описательным Áнапример ²¡·² Í¥§¨¢µ¶¨ – «высокая контрастность»Â чтобы пользователю было легче сделать выбор. Кроме того основной таблице стилей также нужно задать имя чтобы ее мож
но было отличить от альтернативной:
­¢Ó­­­ ­. ­ ©фрагментª
<link rel¡”stylesheet” type¡”te­t/css” href¡”main.css” title¡”default” /><link rel¡”stylesheet” type¡”te­t/css” href¡”print.css” media¡”print” /><link rel¡”alternate stylesheet” type¡”te­t/css” href¡”hihcontrast.css” title¡”hih contrast” />
Добавление на сайт альтернативных таблиц стилей
27
­¢Ó ­­.
body¨ html marin paddin bacround color ;
color FFFFFF;naviation width p­ font ¢« Arial¨ elvetica¨ sansserif position absolute top ®1p­ left naviation ul liststyle none marin paddin border none naviation li borderbottom 1p­ solid ¢¤¢¤ marin naviation li alink¨ naviation li avisited display block paddin p­ p­ p­ .em borderleft 1p­ solid 111 borderriht 1p­ solid 111 color ¤¤¤¤¤¤ backroundcolor b1 te­tdecoration none naviation li ahover color ¤¤¤¤¤¤ backroundcolor 111 content marinleft ©p­ marinriht ©p­ banner heiht ®p­ backroundcolor 111 borderbottom 1p­ solid ¢¤¢¤ te­talin riht paddinriht p­ marintop banner ul marin 28 Глава ¾. Доступность и альтернативные устройства paddin banner li display inline banner alink¨ banner avisited font « Arial¨ elvetica¨ sansserif color ¤¤¤¤¤¤ backroundcolor transparent content p¨ content li font «/1.©em Arial¨ elvetica¨ sansserif content p marinleft 1.em content h1¨ content h font 1®« ¬eoria¨ “Times ew oman”¨ Times¨ serif color FFFFFF;
backroundcolor transparent content h font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom p­ border botto­ 1 dotted ;
На рис. . показан вид страницы при выборе пользователем альтерна
тивной таблицы стилей из меню ¬ieÙ броузера ¡¢£¤¥¦.
Рис. 8.6. Вид страницы при переключении к таблице стилей Ô ¯­­ в Ý£¦
Добавление на сайт альтернативных таблиц стилей
29
Обсуждение
Эта функция проста в использовании и значительно расширяет воз
можности пользователя требуя минимальных затрат со стороны раз
работчика. Как правило создание таблицы стилей изменяющей цве
товое оформление документа занимает совсем немного времени. Для этого достаточно сохранить существующий файл со стилями под но
вым именем и поменять значения свойств определяющих параметры шрифта цвет и положение элементов.
К сожалению поддержка данной функции во многих броузерах огра
ничена а в §¨£¢§£¨ ©¦ª«¥¢£¢ отсутствует вовсе. Однако пользователи для которых данная возможность представляет интерес могут выбрать для работы соответствующий броузер.
Совет
Видите как я предусмотрителен В настоящее время крайне мало сайтов предлагают своим посетителям подобную возможность и потому не помеша
ет сообщить им что на вашем сайте могут быть использованы альтернативные таблицы стилей Можно создать специальную страницу с информацией о воз
можностях сайта и указать ссылку на нее на главной странице
Масштабируемый макет
Следующим этапом после написания таблицы стилей для крупной пе
чати является создание масштабируемого макета страницы. Данная концепция получила широкое распространение благодаря Джо Кларку ÁË¥£ C«µ¢á она состоит в изменении структуры страницы путем распо
ложения всех ее элементов в одну колонку с помощью CSS и использо
вании контрастных цветов.
Это особенно важно для пользователей ис
пользующих функцию увеличения масштаба страницы в современных броузерах Áпоскольку при этом крупнее становится не только текст но и все остальные элементы страницы или пользующихся специальны
ми программами подобными экранной лупе для облегчения зритель
ного восприятия текста. При увеличении масштаба страницы таким способом боковые панели смещаются за пределы поля зрения в резуль
тате чего на странице остается только основной контент.
Благодаря увеличению размера шрифта и отображению светлого текста на темном фоне Áтакое сочетание облегчает восприятие информации при использовании масштабируемого макета пользователям со слабым зрением будет гораздо удобнее работать с сайтом. Таблица стилей соз
дающая масштабируемый макет страницы с которой мы работали на протяжении этой главы может содержать нижеследующие правила а на рис. . показан вид страницы при просмотре в броузере.
­­Á.·
250 Глава ¾. Доступность и альтернативные устройства Рис. 8.7. Вид страницы с применением таблицы стилей для · ­
­¢Ó·.
body¨ html marin 1em em em em paddin fontsi¥e 1®« backroundcolor color ¤¤¤¤¤¤ naviation ul liststyle none marin paddin border none naviation li floatleft width « naviation li alink¨ naviation li avisited color ¤¤¤¤ naviation li ahover te­tdecorationnone Нужно ли отображать на сайте инструменты для изменения размера шрифта
251
content paddin 1em clearleft content p¨ content li lineheiht 1.©em content h1¨ content h font 1®« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¤¤¤¤¤¤ backroundcolor transparent content h font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif Нужно ли отображать на сайте инструменты для изменения размера шрифта или переключения между различными таблицами стилейÅ
Вам вероятно встречались сайты с инструментами для увеличения или уменьшения размера шрифта осуществляемого путем переключе
ния между таблицами стилей. В данной главе уже были рассмотрены способы создания альтернативных таблиц стилей нужно ли добавить на сайт ссылку для переключения между нимиÐ
Решение
Создание на сайте инструментов для изменения размера шрифта – час
то представленных в виде нескольких букв А разной величины – совер
шенно излишне если сайт построен правильно с использованием ме
тодов задания величины шрифта обеспечивающих возможность ее из
менения во всех броузерах. Гораздо важнее чтобы пользователи научи
лись увеличивать и уменьшать шрифт предлагаемыми броузером сред
ствами поскольку это дает возможность регулирования размера текста на большинстве сайтов а не только на тех где для этого имеются спе
циальные инструменты.
При создании масштабируемого макета страницы или использовании иных альтернативных методов структурирования документа механизм регулирования его размера менее очевиден. Пользователям современ
ных броузеров доступна функция изменения масштаба всей страницы а не только размера шрифта. В идеале любой дизайн должен масштаби
роваться корректно избавляя разработчиков от необходимости исполь
252 Глава ¾. Доступность и альтернативные устройства зования альтернативных таблиц стилей. Однако при увеличении мас
штаба макета с фиксированной шириной часть его элементов нередко исчезает за пределами экрана. На мой взгляд в данной ситуации хорошим решением будет предло
жить пользователям другой дизайн соответствующий их потребно
стям. Для этого достаточно создать альтернативную таблицу стилей как показано выше а на странице посвященной вопросам доступно
сти сайта разместить подробную информацию о том какие броузеры позволяют использовать альтернативные таблицы стилей и каким об
разом можно переключиться к масштабируемой версии. Или же мож
но создать на странице переключатель с помощью ˵̵SÍ¢¡ª¨ или сце˵̵SÍ¢¡ª¨ или сце или сце
нария выполняющегося на сервере. Однако эту функцию следует до
бавлять только при большой необходимости. Не нужно думать что вы обязаны предоставить пользователю переключатели стилей страницы или что их использование избавляет вас от необходимости адаптации основного дизайна для всех категорий пользователей.
Создание альтернативных таблиц стилей без копирования кода из основной таблицы
В предыдущих примерах создание альтернативной таблицы стилей про
исходило путем копирования правил из основной таблицы и изменения значений некоторых свойств. Действительно ли так необходимо исполь
зовать в альтернативной таблице стилей все эти правила или достаточно только тех которые нужно изменитьÐ Решение
Чтобы ответить на этот вопрос создадим несколько таблиц стилей. Пер
вая из них будет содержать свойства в изменении которых нет необхо
димости вторая – свойства значения которых будут меняться а тре
тья – измененные значения этих свойств:
­­­ ­µ. ­ ©фрагментª
<link rel¡”stylesheet” type¡”te­t/css” href¡”main.css” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”defaultcolors.css” title¡”efault” /><link rel¡”stylesheet” type¡”te­t/css” href¡”print.css” media¡”print” /><link rel¡”alternative stylesheet” type¡”te­t/css” href¡”hihcontrast.css” title¡”ih ontrast” />
­¢Óµ.
body¨ html marin paddin Создание альтернативных таблиц стилей без копирования кода
253
naviation font ¢« Arial¨ elvetica¨ sansserif position absolute left top ®1p­ naviation ul liststyle none marin paddin border none naviation li borderbottom 1p­ solid ¢¤¢¤ marin naviation li alink¨ naviation li avisited display block paddin p­ p­ p­ .em borderleft 1p­ solid 111 borderriht 1p­ solid 111 backroundcolor 1 color ¤¤¤¤¤¤ te­tdecoration none naviation li ahover backroundcolor 111 color ¤¤¤¤¤¤ banner backroundcolor 111 borderbottom 1p­ solid ¢¤¢¤ te­talin riht paddinriht p­ marintop banner ul marin banner li display inline banner alink¨ banner avisited font « Arial¨ elvetica¨ sansserif color ¤¤¤¤¤¤ backroundcolor transparent content p¨ content li font «/1.©em Arial¨ elvetica¨ sansserif 25 Глава ¾. Доступность и альтернативные устройства content p marinleft 1.em content h1¨ content h font 1®« ¬eoria¨ “Times ew oman”¨ Times¨ serif color 1 backroundcolor transparent content h font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom p­ borderbottom 1p­ dotted ¢¤¢¤ ­¢Ó¤£­.
body¨ html backroundcolor ¤¤¤¤¤¤ color content h1¨ content h color 1 backroundcolor transparent content h borderbottom 1p­ dotted ¢¤¢¤ ­¢Ó ­­µ.
body¨ html backroundcolor color ¤¤¤¤¤¤ content h1¨ content h color ¤¤¤¤¤¤ backroundcolor transparent content h borderbottom 1p­ dotted Обсуждение
Для создания файла ±°±£¡¯¦. с которым мы работали в разделе «Добавление на сайт альтернативных таблиц стилей» я изменила все
го несколько свойств исходной таблицы стилей. Поменялись значения цвета фона и шрифта:
Создание альтернативных таблиц стилей без копирования кода
255
­¢Ó. ©фрагментª
body¨ html marin paddin backroundcolor ¤¤¤¤¤¤ color ­¢Ó ­­. ©¦­ª
body¨ html marin paddin bacround color ;
color FFFFFF;
Кроме того я изменила цвет заголовков первого и второго уровня:
­¢Ó. ©фрагментª
content h1¨ content h font 1®« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¤12;
backroundcolor transparent content h font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom p­ border botto­ 1 dotted FF;
­¢Ó ­­. ©фрагментª
content h1¨ content h font 1®« ¬eoria¨ “Times ew oman”¨ Times¨ serif color FFFFFF;backroundcolor transparent content h font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif paddinbottom p­ border botto­ 1 dotted ;
Чтобы не копировать все содержимое таблицы стилей для создания файла ±°±£¡¯¦. можно выделить только те свойства значение которых точно придется менять. Затем их нужно разместить в новом файле который задаст цветовую схему страницы по умолчанию таб
256 Глава ¾. Доступность и альтернативные устройства лица стилей для создания версии сайта повышенной контрастности будет содержать те же свойства с измененными значениями. Таким об
разом можно избежать необходимости работы с несколькими версиями по сути одной таблицы стилей.
Заключение
В настоящей главе мы рассмотрели несколько способов использова
ния таблиц стилей благодаря которым ваш сайт станет более доступ
ным для различных категорий пользователей. Правильное построение структуры документа уже само по себе облегчает работу с сайтом для пользователей экранных дикторов а использование альтернативных таблиц стилей дает разработчику новые инструменты для обеспечения удобства пользователей с ограниченными возможностями.
Глава .
Позиционирование элементов с помощью SS
Отбросив проблемы связанные с ошибками броузеров можно утверж
дать что основные принципы позиционирования элементов страницы с помощью CSS достаточно просты. Прочно усвоив основные правила вы вскоре обнаружите что решение сложных задач по сути заключа
ется в применении этих правил по отношению к различным частям до
кумента.
Данная глава начинается с рассмотрения основных методов построения макета страницы с помощью CSS а также представляет полезные приCSS а также представляет полезные при а также представляет полезные при
емы которые помогут вам создавать понастоящему красивые и ориги
нальные сайты. Они послужат фундаментом для дальнейшей реализа
ции ваших творческих идей. После прочтения данной главы вы полу
чите полное представление об инструментах CSS необходимых для созCSS необходимых для соз необходимых для соз
дания работоспособных сайтов. Во второй части главы мы углубимся в более частные задачи верстки макетов так что если с основными по
нятиями вы разобрались вы сможете найти в них необходимые для ре
шения собственных задач приемы.
В каких случаях следует использовать классы¤ а в каких – идентификатор
На первый взгляд использование классов и идентификаторов практи
чески не отличается друг от друга: и тому и другому можно присваи
вать CSSсвойства с необходимыми значениями для изменения вида элементов ÁÇÂλϺдокумента. Однако при каких обстоятельствах эфÇÂλϺдокумента. Однако при каких обстоятельствах эфÂλϺдокумента. Однако при каких обстоятельствах эфλϺдокумента. Однако при каких обстоятельствах эфдокумента. Однако при каких обстоятельствах эф
фективнее использовать классы а при каких – идентификаторыÐ
258 Глава À. Позиционирование элементов с помощью ­ Решение
Самое важное правило применения классов и идентификаторов состо
ит в том что идентификатор можно использовать только один раз в до
кументе поскольку он выполняет функцию выделения единственного элемента. Присвоенный элементу уникальный идентификатор больше нельзя использовать в том же документе.
Классы напротив можно использовать в документе произвольное ко
личество раз. Поэтому если некоторые свойства присущи сразу не
скольким элементам страницы использование классов можно считать идеальным решением.
Любому элементу можно одновременно присвоить и класс и идентифи
катор. В качестве примера такого элемента можно привести все располо
женные на странице поля для ввода текста для обращения к ним в сце
нарии на ˵̵SÍ¢¡ª¨ каждому полю придется также задать уникальный идентификатор. При этом не нужно определять для него какиелибо стили.
Как правило я присваиваю идентификатор самым основным элемен
там играющим важную роль в формировании структуры документа. Таким образом в моем коде чаще всего встречаются следующие иден
тификаторы: header content nav и footer. Ниже приведен пример кода:
<T html I “////T T 1. trict//”“http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”><head><title>Absolute positionin</title><meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”position.css” /></head><body> <div id=”header”> … </div>
<div id=”content”>
Á ain pae content here …
</div> <div id=”nav”> … </div>
</body></html>
Отображение строкового элемента как блочного¤ и наоборот
Иногда необходимо чтобы броузер обрабатывал определенные λϺ
эле менты несколько иным образом нежели по умолчанию.
Отображение строкового элемента как блочного и наоборот
259
Решение
На рис. . видно что элемент div отображается в непрерывном пото
ке элементов страницы а ссылка отображается как блочный элемент.
Рис. 9.1. Отображение блочного элемента в качестве строкового а строкового – в качестве блочного
Такой эффект был достигнут с помощью следующего кода:
­¢Å. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>Inline and block level elements</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <style type¡”te­t/css”> one backroundcolor ¤A¤A border p­ solid ©¤ paddin p­ ©p­ p­ ©p­ two backroundcolor ¤A¤A border p­ solid ©¤ paddin p­ ©p­ p­ ©p­ disla inline;
a backroundcolor ©¤ color ¤¤¤¤¤¤ te­tdecoration none paddin 1p­ p­ 1p­ p­ a.block 260 Глава À. Позиционирование элементов с помощью ­ disla bloc;
</style> </head> <body> <div id¡”one”>A div is a block level element.</div>
<p>It is possible to display a div or any other block level element as an inline element. </p> <div id=”two”>This div is displayin as an inline element.
</div> <p>This pararaph contains a <a href¡”http//www.sitepoint.com/”>link</a> thatdisplays as an inline element.</p> <p>This pararaph contains a <a class=”bloc” href¡”http//www.sitepoint.com/”>link</a> that displays as a block element.</p> </body></html>
Обсуждение
Блочные элементы отличаются от строковых тем что они могут содер
жать другие элементы любого типа. Они также форматируются иным образом: по умолчанию для их размещения отводится прямоугольная область по ширине занимающая всю страницу. Строковые элементы размещаются непосредственно в тексте причем для того чтобы они уместились внутри содержащего их блока осуществляется переход на новую строку. По умолчанию следующие λϺэлементы считаются блочными: заголовки Áh1 h h... абзацы Áp списки Ául ol и различ
ные контейнеры Ádiv block£uoteÂ.
В приведенном выше примере есть элемент div отображаемый в соот
ветствии с его типом. Будучи блочным элементом по ширине он зани
мает все доступное пространство родительского элемента – в данном случае body. Если бы он располагался внутри другого div или в ячейке таблицы его ширина соответствовала бы ширине этого элемента.
Чтобы div отображался подругому можно превратить его в строковый элемент путем изменения следующего свойства:
display inline Аналогичным образом можно превратить строковый элемент в блоч
ный. Обратите внимание что в рассмотренном ранее примере элемент a по умолчанию является строковым. У разработчика достаточно часто возникает потребность в изменении его типа на блочный например при создании навигационной панели с помощью CSS. Для этого нужно заCSS. Для этого нужно за. Для этого нужно за
дать свойству display значение block. В предыдущем примере благодаря использованию такого приема серое окошко со ссылкой по ширине за
нимает весь экран.
Задание внешних и внутренних отступов с помощью ­
261
Задание внешних и внутренних отступов с помощью SS
Чем отличаются свойства marin и paddin и в чем выражается результат их использованияÐ
Решение
Свойство marin добавляет пустое пространство за пределами элемента. Такой внешний отступ можно задавать независимо с каждой стороны:
marintop 1em marinriht em marinbottom .em marinleft em То же самое можно записать в сокращенной форме:
marin 1em em .em em Если отступы со всех сторон одинаковы можно использовать следую
щее простое правило:
marin 1em В результате его применения отступ между границей элемента и други
ми элементами составит 1em.
На рис. . показан вид блочного элемента после добавления к нему внешних отступов. Код документа таков:
­¢Å. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>arins</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <style type¡”te­t/css”> p backroundcolor ¤A¤A border p­ solid ©¤ ­arintest ­arin ¥; </style> </head> <body>
<p>This pararaph should be displayed in the default …</p> <p>This is another pararaph that has the default …</p>
262 Глава À. Позиционирование элементов с помощью ­ < class=”­arintest”>This ararah has a ¥ iel …</>
</body></html>
Рис. 9.2. Добавление к элементу внешних отступов с помощью ¯
Свойство paddin добавляет отступы внутри элемента – между его гра
ницей и дочерними элементами. Внутренние отступы можно задавать по отдельности с каждой стороны:
paddintop 1em paddinriht 1.em paddinbottom .em paddinleft em То же самое можно записать в сокращенной форме:
paddin 1em 1.em .em em Как и при использовании свойства marin если внутренние отступы со всех сторон одинаковы можно использовать следующее простое пра
вило:
paddin 1em На рис. . показан вид блочного элемента после добавления к нему внут ренних отступов. Код документа представлен ниже. Сравните его с документом изображенным на рис. . – разница между свойствами marin и paddin очевидна.
­¢Å¤¤. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>addin</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <style type¡”te­t/css”>
Задание внешних и внутренних отступов с помощью ­
263
p border p­ solid AAAAAA backroundcolor addintest addin ¥; </style> </head> <body>
<p>This pararaph should be displayed in the default …</p> <p>This is another pararaph that has the default …</p> < class=”addintest”>This ararah has ¥ iels …</>
</body></html>
Обсуждение
Приведенное решение наглядно демонстрирует назначение свойств marin и paddin. Как мы видим первое из них создает дополнительное пустое пространство между элементом и окружающими элементами а второе – внутри элемента между его границей и содержимым. Рису
нок .À служит прекрасной иллюстрацией к вышесказанному.
При одновременном добавлении как внешних так и внутренних отсту
пов к элементу с фиксированной шириной его размеры будут увеличе
ны соответствующим образом. К примеру у нас есть элемент с шириной в À пикселов к которому мы добавляем внутренний отступ величи
ной в À пикселов со всех сторон. В этом случае его ширина составит À пикселов Áизначально ширина в À пикселов плюс по À пикселов с каждой стороныÂ. Добавьте к этому внешний отступ в пикселов и в итоге элемент займет по ширине пикселов Áвидимая часть соста
вит À пикселов а пустое пространство со всех сторон – пикселовÂ. Если макет вашего документа основан на точном расчете обязатель
Рис. 9.3. Добавление элементу внутренних отступов с помощью ¯
26 Глава À. Позиционирование элементов с помощью ­ но просчитывайте величину каждого элемента не забывая о внешних и внутренних отступах.
Примечание
Путаница в режиме совместимости Очень старые версии nternet ¡p¢orer а именно ± и ±± считают что размер рамки и внутреннего отступа уже вклю
чен в указанную ширину элементаÁ в этих броузерах ширина описанных выше элементов сохранит значение ɲ² пикселов а изза добавления отступов и рамки размер видимой части элемента уменьшится Чтобы избежать возник
новения такой ситуации можно добавить внутренний отступ родительскому элементу вместо того чтобы задавать внешний отступ самому элементу В на
стоящее время большинство дизайнеров не считают обеспечение нормаль
ного отображения сайта в nternet ¡p¢orer ± приоритетной задачей поэтому единственное о чем следует задуматься – как избежать перехода nternet ¡p¢orer
£ в режим совместимости Этот вопрос был рассмотрен в главе ¹
Обтекание текстом изображения
Изображение можно окружить текстом средствами λϺ а именно с помощью атрибута alin. В настоящее время использовать его не ре
комендуется однако CSS предлагает полноценную замену этому атриCSS предлагает полноценную замену этому атри предлагает полноценную замену этому атри
бутуÚ
Решение
Для реализации обтекания текстом изображения слева или справа ис
пользуется CSSсвойство float как показано на рис. ..
Код страницы будет таким:
Рис. 9.4. Указание внешних и внутренних отступов а также параметров рамки элемента
Обтекание текстом изображения
265
­¢Å£­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>¤loat</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <style type¡”te­t/css”> .featureim loat let;
width 1¢p­ </style> </head> <body> <h1>hinesestyle stuffed peppers</h1>
<im src¡”peppers1.¦p” width¡”1¢” heiht¡”1” alt¡”peppers” class¡”featureim” />
<p>These stuffed peppers are lovely as a starter¨ or as a …</p> Á ore pararaphs
</body></html>
Рис. 9.5. Обтекание изображения текстом с помощью свойства £­
Обсуждение
Свойство float
удаляет элемент из обычного потока и размещает его у правого или левого края родительского блока. Остальные блочные Блоки для которых задано свойство ¤«¥µ¨ называют «плавающими» а сам эффект – «обтеканием». – Прим. перев.
266 Глава À. Позиционирование элементов с помощью ­ элементы будут вести себя так как будто указанного элемента вооб
ще не существует. Однако строковые элементы такие как контент бу
дут смещаться освобождая для него пространство и потому использо
вание свойства float создает эффект обтекания изображения текстом.
Как видно на рис. . текст расположен вплотную к границе изобра
жения. При добавлении к изображению рамки он будет соприкасать
ся с ней.
Для добавления пустого пространства между текстом и изображением необходимо задать для изображения внешний отступ. Поскольку оно смещено к левой границе родительского элемента достаточно будет до
бавить отступ справа и снизу чтобы слегка отодвинуть текст от него:
­¢Å£­µ. ­ ©фрагментª
.featureimae float left width 1¢p­ border p­ solid ­arin riht 2;
­arin botto­ ;
На рис. . показан результат обработки данного кода: теперь между изображением и текстом появился просвет.
Рис. 9.6. После добавления дополнительных отступов справа и снизу документ выглядит привлекательнее
Как избежать смещения следующего элемента вверх при использовании свойства ©¯º
После присвоения изображению или иному элементу свойства float остальные блочные элементы будут вести себя как будто его не суще
Как избежать смещения следующего элемента вверх при использовании Á³®¢t
267
ствует при этом содержащиеся в них текст и строчные изображения будут этот плавающий элемент обтекать. Как заставить элементы стра
ницы отобразиться ниже такого плавающего блокаÐ
Решение
Использование свойства clear позволяет отобразить заданный элемент под любыми элементами для которых задано свойство float как если бы они оставались частью потока элементов. К примеру зададим это свойство со значением both для первого абзаца следующего за списком ингредиентов:
­¢Å£­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>float and clear</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <style type¡”te­t/css”> .featureim float riht width 1¢p­ marinleft p­ marinbottom ©p­ border 1p­ solid clear clear both; </style> </head> <body> <h1>hinese style stuffed peppers</h1>
<im src¡”peppers1.¦p” width¡”1¢” heiht¡”1” alt¡”peppers” class¡”featureim” /> <ul> <li>1 tablespoon of oil</li> <li>1 crushed arlic clove</li> <li>eeled and finely chopped fresh iner root</li> <li> minced pork¨ beef or Ûuorn</li> <li>1 chopped sprin onion</li> <li>1 chopped celery stick</li> <li>¬rated rind of 1 lemon</li> <li>¤inely chopped red chilli optional</li> <li>® lare reen peppers</li> </ul>
<p class¡”clear”>These stuffed peppers are lovely as a…</p> Á ore pararaphs
268 Глава À. Позиционирование элементов с помощью ­ </body></html>
Как видно на рис. . на котором мы сдвинули плавающий элемент вправо при такой разметке абзац сдвигается вниз и располагается под плавающим изображением.
Рис. 9.7. Первый абзац отображается под изображением
Обсуждение
Свойство float удаляет элемент из потока и последующие блочные эле
менты простонапросто игнорируют его. Для более наглядной демон
страции этого механизма можно добавить элементам документа рамки в нашем случае – элементам ul и p как показано на рис. ..
Рис. 9.8. Добавление рамки шириной в два пиксела к элементам «» и «»
Как избежать смещения следующего элемента вверх при использовании Á³®¢tÂ
269
Плавающее изображение отображается поверх элементов блочного уровня. Содержащийся в них текст окружает его однако сами элемен
ты не обращают внимания на его наличие. Это означает что если вы
сота изображения в нашем примере превысит высоту списка ингреди
ентов следующий за списком абзац будет обтекать изображение как показано на рис. ..
Для размещения абзаца под нижней границей изображения можно вос
пользоваться свойством clear:
­¢Å£­. ­ ©фрагментª
.clear clear both Этот CSSкласс нужно присвоить первому тегу <p> следующему за спис
ком ингредиентов:
­¢Å£­. ­ ©фрагментª
<p class=”clear”>These stuffed peppers are lovely as a
starter¨ or as a side dish for a hinese meal. They also odown well as part of a buffet and even children seem to likethem.</p>
Оставим добавленные ранее рамки и обновим документ. Его нынешний вид показан на рис. . как видите указанный абзац начинается под изображением перца что особенно наглядно демонстрирует его рамка.
Рис. 9.9. Размещение абзаца под изображением с помощью свойства Свойство clear также может принимать значения left и riht что может пригодиться в случае если вы хотите чтобы элемент игнорировал свой
270 Глава À. Позиционирование элементов с помощью ­ ство float со значениями влево или вправо соответственно. Однако чаще всего вам потребуется значение both. Имейте в виду что использование свойств float и clear может привести к ошибкам интерпретации особен
но в §¨£¢§£¨ ©¦ª«¥¢£¢ – достаточно вспомнить «исчезающий контент» в §¨£¢§£¨ ©¦ª«¥¢£¢ о котором мы говорили в главе .
Как расположить логотип сайта слева¤ а слоган – справа
Если вы когданибудь верстали макет страницы с помощью таблиц то вам хорошо известно насколько просто достичь изображенного на рис. . эффекта. Достаточно выровнять содержимое левой ячейки та
блицы состоящей из двух колонок по левому краю а правой – по пра
вому. К счастью того же результата можно добиться и с помощью CSS.
Рис. 9.10. Расположение логотипа слева а слогана – справа с помощью ¯
Решение
Для позиционирования элементов указанным образом можно восполь
зоваться свойством float:
­¢Å. ­ ©фрагментª
Á<body> <div id¡”header”> <im src¡”staeloo.if” width¡”1” heiht¡”¢” alt¡”tae Ùamp creen” class¡”loo” /> <span class¡”sloan”>theatre and film reviews</span> </div></body>
Á
­¢Å.
body marin paddin backroundcolor ¤¤¤¤¤¤ color fontfamily Arial¨ elvetica¨ sansserif bordertop p­ solid A®¤©¤ header bordertop 1p­ solid ¢¢ Как расположить логотип сайта слева а слоган – справа
271
borderbottom 1p­ dotted © heiht em header .sloan font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¢¢ backroundcolor transparent float riht width p­ marinriht em marintop .em header .loo float left width 1p­ marinleft 1.em marintop .em Обсуждение
С помощью свойства float можно выравнивать элементы «шапки» по любой стороне. Перед добавлением данного свойства элементы будут отображаться рядом друг с другом как показано на рис. ..
Такое позиционирование элементов обусловлено λϺразметкой в которой не содержится никаких указаний относительно их располо
жения. Именно поэтому они просто следуют друг за другом. Рис. 9.11. Расположение элементов по умолчанию
Рассмотрим λϺкод управляющий расположением слогана:
­¢Å. ­ ©фрагментª
<div id¡”header”> <im src¡”staeloo.if” width¡”1” heiht¡”¢” alt¡”tae Ùamp creen” class¡”loo” /> <span class¡”sloan”>theatre and film reviews<span></div>
С помощью свойства float можно разместить элементы класса loo сле
ва а элементы класса sloan – справа. Кроме того я добавила правило для выравнивания текста слогана вправо без которого он прижимал
ся бы к левому краю содержащего его элемента span который выровнен вправоÚ Результат проведенных действий показан на рис. ..
272 Глава À. Позиционирование элементов с помощью ­ Рис. 9.12. Применение свойства £­ для позиционирования элементов
Для создания дополнительного пустого пространства вокруг элемен
тов добавим к логотипу внешний отступ сверху и слева а к слогану – сверху и справа:
­¢Å. ©фрагментª
header .sloan font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¢¢ backroundcolor transparent float riht width p­ te­talin riht marinriht em marintop .em header .loo float left width 1p­ marinleft 1.em marintop .em При использовании такого подхода следует учесть следующее: если вы делаете все элементы в контейнере плавающими то ничто не заставля
ет контейнер оставаться открытым и его высота уменьшается до нуля как показано на рис. ..
Рис. 9.13. При указании свойства £­ для дочерних элементов «шапки» она полностью сворачивается
Для большей наглядности я добавила к контейнеру логотипа и слога
на рамку. На рис. .À. показан вид контейнера до присваивания дочер
ним элементам свойства float.
Рис. 9.14. Размер «шапки» до присваивания дочерним элементам свойства £­
Позиционирование элемента на странице с помощью ­
273
После присваивания дочерним элементам свойства float высота кон
тейнера уменьшается до нуля поскольку теперь они удалены из общего потока элементов в документе в результате чего рамка контейнера пре
вратилась в сплошную красную линию как видно на рис. ..
Во избежание такой ситуации можно задать высоту блока с помощью свойства heiht:
­¢Å. ©фрагментª
header bordertop 1p­ solid ¢¢ borderbottom 1p­ dotted © heiht e­;
Теперь блок занимает отведенную ему область страницы как показано на рис. ..
Рис. 9.15. После задания свойства ­ для ¤» «шапкой» страница отображается совершенно нормально
При выборе значения свойства heiht в такой ситуации следует учиты
вать возможные изменения в документе при увеличении размера шриф
та пользователем. В качестве единиц измерения при этом лучше всего использовать em поскольку при этом высота элемента будет увеличи
ваться в соответствии с размером текста и он попрежнему сможет вме
стить его не «выталкивая» плавающие элементы.
Если бы объем текста в данном контейнере был неизвестен то следовало бы воспользоваться свойством clear о котором мы говорили чуть ранее.
Позиционирование элемента на странице с помощью SS
С помощью CSS можно указать точное расположение элемента на страCSS можно указать точное расположение элемента на стра можно указать точное расположение элемента на стра
нице.
Решение
CSS дает разработчику возможность абсолютного позиционирования элемента путем указания расстояния от него до верхнего левого право
го или нижнего края документа. Два блока изображенных на рис. . позиционированы абсолютно.
27 Глава À. Позиционирование элементов с помощью ­ Рис. 9.16. Абсолютное позиционирование блоков
Код страницы будет таким:
­¢Å­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>Absolute positionin</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”position.css” /> </head> <body>
<div id¡”bo­1”>This is bo­ one. It is positioned 1 pi­els from the top and pi­els from the left of the viewport. </div>
<div id¡”bo­”>This is bo­ two. It is positioned em from the bottom and em from the riht of the viewport.</div> </body></html>
­¢Å­.
bo­1 position absolute top 1p­ left p­ width 1p­ backroundcolor ® border p­ solid ® bo­ position absolute bottom em Позиционирование элемента на странице с помощью ­
275
riht em width 1p­ backroundcolor ¤¤¤A¤A border p­ solid Обсуждение
Задание элементу свойства position со значением absolute полностью удаляет его из основного потока элементов страницы. К примеру при добавлении нескольких абзацев текста в рассмотренный выше документ два блока будут отображаться поверх него как показано на рис. ..
Рис. 9.17. Два абсолютно позиционированных блока больше не принадлежат основному потоку элементов
В Î»Ïºкоде документа абзацы располагаются под абсолютно позициλϺкоде документа абзацы располагаются под абсолютно позицикоде документа абзацы располагаются под абсолютно позици
онированными элементами div однако последние удалены из основно
го потока поэтому при обработке кода текст начинается непосредствен
но в верхнем левом углу страницы как если бы блоков вообще не суще
ствовало.
Как мы увидим позже в разделе «Создание «резинового» макета с двумя колонками в котором слева расположено меню а справа – основная об
ласть с контентом» путем добавления внешних и внутренних отступов для других элементов с помощью свойств marin и paddin можно создать дополнительное пространство для размещения абсолютно позициониро
ванных элементов. Возможно из рассмотренного примера это напрямую не следует но элементы можно абсолютно позиционировать не только по отношению к краям документа Áхотя такой подход наиболее широко рас
пространен но и по отношению к краям родительского элемента.
На рис. . изображен документ содержащий два блока причем розо
вый блок вложен в синий. Поскольку последний также позициониро
276 Глава À. Позиционирование элементов с помощью ­ ван абсолютно то именно по отношению к его краям рассчитывается позиция розового блока при абсолютном позиционировании.
Рис. 9.18. Позиционирование одного блока по отношению к другому
При этом был использован следующий код:
­¢Å­µ. ­ ©фрагментª
<div id¡”bo­1”>This is bo­ one. It is positioned 1 pi­els from the top and 1 pi­els from the left of the viewport.
<div id¡”bo­”>This is bo­ two. It is positioned em from the bottom and em from the riht of the parent element bo­ one. </div></div>
­¢Å­µ.
bo­1 position absolute top 1p­ left 1p­ width ®p­ backroundcolor ® border p­ solid ® bo­ position absolute bottom em riht em width 1p­ backroundcolor ¤¤¤A¤A border p­ solid Для большей наглядности присвоим элементу bo­1 свойство heiht со значением пикселов:
­¢Å­. ©фрагментª
bo­1 position absolute top 1p­ Центрирование блока на странице
277
left 1p­ width ®p­ heiht ;
backroundcolor ® border p­ solid ® Как видно на рис. . розовый блок теперь целиком располагается внутри синего а не «вылезает» из него сверху. Такой эффект достигает
ся позиционированием розового блока по отношению к нижнему и пра
вому краям синего блока.
Рис. 9.19. Розовый блок отображается внутри синего
Примечание
Позиционирование от родителя Важно помнить что дочерние элементы µbo­
¶ могут позиционироваться по отношению к родительскому элементу µbo­1¶ только если расположение последнего также задано средствами C¯¯ Если для родительского элемента не задано свойство position дочерний эле
мент будет позиционироваться по отношению к краям первого позициониро
ванного предка – родителя родителя и т д – или в итоге элемента body µины
ми словами по отношению к краям документа¶ В приведенном выше примере при отсутствии позиционирования родительского элемента расположение дочернего элемента будет рассчитываться по отношению к краям документа поскольку он является предком следующего уровня
Центрирование блока на странице
В Сети достаточно часто встречаются сайты контент которых располо
жен в центрированном блоке с фиксированной шириной например как на рис. .. Как достичь такого эффекта средствами CSSÐ
278 Глава À. Позиционирование элементов с помощью ­ Рис. 9.20. Центрирование блока с фиксированной шириной с помощью ¯
Решение
Для центрирования блока с фиксированной шириной можно задать для него внешний отступ по бокам с помощью CSSсвойства marin со значе
нием auto: ­¢Å­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>entered o­</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”center.css” /> </head> <body> <div id¡”content”>
<p>This bo­ is © pi­els wide and centered in the document. </p>
<p>orem ipsum dolor sit amet¨ consectetuer adipiscin … </p> </div> </body></html>
­¢Å­.
body backroundcolor ¢ color content width ©p­ ­arin let auto;
Создание блока с закругленными краями
279
­arin riht auto; border p­ solid A© backroundcolor ¤¤¤¤¤¤ color paddin p­ p­ Обсуждение
Таким образом можно с легкостью центрировать блоки использование такого подхода оптимально для расположения области с контентом в центре страницы.
При задании свойству marin значения auto броузер создаст одинаковые отступы для блока как справа так и слева так что он будет расположен в центре. В разделе «Создание «резинового» макета с двумя колонками в котором слева расположено меню а справа – основная область с кон
тентом» мы познакомимся со способом расположения элементов внутри центрированного таким образом контейнера.
Примечание
Internet Erer µ Раньше при использовании такого приема нужно было указать несколько дополнительных C¯¯правил чтобы избежать возникновеC¯¯правил чтобы избежать возникновеправил чтобы избежать возникнове
ния ошибок в nternet ¡p¢orer ±¡ поскольку в этих версиях броузера не поnternet ¡p¢orer ±¡ поскольку в этих версиях броузера не по ¡p¢orer ±¡ поскольку в этих версиях броузера не по¡p¢orer ±¡ поскольку в этих версиях броузера не по ±¡ поскольку в этих версиях броузера не по¡ поскольку в этих версиях броузера не по поскольку в этих версиях броузера не по
лучалось центрировать контент с помощью внешних отступов Чтобы перехи
трить броузер нужно было задать свойство te­talin center для элемента body
и te­talin left для блока div содержащего контент Если вам необ
ходимо обеспечить нормальное отображение сайта с такой структурой в этом бедном старом броузере воспользуйтесь таким приемом Создание блока с закругленными краями
Существует несколько методов создания закругленных краев для бло
ка. Рассмотрим несколько из них:
Решение 1 SS3-свойство ¿ª°ª-ªº°½«
Существует свойство borderradius с помощью которого можно задать степень закругленности рамки вокруг блочного элемента. Это свойство будет включено в спецификацию CSS когда процесс ее разработки бу
дет завершен.
К сожалению в настоящее время ни один броузер не под
держивает свойство borderradius однако разработчики Sµ¤µ¢¡ и ¡¢£¤¥¦ реализовали экспериментальную поддержку такой возможности путем создания расширений предназначенных для конкретных броузеров.
­­..Ë¤ä­ ¤¤
­­£.­­.»¤£
280 Глава À. Позиционирование элементов с помощью ­ Более того поскольку эти расширения на самом деле являются частью движков соответствующих броузеров поэтому любой броузер осно
ванный на движке Ò£ÍᥠÁкак Cµ½¡§¥Â или Ñ£¼å¡¨ Áкак C²¢¥½£Â так
же поддерживает эти свойства. Данное решение будет работать толь
ко в самых последних версиях Sµ¤µ¢¡ ¡¢£¤¥¦ Cµ½¡§¥ и C²¢¥½£ но не в §¨£¢§£¨ ©¦ª«¥¢£¢ и 䪣¢µ. Ниже приведен λϺ и CSSкод а резуль
тат его обработки показан на рис. .:
­¢Å¡. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ounded orners</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”corners1.css” /> </head> <body> <div class¡”curvebo­”>
<p>orem ipsum dolor sit amet¨ consectetuer adipiscin</p> </div> </body></html>
­¢Å¡.
.curvebo­ width p­ paddin 1em backroundcolor ® color mo¥borderradius p­ webkitborderradius p­ Рис. 9.21. Блок с закругленными краями созданными с помощью ¯
В этом примере был создан блок с закругленными краями без единого изображенияÚ Эти аккуратные уголки были созданы благодаря исполь
зованию следующего свойства:
mo¥borderradius p­ webkitborderradius p­ Создание блока с закругленными краями
281
Если удалить эти свойства из таблицы стилей получим блок с обыч
ными прямыми углами как показано на рис. .. Точно так же блок будет отображен броузерами не поддерживающими данное свойство. Рис. 9.22. Вид блока в броузерах не поддерживающих свойство ¤¤
Безусловно поскольку данное решение подходит только для пользова
телей броузеров основанных на движке Ò£Íᥠили Ñ£¼å¡¨ большин
ство вебдизайнеров предпочитают пользоваться альтернативными ме
тодами.
Решение 2 использование изображений (с изменением разметки)
Желаемого результата можно добиться путем изменения λϺкода документа и добавления нескольких изображений. При этом блок бу
дет отображаться с закругленными краями в большинстве броузе
ров. Итак прежде всего создадим изображения закругленных угол
ков в графической программе. Это проще всего сделать путем разделе
ния круга на четверти как показано на рис. .. Каждый уголок будет представлен с помощью отдельного небольшого изображения. Рис. 9.23. Изображения закругленных уголков
Ниже представлена разметка документа в которую уже включены изо
бражения верхнего и нижнего левого уголков вложенные в верхний и нижний элементы div:
­¢Åµ. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ounded corners</title> <meta httpe£uiv¡”ontentType” content¡”te­t/html charset¡utf” />
282 Глава À. Позиционирование элементов с помощью ­ <link rel¡”stylesheet” type¡”te­t/css” href¡”corners.css” /> </head> <body> <div class¡”rndbo­”>
<div class¡”rndtop”><im src¡”topleft.if” alt¡”” width¡”” heiht¡”” /></div>
<p>orem ipsum dolor sit amet¨ consectetuer adipiscin</p>
<div class¡”rndbottom”><im src¡”bottomleft.if” alt¡”” width¡”” heiht¡”” /></div> </div> </body></html>
Изображения правого нижнего и верхнего уголка используются в каче
стве фоновых для соответствующих элементов div класса rndtop и rnd
bottom путем добавления соответствующих правил в таблицу стилей:
­¢Åµ. ©фрагментª
.rndbo­ backround ©¢A width p­ font .em ªerdana¨ Arial¨ elvetica¨ sansserif color .rndtop backround urltopriht.if norepeat riht top .rndbottom backround urlbottomriht.if norepeat riht top .rndbottom im displayblock .rndbo­ p marin .®em .®em Такое сочетание λϺ и CSSкода создает блок со сглаженными углаλϺ и CSSкода создает блок со сглаженными угла и CSSкода создает блок со сглаженными углаCSSкода создает блок со сглаженными углакода создает блок со сглаженными угла
ми показанный на рис. .À.
Рис. 9.24. Блок с закругленными краями созданный путем изменения Ô¹º
разметки и добавления изображений
Создание блока с закругленными краями
283
Решение 3 использование ¹º»ºS¬ª¼
Возможно использование дополнительного кода и изображений – не самый лучший вариант особенно если в вашем документе должно быть много блоков с закругленными краями. Для решения этой задачи мно
гие разработчики выбрали для создания закругленных краев блока ис
пользование ˵̵SÍ¢¡ª¨. Это вполне выигрышный вариант поскольку даже если пользователь отключит ˵̵SÍ¢¡ª¨ это никак не повлияет на возможность работы с сайтом – а просто отключит отображение допол
нительных декоративных элементов.
Создать закругленные края блока с помощью ˵̵SÍ¢¡ª¨ можно не
сколькими способами однако мы рассмотрим лишь один из них – ¡¤¨¹C±¼£ – поскольку его можно быстро добавить в код документа чтобы все заработало. Необходимый сценарий включен в архив кода для данной книги однако его последнюю версию в виде ³¡ªфайла мож
но загрузить с сайта ¡¤¨¹C±¼£.
После распаковывания архива вы уви
дите множество страниц демонстрирующих результат использования данного метода но для того чтобы самостоятельно применить его на практике вам понадобятся только два файла – ¡²µ³.· со сцена
рием на ˵̵SÍ¢¡ª¨ и ¡²C£¯¡¯. с кодом на CSS. Скопируйте эти файлы в директорию с вашим сайтом. За основу возьмем блок с прямоу
гольными краями созданный с помощью следующей разметки:
­¢Å­­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ounded orners</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”corners.css” /> </head> <body> <div class¡”curvebo­”> <p>orem ipsum dolor...</p> </div> </body></html>
Вы можете задать любой стиль оформления данного блока придер
живаясь всего лишь одного правила: внутренний отступ должен обя
зательно быть указан в пикселах. При использовании других единиц например em блок будет отображен некорректно в §¨£¢§£¨ ©¦ª«¥¢£¢. Ре§¨£¢§£¨ ©¦ª«¥¢£¢. Ре ©¦ª«¥¢£¢. Р婦ª«¥¢£¢. Ре. Ре
зультат проделанной работы показан на рис. ..
­­. ­.­­£­
28 Глава À. Позиционирование элементов с помощью ­ ­¢Å.
.curvebo­ width p­ addin 2;
backroundcolor ® color Рис. 9.25. Блок с прямоугольными краями
Чтобы края блока стали закругленными укажите ссылку на файл со сценарием на ˵̵SÍ¢¡ª¨ внутри элемента head вашего документа а за
тем добавьте простую функцию передающую в сценарий информацию о том что необходимо закруглить углы элементов класса curvebo­:
­¢Å. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ounded orners</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”corners.css” /> <scrit te=”tet/avascrit” src=”nitcubes”>
</scrit> <scrit te=”tet/avascrit”> windowonload=unction it“divcurvebo”; </scrit></head><body> <div class¡”curvebo­”>
<p>orem ipsum dolor sit amet¨ consectetuer adipiscin…</p>
Создание блока с закругленными краями
285
</div></body></html>
В результате получим блок изображенный на рис. ..
Рис. 9.26. Создание блока с закругленными углами без использования изображений или дополнительного Ô¹ºкода
Обсуждение
Существует множество методов создания блоков с закругленными кра
ями без использования ˵̵SÍ¢¡ª¨ однако все они подразумевают до
бавление дополнительной разметки или структурирования документа определенным образом.
Если ваш документ содержит лишь несколько блоков края которых вам хотелось бы закруглить – например основной контейнер или пару крупных блоков – то использование дополнитель
ных изображений и разметки не так уж критично. Однако если таких блоков много то портить разметку многочисленными дополнительны
ми элементами div и изображениями крайне нежелательно. Использова
ние ˵̵SÍ¢¡ª¨ позволяет сохранить ясность и четкость λϺкода но как и все решения с использованием сценариев оно будет работать толь
ко при условии что пользователь не отключил их поддержку.
На мой взгляд применение ˵̵SÍ¢¡ª¨ в таких случаях – для компенса˵̵SÍ¢¡ª¨ в таких случаях – для компенса в таких случаях – для компенса
ции недостаточной поддержки CSSсвойств – вполне оправдано. Если ваCSSсвойств – вполне оправдано. Если васвойств – вполне оправдано. Если ва
шим сайтом удобно пользоваться и без закругленных углов то пользова
тели отключившие ˵̵SÍ¢¡ª¨ останутся на нем. Перед тем как принять окончательное решение об использовании сценариев в вашем проекте обязательно протестируйте сайт в броузере с отключенным ˵̵ SÍ¢¡ª¨ чтобы убедиться в удобстве его использования при таких условиях.
Один из методов создания сглаженных углов с использованием семантиче
ски верной разметки без ˵̵SÍ¢¡ª¨ называется Sªµ§á¹ C¥¢§£¢¶ Á ­­­.
­­.Â. Он был разработан Алексом Уолкером Á°«£¦ ѵ«á£¢Â с сайта S¡¨£¸¥¡§¨.
286 Глава À. Позиционирование элементов с помощью ­ Создание «резинового» макета слева – меню¤ а справа – область с контентом
Сайты с меню слева и большой областью с контентом справа как на рис. . крайне часто встречаются в Сети. Рассмотрим способ создания такого макета с помощью CSS.
Рис. 9.27. Создание «резинового» макета с двумя колонками с помощью ¯
Решение
Для достижения показанного на рис. . эффекта использовались сле
дующая разметка и CSSкод:
­¢Åµ. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head>
<title>tae Ùamp creen theatre and film reviews</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <link rel¡”stylesheet” type¡”te­t/css” href¡”col.css” /> </head> <body>
Создание «резинового» макета слева – меню а справа – область с контентом
287
<div id¡”header”> <im src¡”staeloo.if” width¡”1” heiht¡”¢” alt¡”tae Ùamp creen” class¡”loo” /> <span class¡”strapline”>theatre and film reviews</span> </div> <div id¡”content”> <h1>elcome to tae Ùamp creen</h1>
<p>orem ipsum dolor sit amet¨ consectetuer adipiscin …</p> Á
</div> <div id¡”nav”> <ul> <li><a href¡””>lay eviews</a></li> <li><a href¡””>¤ilm eviews</a></li> <li><a href¡””>ost a eview</a></li> <li><a href¡””>About this site</a></li> <li><a href¡””>ontact s</a></li> </ul> <h>atest eviews</h> <ul> <li><a href¡””>Anels Ùamp emons</a></li> <li><a href¡””>tar Trek</a></li> <li><a href¡””>p</a></li> <li><a href¡””>and of the ost</a></li> </ul> </div> </body></html>
­¢Åµ.
body marin paddin backroundcolor ¤¤¤¤¤¤ color fontfamily Arial¨ elvetica¨ sansserif bordertop p­ solid A®¤©¤ header bordertop 1p­ solid ¢¢ borderbottom 1p­ dotted © heiht em header .strapline font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¢¢ backroundcolor transparent float riht 288 Глава À. Позиционирование элементов с помощью ­ width p­ te­talin riht marinriht em marintop .em header .loo float left width 1p­ marinleft 1.em marintop .em nav position absolute top em left 1em width 1®em nav ul liststyle none marin paddin nav li fontsi¥e « borderbottom 1p­ dotted © marinbottom .em nav alink¨ nav avisited te­tdecoration none color A®¤©¤ backroundcolor transparent nav ahover color ¢¢ nav h font 11« ¬eoria¨ “Times ew oman”¨ Times¨ serif color A®¤©¤ backroundcolor transparent borderbottom 1p­ dotted content marinleft 1©em Создание «резинового» макета слева – меню а справа – область с контентом
289
marinriht em h1 font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif content p fontsi¥e « lineheiht 1.©em Обсуждение
За основу макета возьмем «шапку» созданную в разделе «Как распо
ложить логотип сайта слева а слоган – справал. Добавив немного кон
тента разместим его внутри блока div с I content. Меню навигации со
стоит из двух маркированных списков расположенных в блоке с I nav. Как вы наверняка уже поняли при отсутствии какихлибо правил по
зиционирования эти блоки будут расположены под «шапкой» в том же порядке в котором они следуют друг за другом в документе Áкак пока
зано на рис. .Â.
Рис. 9.28. Отображение контента и навигации без позиционирования
На данном этапе CSSкод выглядит следующим образом:
290 Глава À. Позиционирование элементов с помощью ­ ­¢Åµ. ©фрагментª
body marin paddin backroundcolor ¤¤¤¤¤¤ color fontfamily Arial¨ elvetica¨ sansserif bordertop p­ solid A®¤©¤ header bordertop 1p­ solid ¢¢ borderbottom 1p­ dotted © heiht em header .sloan font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¢¢ backroundcolor transparent float riht width p­ te­talin riht marinriht em marintop .em header .loo float left width 1p­ marinleft 1.em marintop .em Задание размера и позиционирование менюДля размещения меню непосредственно под панелью с заголовком вос
пользуемся методом абсолютного позиционирования а также зададим его ширину:
­¢Åµ. ©фрагментª
nav position absolute top em left 1em width 1®em Как видно на рис. . после добавления этого правила меню распола
гается поверх текста поскольку при абсолютном позиционировании оно было удалено из общего потока элементов документа.
Создание «резинового» макета слева – меню а справа – область с контентом
291
Рис. 9.29. Абсолютное позиционирование меню
Позиционирование блока с контентом Поскольку перед нами стоит задача создания «резинового» макета не
желательно задавать ширину области с контентом но впрочем это в любом случае не обязательно. Однако в настоящее время область с контентом размещается там где должно быть меню. Чтобы все встало на свои места достаточно задать для области с контентом свойство mar
in освободив пространство для меню. Результат показан на рис. ..
content marinleft 1©em marinriht em Теперь все элементы расположены аккуратно по отношению друг к дру
гу и можно перейти к заданию стиля каждого из них с помощью CSS чтобы получить результат изображенный на рис. .. Использован
ная таблица стилей приведена полностью в начале раздела.
Совет
Использование e¶ для позиционирования блоков с текстом В качестве единиц измерения для позиционирования элементов документа я использо
вала em Это обеспечит пропорциональное изменение размеров блока при из
менении пользователем размера шрифта позволяя избежать перекрытия эле
ментов Такое решение оптимально для задания ширины блоков и отступов на 292 Глава À. Позиционирование элементов с помощью ­ сайте содержащем много текстовой информации Однако если дизайн сайта подразумевает использование большого количества изображений этот под
ход следует использовать с осторожностью ведь изображения не изменяют свой размер наряду с текстом Если вам необходим точный контроль за распо
ложением элементов на странице возможно следует использовать в качестве единиц измерения пикселы
Рис. 9.30. Добавление внешних отступов для области с контентом
Изменение расположения элементов макета на противоположное¤ чтобы меню было справа
Можно ли с помощью метода описанного в разделе «Создание «резино
вого» макета с двумя колонками в котором слева расположено меню а справа – основная область с контентом» создать макет в котором меню расположено справаÐ
Решение
Конечно это можно сделать с помощью того же методаÚ Для этого нуж
но переместить меню слева направо и задать для области с контентом большой внешний отступ справа чтобы освободить для меню место. Ре
зультат показан на рис. ..
Изменение расположения элементов макета на противоположное
293
Рис. 9.31. Создание двухколоночного макета с меню справа
Обсуждение
Чтобы разместить меню справа не нужно вносить никаких изменений в разметку документа – достаточно всего лишь изменить свойства за
дающие позиционирование элемента nav и внешние отступы для эле
мента content:
­¢Åµ».
nav position absolute top em riht 1em width 1®em content marinleft em marinriht 1©em В этом случае преимущества использования абсолютного позициони
рования налицо. Неважно где наше меню находится в разметке доку
мента – при использовании абсолютного позиционирования оно будет удалено из основного потока элементов и его можно разместить в лю
бом месте страницы. Это очень удобно с точки зрения доступности сай
та поскольку разработчик может разместить менее важные элементы Áнапример список ссылок на другие сайты рекламу и т. д. в конце кода документа. Таким образом пользователям экранных дикторов не 29 Глава À. Позиционирование элементов с помощью ­ придется тратить время на прослушивание этой маловажной информа
ции при каждом обращении к странице. В то же время для достижения желаемого визуального эффекта вы можете позиционировать элементы в любом месте страницы.
Макет фиксированной ширины с двумя колонками по центру страницы
С помощью CSS можно создать макет с двумя колонками расположенCSS можно создать макет с двумя колонками расположен можно создать макет с двумя колонками расположен
ными внутри центрированного блока.
Решение
Создание центрированного макета фиксированной ширины состояще
го из двух колонок – чуть более сложная задача чем создание фикси
рованного макета выровненного по левому краю или «резинового» ма
кета поскольку при этом отсутствует абсолютная точка отсчета справа или слева которую можно использовать для позиционирования эле
ментов по горизонтали. Тем не менее есть несколько способов решения этой проблемы с помощью которых можно создать страницу подобную той что мы увидим на иллюстрации ниже.
Вне зависимости от избранного вами метода λϺкод будет одинакоλϺкод будет одинакокод будет одинако
вым:
­¢Åµ£¦¤¤­ . ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ecipe for uccess Ú erfect i¥¥a</title> <link href¡”colfi­edwidth.css” rel¡”stylesheet” type¡”te­t/css” /> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> </head> <body> <div id¡”wrapper”> <div id¡”header”> <h1>erfect i¥¥a</h1> </div> <div id¡”content”><h>hoosin our Toppins</h><p>ed nec erat sed sem molestie conue. ras lacus …</p>
Á</div><div id¡”nav”><ul>
Макет фиксированной ширины с двумя колонками по центру страницы
295
<li><a href¡””>repare the ouh</a></li><li class¡”cur”><a href¡””>hoose our Toppins</a></li><li><a href¡””>i¥¥a vens</a></li><li><a href¡””>ide alads</a></li></ul></div></div></body></html>
Для решения поставленной задачи проще всего разместить область с контентом и навигационное меню внутри центрированного блока с помощью абсолютного и относительного позиционирования соответ
ственно:
­¢Åµ£¦¤¤­ .
body marin paddin fontfamily Arial¨ elvetica¨ sansserif backroundcolor ¤¤¤¤¤¤ wrapper position relative width ©p­ marinriht auto marinleft auto marinbottom 1em header backroundimae urlkitchen.¦p backroundrepeat norepeat heiht p­ position relative header h1 marin paddin .em 1p­ .em te­talin riht width p­ fontweiht normal color ¤¤¤¤¤¤ fontsi¥e 1¢« position absolute bottom left backroundimae urlblackpercent.pn content marinleft p­ 296 Глава À. Позиционирование элементов с помощью ­ width p­ paddin 1p­ content h fontsi¥e 1« color ¤¤ backroundcolor transparent marin paddin 1.®em content p fontsi¥e « lineheiht 1.© nav position absolute top p­ left width p­ nav ul liststyle none marin em paddin border none nav li fontsi¥e « nav alink¨ nav avisited color backroundcolor transparent display block paddin 1em 1p­ te­tdecoration none minheiht ®p­ nav ahover¨ nav li.cur alink¨ nav li.cur avisited color ¤¤¤¤¤¤ backroundimae urlarrow.if backroundrepeat norepeat Как видно на рис. . в результате получится достаточно простой ма
кет. Если вы хотите усложнить дизайн страницы добавив некоторые декоративные элементы – например задав фоновое изображение для области с контентом или рамку для всего макета – придется использо
вать другой метод.
В качестве альтернативного варианта можно просто задать свойство float для меню навигации и для блока с контентом чтобы они распола
Макет фиксированной ширины с двумя колонками по центру страницы
297
гались с левой и правой стороны центрированного блока соответствен
но. Использование данного свойства дает разработчику возможность гибкого внесения дальнейших изменений в макет например если за
тем потребуется добавить блок в нижнюю часть страницы Áдля этого достаточно задать для него свойство clear со значением both чтобы он располагался под двумя колонками независимо от их высоты что не
возможно при их абсолютном позиционировании или задать для маке
та обрамление. Воспользовавшись преимуществами данного способа мы добавили рамку вокруг макета:
­¢Åµ£¦¤¤­ £­.
body marin paddin fontfamily Arial¨ elvetica¨ sansserif backroundcolor ¤¤¤¤¤¤ wrapper position relative width ©p­ marinriht auto marinleft auto marinbottom 1em backroundimae urlsidebar.if backroundrepeat repeaty Рис. 9.32. Центрированный макет с фиксированной шириной
298 Глава À. Позиционирование элементов с помощью ­ borderriht 1p­ solid borderbottom 1p­ solid header backroundimae urlkitchen.¦p backroundrepeat norepeat heiht p­ position relative header h1 marin paddin .em 1p­ .em te­talin riht width p­ fontweiht normal color ¤¤¤¤¤¤ fontsi¥e 1¢« position absolute bottom left backroundimae urlblackpercent.pn content float riht width p­ paddin 1p­ content h fontsi¥e 1« color ¤¤ backroundcolor transparent marin paddin 1.®em content p fontsi¥e « lineheiht 1.© nav float left width p­ nav ul liststyle none marin em paddin border none nav li Макет фиксированной ширины с двумя колонками по центру страницы
299
fontsi¥e « nav alink¨ nav avisited color backroundcolor transparent display block paddin 1em 1p­ te­tdecoration none minheiht ®p­ nav ahover¨ nav li.cur alink¨ nav li.cur avisited color ¤¤¤¤¤¤ backroundimae urlarrow.if backroundrepeat norepeat footer clear both fontsi¥e « paddin 1em 1em marinleft p­ color ¢¢¢¢¢¢ backroundcolor transparent Результат обработки данного кода показан на рис. ..
Рис. 9.33. Создание центрированного макета фиксированной ширины с рамкой с использованием свойства £­
300 Глава À. Позиционирование элементов с помощью ­ Обсуждение
Чтобы не отвлекаться от основной темы не будем заниматься заданием свойств для цветового оформления размера и типа шрифта сконцен
трировав все внимание на методах создания макета. В обеих версиях макета мы будем использовать центрированный div как в примерах с которыми мы работали в разделе «Центрирование блока на странице». Для него задан I со значением wrapper:
­¢Åµ£¦¤¤­ . или ­¢Åµ£¦¤¤­ £­. ©фрагментª
body marin paddin Á
wrapper width ©p­ marinriht auto marinleft auto Á
Результат применения этих стилей показан на рис. .À.
Рис. 9.34. Центрирование контента на странице
В разделе «Создание «резинового» макета с двумя колонками в кото
ром слева расположено меню а справа – основная область с контентом» мы узнали что для расположения меню навигации можно использо
Макет фиксированной ширины с двумя колонками по центру страницы
301
вать абсолютное позиционирование а во избежание его перекрытия с областью контента последней следует задать большой внешний от
ступ. В данном случае единственное отличие от того примера состоит в том что навигационное меню должно располагаться внутри центри
рованного блока wrapper поэтому его нельзя позиционировать на стра
нице абсолютно.
При задании элементу свойства position вместо значения absolute мож
но указать relative – при этом элемент не будет удален из общего по
тока вместо этого он будет смещен по отношению к своей позиции на странице по умолчанию Áоднако если никаких параметров смещения указано не будет он будет отображен как если бы свойство position не было заданоÂ. Однако в отличие от элементов для которых свойство po
sition не задано относительно позиционированный элемент послужит в качестве системы координат для размещения любого дочернего эле
мента с абсолютным позиционированием.
По сути позиция элемента для которого задано свойство position ab abab
solute расположенного внутри элемента со свойством position relative будет рассчитываться по отношению к краям родительского элемента. Именно это нам и нужно для позиционирования меню навигации вну
три центрированного блока в данном примере.
Прежде всего следует задать элементу wrapper свойство position со зна
чением relative:
­¢Åµ£¦¤¤­ . ©фрагментª
wrapper osition relative;
te­talin left width ©p­ marinriht auto marinleft auto Á
Затем позиционируем блок с навигацией абсолютно:
­¢Åµ£¦¤¤­ . ©фрагментª
nav osition absolute; top p­ left width p­ Наконец добавим для области с основным контентом внешний отступ чтобы освободить место для только что размещенного меню навигации:
302 Глава À. Позиционирование элементов с помощью ­ ­¢Åµ£¦¤¤­ . ©фрагментª
content ­arin let 2;
paddin 1p­ Такой макет выглядит идеально при условии что область с основным контентом занимает больше пространства по вертикали чем панель навигации. К сожалению абсолютно позиционированный блок nav не может оказывать никакого влияния на высоту блока wrapper поэтому если область с контентом будет короче панели навигации блок wrap
per не сможет вместить все содержащиеся в панели навигации ссыл
ки. Чтобы убедиться в этом на практике можно добавить для элемен
та wrapper цветную рамку шириной в два пиксела а на панель навига
ции добавить больше текста чтобы она превысила область с контентом по высоте. На рис. . видно что содержимое панели навигации вы
ходит за пределы элемента wrapper.
Рис. 9.35. Содержимое панели навигации выходит за пределы блока «»
Другое решение поставленной задачи состоит в использовании плава
ющих блоков. Его сложнее реализовать но оно позволяет преодолеть указанное ограничение предыдущего метода и вы сможете добавлять Макет фиксированной ширины с двумя колонками по центру страницы
303
элементы в нижнюю часть страницы вне зависимости от того какая из колонок длиннее. Прежде всего разместим блок навигации слева а блок content – справа с помощью свойства float:
­¢Åµ£¦¤¤­ £­. ©фрагментª
content loat riht;
width p­ paddin 1p­ nav loat let;
width p­ Данный код позволяет получить тот же результат что и при использова
нии рассмотренного выше метода. Однако теперь при добавлении цвет
ной рамки для элемента wrapper вы увидите что она обрамляет только «шапку» страницы. Оберткой wrapper больше ничего не обернутоÚ
Рис. 9.36. Расположение плавающих блоков справа и слева Основной причиной использования плавающих блоков послужила необ
ходимость добавления блока в нижнюю часть страницы. Для этого в код документа под плавающими блоками нужно добавить следующее:
­¢Åµ£¦¤¤­ £­. ­ ©фрагментª
<div id¡”nav”> <ul>
30 Глава À. Позиционирование элементов с помощью ­ <li><a href¡””>repare the ouh</a></li> <li class¡”cur”><a href¡””>hoose our Toppins</a></li> <li><a href¡””>i¥¥a vens</a></li> <li><a href¡””>ide alads</a></li> </ul></div><div id=”ooter”>§co; 2 ¨ecie or success</div></div></body></html>
После обновления страницы вы увидите что теперь рамка блока wrap
per окружает весь контент страницы как показано на рис. .. Дело в том что после удаления плавающих блоков из основного потока эле
ментов там остался единственный элемент – блок footer отодвинутый плавающими блоками в левый нижний угол блока wrapper.
Если для блока footer задать свойство clear со значением both то он бу
дет размещен ниже обоих плавающих блоков и потому wrapper вместит и панель навигации и контент причем неважно какой из элементов окажется длиннее. Текущий вид страницы показан на рис. .:
­¢Åµ£¦¤¤­ £­. ©фрагментª
footer clear both Á
Рис. 9.37. Страница после добавления блока £­ Создание колонки занимающей все доступное пространство по высоте
305
Рис. 9.38. Для блока £­ задано свойство ­ Создание колонки¤ занимающей все доступное пространство по высоте
Если вы когданибудь пробовали задать фон для боковой колонки по
добной той что мы создали в разделе «Создание макета фиксированной ширины с двумя колонками расположенного по центру страницы» то наверняка убедились в невозможности задания для нее той же высоты что и у расположенной рядом более длинной колонки изза чего добав
ленный фон выглядит немного странно. К примеру при задании фоно
вого цвета для блока с панелью навигации он займет по высоте только область в которой расположены ссылки а не всю область с контентом как показано на рис. ..
Решение
Для решения этой проблемы можно добавить фоновое изображение к элементу страницы длина которого совпадает с длиной второй колон
ки а ширина соответствует ширине панели навигации. При этом соз
дастся впечатление будто фон принадлежит самой панели навигации. В нашем случае можно добавить фоновое изображение для элемента wrapper как показано на рис. .À:
306 Глава À. Позиционирование элементов с помощью ­ Рис. 9.39. Серый фоновый цвет окрашивает только область со ссылками
Рис. 9.40. Фон как бы привязан к панели навигации
Добавление тени к блоку
307
­¢Åµ£¦¤¤­ £­. ©фрагментª
wrapper position relative te­talin left width ©p­ marinriht auto marinleft auto marinbottom 1em bacround i­ae urlsidebari;
bacround reeat reeat ; borderriht 1p­ solid borderbottom 1p­ solid Обсуждение
Этот несложный прием можно с успехом применять при создании раз
личных макетов страниц. В данном примере фоновый цвет был задан для блока wrapper поскольку фон должен простираться вниз до конца области с контентом изображение «шапки» закрывает фоновое изобра
жение панели навигации в верхней части страницы. Аналогичным об
разом можно сделать так чтобы фоновое изображение распространя
лось до нижнего блока или после определенной области контента: для этого достаточно задать фоновое изображение для элемента содержа
щего необходимую область.
Совет
Использование фонового градиента В данном примере было использова
но одинаковое повторяющееся изображение однако вместо него можно было бы использовать вертикальное изображение с градиентным переходом плав
но сливающееся с цветом фона страницы задав для него значение norepeat
Добавление тени к блоку
На многих страницах можно встретить элементы отбрасывающие тень – чаще всего это область размещения основного контента. Добавим такую тень к макету фиксированной ширины подобному тому с кото
рым мы работали в разделе «Создание колонки занимающей все до
ступное пространство по высоте».
Решение
Для добавления тени к краям блока нам потребуется два изображения: одно послужит в качестве фона другое создаст тень внизу. На рис. .À показан создаваемый эффект.
308 Глава À. Позиционирование элементов с помощью ­ Рис. 9.41. Блок отбрасывающий тень
Для создания такого эффекта нужно добавить в разметку документа до
полнительный код который послужит каркасом для размещения изо
бражений. Первое изображение с именем ±¦¢£¤³°.·¶° показанное на рис. .À послужит в качестве фонового изображения для блока div Í I wrapper. Оно будет создавать тень по бокам по всей высоте страницы. Второе изо
бражение ±¦¢£¤³££ª.·¶° будет использовано для создания тени в нижней части блока.
Рис. 9.42. Файлы для создания эффекта тени
Ширина блока wrapper увеличена на пикселов поскольку я хочу что
бы размер области с контентом оставался прежним но сам контент не соприкасался с ее краями. Кроме того я добавила первое изображение в качестве фонового для данного элемента:
Добавление тени к блоку
309
­¢Åµ£¦¤¤­ ¤. ©фрагментª
wrapper position relative te­talin left width ;
marinriht auto marinleft auto bacround i­ae urlshadow b; bacround reeat reeat ;
Затем создадим дополнительный блок div с именем wrapper содержащий элементы content nav и footer и расположенный внутри блока wrapper.
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ecipe for uccess Ú erfect i¥¥a</title> <link href¡”colfi­edwidthshadow.css” rel¡”stylesheet” type¡”te­t/css” /> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> </head> <body> <div id¡”wrapper”><div id=”wraer2”>
<div id¡”header”> <h1>erfect i¥¥a</h1> </div> <div id¡”content”> <h>hoosin our Toppins</h>
<p>ed nec erat sed sem molestie conue. ras lacus …</p>
<p>ªestibulum dictum massa at odio. In dinissim …</p> </div> <div id¡”nav”> <ul> <li><a href¡””>repare the ouh</a></li>
<li class¡”cur”><a href¡””>hoose our Toppins</a></li> <li><a href¡””>i¥¥a vens</a></li> <li><a href¡””>ide alads</a></li> </ul> </div> <div id¡”footer”>Ùcopy ¢ ecipe for success</div> </div></div>
</body></html>
Для добавленного блока задано фоновое изображение отображаемое в области панели навигации Áвместо внешнего wrapperÂ. Кроме того ему задано свойство paddin чтобы немного отодвинуть контент от его края:
310 Глава À. Позиционирование элементов с помощью ­ ­¢Åµ£¦¤¤­ ¤. ©фрагментª
wrapper backroundimae urlsidebar.if backroundrepeatrepeaty marin 1p­ 1p­ Наконец нужно добавить изображение для создания тени снизу. Для этого создадим еще один блок div с идентификатором btm прямо перед закрывающим тегом </div> внешнего блока wrapper.
­¢Åµ£¦¤¤­ ¤. ­ ©фрагментª
<div id¡”footer”>Ùcopy ¢ ecipe for success</div></div><div id=”bt­”></div></div></body></html>
Теперь достаточно задать фоновое изображение для данного блока и за
дать блоку высоту равную высоте изображения.
­¢Åµ£¦¤¤­ ¤. ©фрагментª
btm backroundimae urlshadowbottom.¦p backroundrepeat norepeat display block heiht 1p­ Вот и все тень готоваÚ
Создание макета с тремя колонками средствами SS
Дизайн многих страниц предполагает разделение пространства на три части. Как видно на рис. .À одна колонка содержит панель навига
ции другая – основной контент а третья – дополнительную информа
цию например рекламные объявления. Рассмотрим способ создания такого макета с помощью CSS.
Решение
Для создания «резинового» макета с тремя колонками используется тот же простой метод который мы использовали в разделе «Создание «резинового» макета с двумя колонками в котором слева расположено меню а справа – основная область с контентом»:
Создание макета с тремя колонками средствами ­
311
Рис. 9.43. Макет из трех колонок созданный с помощью ¯
­¢Å. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ecipe for uccess</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> <link rel¡”stylesheet” type¡”te­t/css” href¡”col.css” /> </head> <body> <div id¡”content”> <h1>ecipe for uccess</h1>
<p>orem ipsum dolor sit amet¨ consectetuer adipiscin …</p> <p>Ûuis£ue sodales imperdiet enim. Ûuis£ue cursus …</p> </div> <div id¡”side1”> <form method¡”post” action¡”” id¡”searchform”> <h><label for¡”keys”>earch the ecipes</label></h> <div>
<input type¡”te­t” name¡”keys” id¡”keys” class¡”t­t” /> <br />
<input type¡”submit” name¡”ubmit” value¡”ubmit” /> </div> </form>
312 Глава À. Позиционирование элементов с помощью ­ <ul> <li><a href¡””>About s</a></li> <li><a href¡””>ecipes</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> <li><a href¡””>ontact s</a></li> </ul> </div> <div id¡”side”> <h>lease ªisit our ponsors</h>
<div class¡”adbo­”><p>orem ipsum dolor sit amet …</p></div>
<div class¡”adbo­”><p>ed mattis¨ orci eu porta …</p></div>
<div class¡”adbo­”><p>Ûuis£ue mauris nunc¨ mattis …</p></div> </div> </body></html>
­¢Å.
body marin paddin backroundimae urltomatoËb.¦p backroundrepeat norepeat backroundcolor ¤¤¤¤¤¤ p font «/1.em ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif paddintop marintop form marin paddin content marin ©©p­ ©p­ p­ ®p­ paddin 1p­ content h1 te­talin riht paddinriht p­ font 1« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ¢1© side1 position absolute width p­ top p­ left 1p­ paddin p­ 1p­ 1p­ 1p­ Создание макета с тремя колонками средствами ­
313
side position absolute width p­ top p­ riht 1p­ paddin p­ 1p­ 1p­ 1p­ borderleft 1p­ dotted backroundimae urlsmtomato.¦p backroundposition top riht backroundrepeat norepeat side h font 11« ¬eoria¨ “Times ew oman”¨ Times¨ serif marin paddinbottom ®p­ .adbo­ paddin p­ ®p­ p­ ©p­ marin 1p­ border 1p­ dotted 111 backroundcolor ¤®¤®¤® side1 h font 11« ¬eoria¨ “Times ew oman”¨ Times¨ serif color ©11 backroundcolor transparent marin paddinbottom ®p­ side1 .t­t width 1®p­ backroundcolor ¤¤¤ border 1p­ inset ¢1© side1 ul liststyle none marinleft paddinleft width 1®p­ side1 li font « ªerdana¨ ¬eneva¨ Arial¨ elvetica¨ sansserif marinbottom .em borderbottom 1p­ solid A¤A¤ side1 alink¨ side1 avisited te­tdecoration none color ¢1© backroundcolor transparent 31 Глава À. Позиционирование элементов с помощью ­ side1 ahover color ©11 Обсуждение
Создать такой макет совсем не сложно. За основу мы возьмем неформа
тированный документ показанный на рис. .ÀÀ который содержит три блока div: один с идентификатором content второй с идентификатором side1 и третий с идентификатором side.
Рис. 9.44. Неформатированный àÔ¹ºдокумент
Три колонки были созданы с помощью приведенного ниже CSSкода. Левая и правая колонки позиционированы абсолютно: side1 размеща
ется в левой части страницы а side – в правой. Кроме того для них за
дан большой отступ сверху чтобы освободить пространство для фоно
вых изображений которые будут выступать в качестве заголовков:
­¢Å. ©фрагментª
side1 position absolute width p­ top p­ left 1p­ paddin p­ 1p­ 1p­ 1p­ ­¢Å. ©фрагментª
side position absolute Добавление к «резиновому» макету нижнего блока
315
width p­ top p­ riht 1p­ paddin p­ 1p­ 1p­ 1p­ Á
Блок content расположен между двумя абсолютно позиционированны
ми колонками для которых освобождено достаточно пространства пу
тем задания для content внешних отступов с помощью свойства marin:
­¢Å. ©фрагментª
content marin ©©p­ ©p­ p­ ®p­ paddin 1p­ На рис. .À показан вид страницы после задания свойств для позици
онирования элементов.
Рис. 9.45. Три колонки позиционированные с помощью ¯
Теперь когда все колонки на месте можно задать стиль оформления для отдельных элементов чтобы они соответствовали дизайну страни
цы. Я добавила фоновое изображение с томатами для элементов body и side в результате чего получилась страница которую мы уже виде
ли на рис. .À.
Добавление к «резиновому» макету нижнего блока
Если вы уже какимто образом экспериментировали с абсолютным по
зиционированием то у вас наверняка закралось подозрение что вер
стка макета основанная на абсолютном позиционировании не позво
лит добавить нижний блок который будет отображаться ниже всех 316 Глава À. Позиционирование элементов с помощью ­ трех колонок независимо от их высоты. Надо признать чутье вас не подвело. Чтобы добавить нижний блок к такому трехколоночному макету нуж
но использовать плавающие блоки. Однако при создании «резинового» макета с плавающими блоками возникают дополнительные проблемы в отличие от использования аналогичного макета фиксированной ши
рины. При задании элементу свойства float ему нужно задать также и ширину. Если нам известна ширина всего макета это не представля
ет никаких сложностей. При работе с «резиновым» макетом как в раз
деле «Создание макета с тремя колонками средствами CSS» у нас есть две колонки ширина которых нам известна Áбоковых панелей однако ширину области с контентом мы не знаем – она меняется заполняя все свободное пространство.
Решение
Для решения проблем возникающих при наличии колонки с перемен
ными размерами в «резиновом» макете придется немного усложнить макет страницы используя отрицательные отступы для освобожде
ния пространства для размещения колонки с фиксированной шириной в гибко изменяющей свои размеры области с контентом. Кроме того в разметку документа необходимо добавить следующий код для созда
ния самих плавающих элементов:
­¢Å­. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ecipe for uccess</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”colalt.css” /> </head> <body> <div id¡”wrapper”> <div id¡”content”> <div id¡”side1”> <form method¡”post” action¡”” id¡”searchform”>
<h><label for¡”keys”>earch the ecipes</label></h> <div> <input type¡”te­t” name¡”keys” id¡”keys” class¡”t­t” /><br />
<input type¡”submit” name¡”ubmit” value¡”ubmit” /> </div> </form> <ul> <li><a href¡””>About s</a></li>
Добавление к «резиновому» макету нижнего блока
317
<li><a href¡””>ecipes</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> <li><a href¡””>ontact s</a></li> </ul> </div> <div id¡”main”> <h1>ecipe for uccess</h1> <p>orem ipsum dolor sit amet¨ consectetuer …</p> <p>Ûuis£ue sodales imperdiet enim. Ûuis£ue …</p> </div> </div> </div> <div id¡”side”> <h>lease ªisit our ponsors</h>
<div class¡”adbo­”><p>orem ipsum dolor sit amet …</p></div>
<div class¡”adbo­”><p>ed mattis¨ orci eu porta …</p></div>
<div class¡”adbo­”><p>Ûuis£ue mauris nunc¨ mattis …</p></div> </div> <div id¡”footer”> Á footer content…
</div> </body></html>
В таблице стилей блоку wrapper задана ширина â и отрицательный внешний отступ – пикселов. Благодаря использованию отрица
тельных отступов можно задать боковой панели изменяемую ширину Áна пикселов меньше окна броузераÂ.
Затем можно разместить боковые панели справа и слева от области с контентом с помощью свойства float:
­¢Å­. ©фрагментª
body marin paddin wrapper width1« floatleft marinriht p­ marintop ©©p­ content marinriht p­ main marinleft p­ 318 Глава À. Позиционирование элементов с помощью ­ side1 widthp­ floatleft paddin 1p­ 1p­ side width 1¢p­ paddin p­ 1p­ 1p­ floatriht footer clearboth bordertop 1p­ solid Как видно на рис. .À при использовании такой таблицы стилей ко
лонки располагаются именно так как было задумано а нижний блок размещается прямо под всеми тремя колонками. Аналогичным обра
зом можно создать и макет состоящий из двух колонок: их порядок можно изменить путем изменения значения свойства float с left на riht. Если вы немного поэкспериментируете с кодом то добьетесь не
обходимого расположения элементов даже если поначалу кажется что эти действия совсем не логичны.
Рис. 9.46. Все колонки расположены в предназначенном для них месте
Создание галереи миниатюр
Для отображения коллекции изображений например фотоальбома проще всего использовать таблицы. Однако документ изображенный на рис. .À был создан средствами CSS что дает разработчику дополCSS что дает разработчику допол что дает разработчику допол
нительные преимущества которых нет в табличной версии. Создание галереи миниатюр
319
Рис. 9.47. Создание галереи изображений с помощью ¯
Решение
Создадим простой список изображений альбома и позиционируем их с помощью CSS:
­¢Å. ­
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title> photo album</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link href¡”allery.css” rel¡”stylesheet” type¡”te­t/css” /> </head> <body> <ul id¡”albumlist”> <li><im src¡”thumb1.¦p” alt¡”andle” width¡”®” heiht¡”1©” />A liht in the darkness</li> <li><im src¡”thumb.¦p” alt¡”ete yder” width¡”®” heiht¡”1©” />ete yder</li>
<li><im src¡”thumb.¦p” alt¡”a ¬rande ouffe” width¡”®” heiht¡”1©” />a ¬rande ouffe</li> <li><im src¡”thumb®.¦p” alt¡”sculpture” width¡”®” heiht¡”1©” />culpture</li> <li><im src¡”thumb.¦p” alt¡”uck stretchin wins” width¡”®” heiht¡”1©” />plashin about</li> <li><im src¡”thumb©.¦p” alt¡”uck” width¡”®” heiht¡”1©” />uck</li>
320 Глава À. Позиционирование элементов с помощью ­ <li><im src¡”thumb.¦p” alt¡”ed leaves” width¡”®” heiht¡”1©” />ed</li>
<li><im src¡”thumb.¦p” alt¡”Autumn leaves” width¡”®” heiht¡”1©” />Autumn</li> </ul> </body></html>
­¢Å.
body backroundcolor ¤¤¤¤¤¤ color marin paddin albumlist liststyletype none albumlist li float left width®p­ marinriht ©p­ marinbottom 1p­ font bold .em Arial¨ elvetica¨ sansserif color albumlist im display block border 1p­ solid Обсуждение
За основу альбома мы возьмем маркированный список пунктами кото
рого служат изображения с описаниями. Без применения CSS список будет отображен как показано на рис. .À.
­¢Å. ­ ©фрагментª
<ul id¡”albumlist”> <li><im src¡”thumb1.¦p” alt¡”andle” width¡”®” heiht¡”1©” />A liht in the darkness</li> <li><im src¡”thumb.¦p” alt¡”ete yder” width¡”®” heiht¡”1©” />ete yder</li>
<li><im src¡”thumb.¦p” alt¡”a ¬rande ouffe” width¡”®” heiht¡”1©” />a ¬rande ouffe</li> <li><im src¡”thumb®.¦p” alt¡”sculpture” width¡”®” heiht¡”1©” />culpture</li> <li><im src¡”thumb.¦p” alt¡”uck stretchin wins” width¡”®” heiht¡”1©” />plashin about</li> <li><im src¡”thumb©.¦p” alt¡”uck” width¡”®” heiht¡”1©” />uck</li>
Создание галереи миниатюр
321
<li><im src¡”thumb.¦p” alt¡”ed leaves” width¡”®” heiht¡”1©” />ed</li> <li><im src¡”thumb.¦p” alt¡”Autumn leaves” width¡”®” heiht¡”1©” />Autumn</li></ul>
Обратите внимание что для списка изображений задан атрибут id со значением albumlist.
Рис. 9.48. Вид списка изображений до применения каскадных таблиц стилей
Чтобы расположить изображения по сетке зададим свойство float со
держащим их элементам li. Добавим соответствующие правила в та
блицу стилей:
albumlist liststyletype none albumlist li float left width®p­ albumlist im display block Добавленные правила удаляют маркеры пунктов списка и задают для них свойство float со значением left как показано на рис. .À. Кроме того задав изображениям отображение в виде блочных элементов мы добились того что описания располагаются под ними. 322 Глава À. Позиционирование элементов с помощью ­ Теперь все изображения позиционированы. При изменении размеров окна вы увидите что они заполняют все доступное пространство по ши
рине а если окно становится слишком узким для того чтобы вместить все изображения оставшиеся изображения переходят на следующую строку.
Рис. 9.49. Вид страницы после задания изображениям свойства £­ со значением £­
Каркас страницы готов – теперь можно сделать его привлекательнее. К примеру можно добавить правила для создания зазоров между изо
бражениями и задать красивый шрифт для их описаний:
­¢Å. ©фрагментª
albumlist li float left width®p­ marinriht ©p­ marinbottom 1p­ font bold .em Arial¨ elvetica¨ sansserif color Можно задать рамку для изображений:
­¢Å. ©фрагментª
albumlist im border 1p­ solid Создание макета страницы с помощью ­«таблиц
323
Уверена вы по достоинству оцените гибкость данного метода в осо
бенности при добавлении изображений из базы данных – при этом не нужно подсчитывать их количество и можно динамически добавлять в список новые пункты.
Тем не менее в определенных случаях переход изображений на новую строку может быть нежелателен. Этого можно избежать задав ширину для элемента ul:
albumlist liststyletype none width ©p­ Это правило задает ширину по достижении которой изображения мо
гут переходить на следующую строку как показано на рис. ..
Рис. 9.50. После указания ширины родительского элемента изображения не переходят на следующую строку
Создание макета страницы с помощью SS-таблиц
В разделе «Создание колонки занимающей все доступное пространство по высоте» было сказано что с помощью CSS это невозможно. ВозможCSS это невозможно. Возмож это невозможно. Возмож
32 Глава À. Позиционирование элементов с помощью ­ но следовало бы сказать что не существует метода создания таких ко
лонок поддерживаемого в настоящее время всеми распространенны
ми броузерами поскольку в этом разделе нам предстоит познакомить
ся с таблицами CSS с помощью которых можно без труда добиться таCSS с помощью которых можно без труда добиться та с помощью которых можно без труда добиться та
кого эффекта.
Решение
Понятие CSSтаблиц подразумевает определенные в спецификации CSS . значения свойства display относящиеся к элементам таблиц: table tablerow и tablecell. При их использовании λϺэлемент буλϺэлемент буэлемент бу
дет вести себя как соответствующий элемент таблицы.
СSSтаблицы поддерживаются версиями броузеров не ниже ¡¢£¤¥¦ 䪣¢µ . Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢ . Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢Sµ¤µ¢¡ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢ C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢C²¢¥½£ и §¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢ и §¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢§¨£¢§£¨ ©¦ª«¥¢£¢ . К сожалению §¨£¢ ©¦ª«¥¢£¢ . К сожалению §¨£¢©¦ª«¥¢£¢ . К сожалению §¨£¢ . К сожалению §¨£¢§¨£¢
§£¨ ©¦ª«¥¢£¢ или не обрабатывает эти значения поэтому придется решить для себя насколько важно для вас их использование.
С помощью CSSтаблиц можно разместить элементы в сетке а также решить проблему создания фона по всей высоте страницы. Элемент для которого задано свойство display со значением table и его потомки будут отображаться как элементы таблицы что позволяет нам опреде
лять их границы по отношению к соседним элементам.
Вернемся к макету фиксированной ширины с двумя колонками и соз
дадим колонку занимающую все пространство по высоте не прибегая к описанным ранее хитроумным уловкам. Для элементов приведенного ниже λϺкода можно задать отображение в виде элементов таблицы:
­¢Åµ£¦¤¤­ ­. ­ ©фрагментª
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ecipe for uccess Ú erfect i¥¥a</title> <link href¡”colfi­edwidthtable.css” rel¡”stylesheet” type¡”te­t/css” /> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” /> </head> <body> <div id¡”wrapper”> <div id¡”header”> <h1>erfect i¥¥a</h1> </div> <div id=”­ain”> <div id¡”nav”> <ul> <li><a href¡””>repare the ouh</a></li>
<li class¡”cur”><a href¡””>hoose our Toppins</a> </li>
Создание макета страницы с помощью ­«таблиц 325
<li><a href¡””>i¥¥a vens</a></li> <li><a href¡””>ide alads</a></li> </ul> </div> <div id¡”content”> <h>hoosin our Toppins</h>
<p>ed nec erat sed sem molestie conue. ras lacus …</p>
<p>ªestibulum dictum massa at odio. In dinissim …</p>
<div id¡”footer”>Ùcopy ¢ ecipe for success</div> </div> </div> </div> </body></html>
Как видите в разметку был добавлен дополнительный блок div с иден
тификатором main обрамляющий элементы content и nav. Кроме того разметка меню навигации расположена в коде перед разметкой области с контентом: единственный недостаток использования CSSтаблиц заCSSтаблиц затаблиц за
ключается в необходимости размещения содержимого колонки строго в том же порядке в котором оно должно отображаться. Теперь не нуж
но задавать свойство clear both для элемента footer чтобы он отобра
жался ниже всех трех колонок поэтому его можно разместить внутри основного блока div.
В CSSкод достаточно внести лишь несколько изменений. Вопервых нужно удалить фоновое изображение элемента wrapper поскольку теперь изображение можно задать для самой колонки для элемента main нужно задать свойство display со значением table а для элементов content и nav – со значением tablecell. Теперь фоновое изображение для боковой пане
ли можно задать прямо элементу nav удалить свойства marinleft и clear для элемента footer поскольку теперь в них нет необходимости как при создании макета на основе плавающих блоков. Ниже представлен изме
ненный CSSкод:
­¢Åµ£¦¤¤­ ­.
wrapper position relative te­talin left width ©p­ marinriht auto marinleft auto marinbottom 1em borderriht 1p­ solid borderbottom 1p­ solid Á­ain disla table;
326 Глава À. Позиционирование элементов с помощью ­ content disla table cell; width p­ paddin 1p­ p­ Ánav disla table cell; width p­ bacround i­ae urlsidebari; bacround reeatreeat ;
Áfooter fontsi¥e « paddin 1em 1em color ¢¢¢¢¢¢ backroundcolor transparent Теперь макет страницы выглядит так же как и созданный нами ранее макет в разделе «Создание колонки занимающей все доступное про
странство по высоте» – без использования плавающих блоков и воз
никновения соответствующих проблем. Версия с CSSтаблицами горазCSSтаблицами горазтаблицами гораз
до проще и логичнее.
Если помните в разделе «Добавление к «резиновому» макету нижне
го блока» мы столкнулись со значительными трудностями при попыт
ке добавления нижнего блока к «резиновому» макету с тремя колонка
ми в результате чего пришлось прибегнуть к довольно неестественно
му способу с использованием отрицательных внешних отступов. Ниже представлена разметка «резинового» макета с тремя колонками осно
ванного на использовании CSSтаблиц:
­¢Å­. ­ ©фрагментª
<T html I “////T T 1. trict//” “http//www.w.or/T/­html1/T/­html1strict.dtd”><html ­mlns¡”http//www.w.or/1¢¢¢/­html” lan¡”en”> <head> <title>ecipe for uccess</title> <meta httpe£uiv¡”contenttype” content¡”te­t/html charset¡utf” />
<link rel¡”stylesheet” type¡”te­t/css” href¡”coltable.css” /> </head> <body> <div id¡”wrapper”> <div id¡”content”> <div id¡”side1”> <form method¡”post” action¡”” id¡”searchform”>
<h><label for¡”keys”>earch the ecipes</label></h>
Создание макета страницы с помощью ­«таблиц 327
<div> <input type¡”te­t” name¡”keys” id¡”keys” class¡”t­t” /><br />
<input type¡”submit” name¡”ubmit” value¡”ubmit” /> </div> </form> <ul> <li><a href¡””>About s</a></li> <li><a href¡””>ecipes</a></li> <li><a href¡””>Articles</a></li> <li><a href¡””>uy nline</a></li> <li><a href¡””>ontact s</a></li> </ul> </div> <div id¡”main”> <h1>ecipe for uccess</h1> <p>orem ipsum dolor sit amet¨ consectetuer …</p> <p>Ûuis£ue sodales imperdiet enim. Ûuis£ue …</p> </div> <div id¡”side”> <h>lease ªisit our ponsors</h>
<div class¡”adbo­”><p>orem ipsum dolor sit …</p></div>
<div class¡”adbo­”><p>ed mattis¨ orci eu …</p></div>
<div class¡”adbo­”><p>Ûuis£ue mauris nunc¨ …</p></div> </div> </div> </div> <div id¡”footer”> Á footer content…
</div> </body></html>
Четкость и последовательность данного кода сразу бросается в глаза при сравнении с версией того же документа созданной на основе пла
вающих блоков. CSSкод будет таким:
­¢Å­. ©фрагментª
wrapper width1« content disla table; width 1« main disla table cell;side1 disla table cell;
328 Глава À. Позиционирование элементов с помощью ­ widthp­ paddin 1p­ 1p­ side disla table cell; width 1¢p­ paddin p­ 1p­ 1p­ footer bordertop 1p­ solid CSSкод также отличается простотой и логичностью: не нужно задакод также отличается простотой и логичностью: не нужно зада
вать отступы обтекание и т. д. При этом внешне макет ничем не отли
чается от таблицы с одной строкой и тремя колонками. Нижний блок аккуратно располагается под колонками.
Обсуждение
Вы возможно заметили что ни одному элементу не задано свойство для отображения в качестве ряда таблицы. При создании документа несложной структуры броузер добавит мнимый ряд таблицы называ
емый неопределенным элементом таблицы окружающий ячейки. Од
нако при создании более сложных макетов рекомендуется использо
вать дополнительные элементы отображаемые в качестве рядов табли
цы. Это поможет избежать лишних ошибок. Описанный метод так и хочется применить на практике но помните об отсутствии поддержки необходимых свойств броузерами §¨£¢§£¨ ©¦ª«¥¢£¢ и . Если вы хотите чтобы сайт корректно отображался в любых броузерах можно добавить альтернативный код для © и с помощью условных комментариев. Думаю в будущем все больше сай
тов будет создаваться с использованием CSSтаблиц – как только число пользователей §¨£¢§£¨ ©¦ª«¥¢£¢ и начнет стремительно уменьшать§¨£¢§£¨ ©¦ª«¥¢£¢ и начнет стремительно уменьшать ©¦ª«¥¢£¢ и начнет стремительно уменьшать©¦ª«¥¢£¢ и начнет стремительно уменьшать и начнет стремительно уменьшать
ся. Более подробную информацию об использовании данного метода и адаптации кода для старых броузеров вы найдете в книге написан
ной мной совместно с Кевином Янком Áå£Ì¡§ 絧á «©Ì£¢¹¨²¡§· 祱 姥¾ °¼¥±¨ CSS ¶ Ñ¢¥§·» опубликованной издательством S¡¨£¸¥¡§¨.
Заключение
В данной главе были рассмотрены основные принципы построения ма
кетов страниц. Комбинируя их с другими рассмотренными в данной книге решениями например различными методами создания навига
ции и оригинальными способами использования изображений вы смо
жете воплотить свои творческие идеи на практике создавая собствен
­­.­­.¡
Заключение
329
ные страницы с уникальным дизайном. Большая часть созданных с по
мощью каскадных таблиц стилей макетов по сути основана на одних и тех же приемах что можно сказать и о макетах сверстанных табли
цами.
Как только вы усвоите основные принципы и правила использования CSS то увидите что простор для фантазии при разработке дизайна сай то увидите что простор для фантазии при разработке дизайна сай
та поистине безграничен. Убедиться в потрясающих возможностях CSS можно посмотрев макеты создаваемые разными разработчиками на сайте CSS Ù£§ Òµ¢´£§.
­­.·¤.
Алфавитный указательÔÝµÞ элемент µÍÍ£¶¶á£¹ атрибут °´¥¼£ ¢¥¾¶£¢ºµ¼ сервис Àµ«« среда отображения µ«¨ атрибут B¼µÍá·¢¥±§´µ¨¨µÍ²½£§¨ свойство ¼µÍá·¢¥±§´Í¥«¥¢ свойство ¼µÍá·¢¥±§´¡½µ·£ свойство ¼µÍá·¢¥±§´ª¥¶¡¨¡¥§ свойство ¼µÍá·¢¥±§´¢£ª£µ¨ свойство À¼µÍá·¢¥±§´ свойство ݼ«¥Íáæ±¥¨£Þ элемент ¥¥¨ Cµ½ª программа ¼¥¢´£¢Í¥««µª¶£ свойство ¼¥¢´£¢¢µ´¡±¶ свойство ¼¥¢´£¢ свойство , , ¼¢µ¡««£ среда отображения ¢¥¾¶£¢Cµ½ сервис À¢¥¾¶£¢ S²¥¨¶ сервис ÀÝ͵ª¨¡¥§Þ элемент Í«£µ¢ свойство ÝÍ¥«Þ элемент ÝÍ¥«·¢¥±ªÞ элемент Í¥«¥¢ свойство C¢¥¶¶¢¥¾¶£¢»£¶¨¡§·.Í¥½ сервис ÀCSSтаблицы Àͱ¢¶¥¢ свойство ¨´¡¶ª«µ¹ свойство , , À, , , À
ÝÚÛäC»ç¸©Þ тег ³£½ единица измерения использование для позиционирова
ния £½¼¥¶¶£´ среда отображения Õݤ¡£«´¶£¨Þ элемент ¡¢£ Ó¥¦ расширение для ¡¢£¤¥¦ ¤¡¢¶¨Í²¡«´ псевдокласс , ¤«¥µ¨ свойство , À
:¤¥Í±¶ псевдокласс À¤¥§¨ свойство ¤¥§¨¤µ½¡«¹ свойство ¤¥§¨¶¡³£ свойство ¤¥¢ атрибут ËÒ£Íᥠдвижок Ò формат À²µ§´²£«´ среда отображения ²µ¶ºµ¹¥±¨ свойство :²¥Ì£¢ псевдокласс λϺ λϺ À. ¢µ½£¶£¨ λϺ À. S¨¢¡Í¨ λϺ À. »¢µ§¶¡¨¡¥§µ« I¡´ атрибут Ú¡½ª¥¢¨µ§¨ ключевое слово 롽ª¥¢¨ команда Ý¡§ª±¨Þ элемент §¨£¢§£¨ ©¦ª«¥¢£¢ броузер автономые версии ¹Ë°ÑS экранный диктор Àìí±£¢¹ библиотека ÀÖåλϺ движок 姥ªª¡¦ дистрибутив 奧汣¢¥¢ броузер Алфавитный указатель 331
ÃÝ«µ¼£«Þ элемент Ý«£·£§´Þ элемент «¡§£²£¡·²¨ свойство «¡¶¨¶¨¹«£¡½µ·£ свойство À«¡¶¨¶¨¹«£¨¹ª£ свойство º¡¨½±¶ сервис À«¥Íµ«²¥¶¨ Àº¹§¦ броузер ½µ¢·¡§ свойство , ½£´¡µ атрибут ë½£´¡µ правило Ï¡Í¢¥¶¥¤¨ S±ª£¢¸¢£Ì¡£¾ сервис À½¡§²£¡·²¨ свойство ½¥±¶£¥±¨ обработчик событий À½¥±¶£¥Ì£¢ обработчик событий ÀN¡¤¨¹C±¼£ сценарий §¨² Ͳ¡«´ псевдокласс Àªµ´´¡§· свойство , , ¸µ¢µ««£«¶ Û£¶á¨¥ª приложение ¸µ¢µ««£«¶ Ñ¥¢á¶¨µ¨¡¥§ приложение ¸Ò формат прозрачность ª¥¶¡¨¡¥§ свойство , ×¢£« атрибут ÀSݶ£«£Í¨Þ элемент
фоновый цвет Sªµ§á¹ C¥¢§£¢¶ метод ¶¨¹«£ атрибут ݶ¨¹«£Þ элемент ¶±½½µ¢¹ атрибут Á¨£¦¨µ«¡·§ свойство , ¨£¦¨´£Í¥¢µ¨¡¥§ свойство ÀÀ, ¨£¦¨²£¡·²¨ свойство ¨£¦¨¡§´£§¨ свойство ¨£¦¨¨¢µ§¶¤¥¢½ свойство ݨ²Þ элемент Îã¼±§¨± дистрибутив ÌÓ¡¢¨±µ«¥¦ приложение ÓÏѵ¢£ ±¶¡¥§ приложение ÓÏѵ¢£ Ñ¥¢á¶¨µ¨¡¥§ приложение , ÆÑC CSS Óµ«¡´µ¨¥¢ валидатор ÑC Óµ«¡´µ¨¥¢ валидатор Ñ£¼å¡¨ движок ¾¡´¨² свойство ÏÇλϺ ÇλϺ . ¢µ½£¶£¨ ÇλϺ . S¨¢¡Í¨ ÇλϺ . »¢µ§¶¡¨¡¥§µ« ÇλϺ . ÇϺ ¦±µÍ¥½ªµ¨¡¼«£ метка Аальтернативные таблицы стилей Àальтернативные устройства Бблок описаний Àблочный элемент броузер броузерный движок Ввалидация вес стиля виртуальная машина виртуальная среда
создание вкладки выделение текущей внешние таблицы стилей ссылка на внутритекстовые стили выделение текста выпадающее меню Гглобальное удаление промежутков горизонтальная линия горизонтальное меню 332 Алфавитный указатель
Д
динамические селекторы псевдоклассов доступность Еединицы измерения , , À, ÀÀ
Ззаголовок фон закругленные края блока Иидентификатор изображение рамка двойная имена классов интервал межстрочный источник стиля Ккалендарь
создание с помощью CSS карта сайта каскадирование , клавиши быстрого доступа Àклассы , ключевые слова À, абсолютные Àотносительные À
кнопки подтверждения комментарии добавление конкретность Àконтрастность критерии доступности вебконтента курсор изменение вида Ммакет масштабируемый Àс тремя колонками фиксированной ширины À
межстрочный интервал Ннавигационное меню
на основе изображений с кнопками смена изображений создание с помощью списка навигация наследование Àненавязчивый ˵̵SÍ¢¡ª¨ Àнеопределенный элемент таблицы Ообратная совместимость обтекание описание стиля , À
относительное позиционирование отступы
отрицательные удаление оформление по умолчанию Ппереключение режима отображения переносы строки пики пикселы плавающие блоки позиционирование , абсолютное относительное порядок следования Àпоследний элемент в цепочке Àправило стиля À
способы записи À
предупреждения валидатора прозрачность эффект проценты Àпсевдокласс пункты пустое пространство между ячейками
удаление Рраздвижных дверей метод размер элемента
относительное задание À
рамка режим совместимости À, , À
«резиновый» макет Ссвойство Àселектор , À
Û атрибутов , , дочерний класса контекстный псевдоклассов для ссылок Алфавитный указатель 333
смежный типа синтаксис CSS Àсписки
вложенные маркированные
стиль маркеров отступы Àразмещение пунктов по горизонтали среда отображения ссылки
изменение вида при наведении ука
зателя мыши , изменение цвета Àподчеркивание ÀÀ
стандартный режим отображения стили встраиваемые Ттаблица стилей для печати , таблицы
рамка фоновый цвет колонок табличные данные , текст
выравнивание отображение заглавными буквами отступы размещение поверх изображения Àцентрирование текстовый броузер тень добавление тестирование сайта Ууниверсальный селектор условные комментарии ÀФфоновое изображение способ размножения Àфиксация фоновый градиент использование формы À
ввод данных в две колонки вид элементов группировка полей нежелательное пустое пространство фоновый цвет фотоальбом создание Ццентрирование блока Шшрифт размер , , À, ÀÀ
семейства шрифтов Ээкранный диктор элементы
блочные строковые эффект гало Яявные ярлыки 
Автор
lily.dalas
Документ
Категория
Информатика
Просмотров
1 173
Размер файла
6 974 Кб
Теги
css, совете, 100
1/--страниц
Пожаловаться на содержимое документа