Типы устройств
Одной из особенностей CSS является возможность подключения тех или иных стилей в зависимости от типа устройства, на котором выводятся страницы сайта. Благодаря чему можно сделать отдельные таблицы стилей для мониторов, принтеров, мобильных телефонов, звуковых или тактильных браузеров и т.д.
В следующей таблице указаны ключевые слова обозначающие в CSS разные типы устройств и их описание.
all | Таблица стилей используется для всех устройств. |
---|---|
aural | Для речевых синтезаторов. |
braille | Устройства для слепых людей. |
embossed | Страничные принтеры для слепых людей. |
handheld | Для устройств с небольшими экранами (мобильные телефоны, карманные компьютеры и т.д.). |
Используется при выводе документа на печать. | |
projection | Для проектора. |
screen | Экран компьютерного монитора. |
tty | Устройства, использующие символьную сетку экрана фиксированного шага, например телетайп. |
tv | Для экранов подобно телевизионным (низкое разрешение, ограниченная цветопередача, отсутствует прокрутка и т.д.). |
Отдельные таблицы стилей могут быть удобны по многим причинам. Ну, например, зачем при выводе на принтер печатать меню сайта или какие-то рекламные блоки, их можно просто убрать. Также можно изменить шрифт, так как давно известно, что из-за особенностей зрения человека, текст написанный шрифтами без засечек (Arial, Verdana и т.д.) гораздо удобней читать с монитора компьютера, а вот с засечками (Times, Times New Roman и т.д.) наоборот, с бумаги.
Создавать отдельные таблицы стилей для разных устройств можно несколькими способами.
Выбор устройств с помощью правила @import
Как вы знаете, правило @import позволяет встраивать файлы с CSS во внутренние или внешние таблицы стилей. При этом можно указать одно или несколько (через запятую) устройств к которым они будут применены, если же этого не сделать — стили применятся ко всем устройствам.
Пример выбора устройств в CSS через правило @import
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выбор йстройств через @import</title>
<style type="text/css">
@import "style/all.css" all; /* стили для всех устройств */
@import "style/scr_hand.css" screen, handheld; /* стили для мониторов и телефонов */
@import "style/print.css" print; /* стили для печати */
</style>
</head>
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
</body>
</html>
Пример подключения во внешних таблицах стилей
@import "style/all.css" all; /* стили для всех устройств */
@import "style/scr_hand.css" screen, handheld; /* стили для мониторов и телефонов */
@import "style/print.css" print; /* стили для печати */
В этих примерах стили в файле all.css будут использоваться в любом случае, но если сайт будет просматриваться на мониторе или телефоне, то к ним добавятся стили из scr_hand.css, а при выводе на печать — из print.css.
Выбор устройств с помощью правила @media
В отличие от предыдущего способа, правило @media подключает не файлы со стилями, а непосредственно сами стили, которые берутся в скобки, { }. Оно также может указываться во внутренних или внешних таблицах стилей.
Пример выбора устройств в CSS с помощью правила @media
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выбор устройств через @media</title>
<style type="text/css">
@media all {
p {
font-size: 110%; /* размер шрифта */
}
}
@media screen, handheld {
p {
font-family: Arial, sans-serif; /* гарнитура шрифта */
color: #660066; /* цвет текста */
background: #ccffff; /* цвет фона */
}
}
@media print {
p {
font-family: Times, serif; /* гарнитура шрифта */
color: black; /* цвет текста */
font-weight: bold; /* жирный шрифт */
}
}
</style>
</head>
<body>
<p>
В данном примере имеется три стиля: первый — для всех устройств,
второй — дополняет первый и используется для монитора компьютера
или мобильного телефона, третий — дополняет первый и используется
для вывода на печать.
</p>
</body>
</html>
Результат в обычном браузере
В данном примере имеется три стиля: первый — для всех устройств, второй — дополняет первый и используется для монитора компьютера или мобильного телефона, третий — дополняет первый и используется для вывода на печать.
Результат при выводе на принтер (имитация)
В данном примере имеется три стиля: первый — для всех устройств, второй — дополняет первый и используется для монитора компьютера или мобильного телефона, третий — дополняет первый и используется для вывода на печать.
Выбор устройств с помощью тегов <STYLE>
В теге <STYLE> также можно указывать типы устройств, для которых предназначены его внутренние стили. Делается это при помощи атрибута media.
Пример подключения стилей для разных устройств с помощью STYLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег STYLE</title>
<style type="text/css" media="screen">
p {
color: #660066; /* цвет текста */
background: #ccffff; /* цвет фона */
}
</style>
<style type="text/css" media="print">
p {
color: black; /* цвет текста */
font-weight: bold; /* жирный шрифт */
}
</style>
</head>
<body>
<p>
В этом примере первый стиль предназначен для мониторов,
а второй — для принтеров.
</p>
</body>
</html>
Результат на мониторе
В этом примере первый стиль предназначен для мониторов, а второй — для принтеров.
Результат при выводе на принтер (имитация)
В этом примере первый стиль предназначен для мониторов, а второй — для принтеров.
Выбор устройств с помощью тегов <LINK>
Ну и, наконец, стили для разных устройств можно подключать с помощью тегов <LINK> и все того же атрибута media.
Пример подключения стилей для разных устройств с помощью LINK
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег LINK</title>
<link rel="stylesheet" type="text/css" href="style/all.css">
<link rel="stylesheet" type="text/css" href="style/scr_hand.css" media="screen, handheld">
<link rel="stylesheet" type="text/css" href="style/print.css" media="print">
</head>
<body>
<p>Текст параграфа.</p>
</body>
</html>
В общем, с указанием типов устройств все довольно просто, поэтому надеюсь, что здесь у вас каких-то проблем с пониманием не возникло.
Подключение CSS | < Содержание > | Базовый синтаксис |