Решение

Чтобы таблицу было легче воспринимать, можно изменять цвет строки при наведении на нее указателя мыши – это выделит содержимое. Та- кой эффект показан на рис. 5.10.

Рис. 5.10. Выделение строки при наведении на нее указателя мыши

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

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

Решение

Данное правило стиля задает фоновое изображение для блока со спи- ском ингредиентов в рецепте, как видно на рис. 3.9.

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

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

После присвоения изображению или иному элементу свойства float

остальные блочные элементы будут вести себя, как будто его не суще-

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

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

Решение

Укажите в коде документа ссылку на альтернативную таблицу стилей, присвоив атрибут rel=”alternate stylesheet” элементу link и задайте со- держащему ее файлу имя, которое будет отображено в меню броузера. Оно должно быть описательным (например, high contrast – «высокая контрастность»), чтобы пользователю было легче сделать выбор. Кроме того, основной таблице стилей также нужно задать имя, чтобы ее мож- но было отличить от альтернативной:

Решение

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

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

Рис. 2.14. Пустое пространство между заголовком и абзацем, возникающее по умолчанию

Чтобы понять, каким сайт предстанет перед пользователями экранных дикторов, лучше всего поставить себя на их место на практике; однако самый известный и популярный на сегодняшний день экранный дик- тор, JAWS, стоит достаточно дорого (хотя вы можете воспользоваться демонстрационной версией, работающей 40 минут), а изучение особен- ностей его использования займет некоторое время. Какие альтернатив- ные возможности есть у веб-разработчиков, желающих протестировать созданный сайт с помощью экранного диктора?