Добрый день.

Обновился самоучитель HTML, доступный для скачивания по адресу http://htmlbook.ru/download/?id=4. Главное изменение — учебник покинул статус «бета-версия» и приобрел законченный вид. Теперь он называется «Самоучитель HTML и XHTML» и включает три раздела: HTML, валидация документов и XHTML. Добавления включают в себя подсветку синтаксиса в примерах, множество вопросов для проверки и заданий для самостоятельной работы. Тем читателям, что присоединились к рассылке недавно, файл скачивать обязательно. Остальным — почему бы и не скачать. Объем файла 720 Кб, формат CHM. Как обычно, все предложения и замечания принимаются по адресу vlad@htmlbook.ru.

Также предлагаю приобрести локальную версию справочника по CSS. Она платная, стоит всего 48 р. и отличается от своей версии на сайте. В частности:

• отсутствует реклама, которая имеется в демо-версии и онлайн-версии;
• все свойства упорядочены по алфавиту и по категориям;
• список браузеров содержит актуальные версии, в том числе: Internet Explorer 8 (Beta), Opera 9.5, Safari 3.1, Firefox 3;
• приведен список хаков для различных браузеров;
• содержит список псевдоклассов и псевдоэлементов;
• включен полнофункциональный поиск;
• для каждого параметра указаны ошибки, возникающие в браузере;
• бесплатное обновление.

Купить локальную версию можно по адресу http://htmlbook.ru/css/buy. Оплата в любой удобной системе — Яндекс.Деньги, WebMoney, SMS и др. По вопросам приобретения справочника можете писать на ящик css@htmlbook.ru.

Вначале ответы на вопросы предыдущего выпуска.

1. синим
Если стилевой атрибут упоминается в коде CSS несколько раз с различными значениями, то применяться будет последнее упомянутое.
2. color
3. Неверно задано значение параметра type
4. Таблица связанных стилей
Импорт стиля

3. Типы носителей

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

В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер.

Замечание

Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается.

При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 3.1.

Пример 3.1. Импорт стилевого файла

В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и palm.css — при печати страницы и отображении на КПК.

Команда @media позволяет указать тип носителя для таблицы глобальных или связанных стилей и в общем случае имеет следующий синтаксис.

После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 3.1, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил. В примере 3.2 показано, как задать разный стиль для печати и отображения на мониторе.

Пример 3.2. Стили для разных типов носителей

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

Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере.

Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <LINK> с параметром media, значением которого выступают все те же типы, перечисленные в табл. 3.1.

В примере 3.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей.

Пример 3.3. Подключение стилей для разных носителей

В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.

Рецепты CSS

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

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс hover. Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.

A { стиль обычной ссылки }
A:hover { стиль ссылки при наведении на нее курсора }

Также псевдокласс hover допускается применять аналогичным способом к изображениям, но в браузере Internet Explorer версии 6 и ниже этот подход работать не будет. Все потому, что эта версия Internet Explorer понимает hover только для ссылок. Поэтому рассмотрим только универсальный метод, работающий во всех браузерах.

Изображение превращается в ссылку, если тег <img> поместить внутрь контейнера <a>, при этом вокруг картинок автоматически добавляется рамка, показывающая что перед нами ссылка. Вид таких рамок управляется с помощью стилевого атрибута border добавляемого к конструкции A IMG, которая сообщает, что стили следует применять к тегу <img> расположенному внутри <a>. Параметры рамки при наведении на рисунок курсора задаются конструкцией A:hover IMG, как показано в примере 1.

Пример 1. Изменение цвета рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет рамки</title>
<style type="text/css">
A IMG {
 border: 3px solid #53da3f; /* Рамка вокруг изображения-ссылки */
}
A:hover IMG {
 border: 3px solid #f26522; /* Рамка при наведении на рисунок курсора мыши */
}
</style>
</head>
<body>
<p>
 <a href="vinnie-the-pooh.html"><img src="figure.jpg" alt="Винни-Пух" width="100" height="111"></a>
 <a href="vinnie-the-pooh.html"><img src="figure.jpg" alt="Винни-Пух" width="100" height="111"></a>
</p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид рамки до и после наведения курсора на изображение