Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Самоучитель по HTML и CSS - 32
Самоучитель по HTML и CSS
Добрый день. Обновился самоучитель HTML, доступный для скачивания по адресу http://htmlbook.ru/download/?id=4. Главное изменение — учебник покинул статус «бета-версия» и приобрел законченный вид. Теперь он называется «Самоучитель HTML и XHTML» и включает три раздела: HTML, валидация документов и XHTML. Добавления включают в себя подсветку синтаксиса в примерах, множество вопросов для проверки и заданий для самостоятельной работы. Тем читателям, что присоединились к рассылке недавно, файл скачивать обязательно. Остальным — почему бы и не скачать. Объем файла 720 Кб, формат CHM. Как обычно, все предложения и замечания принимаются по адресу vlad@htmlbook.ru. Также предлагаю приобрести локальную версию справочника по CSS. Она платная, стоит всего 48 р. и отличается от своей версии на сайте. В частности:
Купить локальную версию можно по адресу http://htmlbook.ru/css/buy. Оплата в любой удобной системе — Яндекс.Деньги, WebMoney, SMS и др. По вопросам приобретения справочника можете писать на ящик css@htmlbook.ru. Вначале ответы на вопросы предыдущего выпуска. 1. синим 3. Типы носителейШирокое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления. В табл. 3.1 перечислены некоторые типы носителей.
В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер. Замечание Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается. При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 3.1. Пример 3.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"> @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */ @import "/style/palm.css" handheld, print; /* Стиль для печати */ </style> </head> <body> <p>...</p> </body> </html> В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и palm.css — при печати страницы и отображении на КПК. Команда @media позволяет указать тип носителя для таблицы глобальных или связанных стилей и в общем случае имеет следующий синтаксис. @media тип носителя 1 {
Описание стиля для типа носителя 1 } media тип носителя 2 { Описание стиля для типа носителя 2 } После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 3.1, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил. В примере 3.2 показано, как задать разный стиль для печати и отображения на мониторе. Пример 3.2. Стили для разных типов носителей <!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"> @media screen { /* Стиль для отображения в браузере */ BODY { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */ font-size: 90%; /* Размер шрифта */ color: navy /* Цвет текста */ } H1 { background: linen; /* Цвет текста */ border: 2px dashed maroon; /* Рамка вокруг заголовка */ color: sienna; /* Цвет текста */ padding: 7px /* Поля вокруг текста */ } H2 { color: darkolivegreen; /* Цвет текста */ margin: 0px /* Убираем отступы */ } P { margin-top: 0.5em /* Отступ сверху */ } } @media print { /* Стиль для печати */ BODY { font-family: Times, 'Times New Roman', serif /* Шрифт с засечками */ } H1, H2, P { color: black /* Черный цвет текста */ } } </style> </head> <body> <p>...</p> </body> </html> В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой. Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <LINK> с параметром media, значением которого выступают все те же типы, перечисленные в табл. 3.1. В примере 3.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей. Пример 3.3. Подключение стилей для разных носителей <!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> <link media="print, handheld" rel="stylesheet" href="print.css" type="text/css"> <link media="screen" rel="stylesheet" href="main.css" type="text/css"> </head> <body> <p>...</p> </body> </html> В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств. Рецепты CSSКак сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс hover. Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие. A { стиль обычной ссылки } Также псевдокласс 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"> Результат данного примера показан на рис. 1.
Рис. 1. Вид рамки до и после наведения курсора на изображение
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
