smsc banner 468x60smsc banner 728x90smsc banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

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

Медиа-запросы — один из лучших способов создания веб-страниц, удобных для мобильной версии или для печати — просто назначайте разные таблицы стилей для разных версий.

Некоторые CSS-свойства предназначены только для определенных носителей. Например, свойство page-break-after применяется только к печатному носителю. Однако большинство свойств могут совместно использоваться разными типами медиа, но могут требовать разных значений для этого свойства. Например, свойство font-size может использоваться как для экрана, так и для печатных носителей, но возможно с разными значениями.

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

Обычно используются три метода для указания медиа-зависимостей для таблиц стилей:

Способ 1: Использование @media

Правило @media используется для определения разных стилевых правил для разных типов медиа в одной таблице стилей. За ним обычно следует разделенный запятыми список типов медиа и блок CSS-объявлений, содержащий правила стилей для целевого медиа.

Объявленные стили в приведенном ниже примере говорит браузеру отображать содержимое <body> шрифтом Arial 14px на экране, но в случае печати оно будет иметь шрифт Times 12pt. Однако значение свойства line-height установлено 1.2 в обоих случаях:

@media screen {
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

Правила стиля вне правил @media применяются ко всем типам мультимедиа, к которым применяется таблица стилей. Правила @media недействительны в CSS2.1.

Способ 2: Использование @import

Правило @import — это еще один способ задания информации о стиле для определенного целевого носителя. Просто укажите разделенные запятыми типы носителей после URL-адреса импортированных таблиц стилей.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

Тип печатного носителя print в операторе @import указывает браузеру загружать внешнюю таблицу стилей (print.css) и использовать ее стили только для печатного носителя.

Все операторы @import должны появляться в начале таблицы стилей, перед любыми объявлениями. Любое правило, указанное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах.

Атрибут media в элементе <link> используется для указания целевого носителя для внешней таблицы стилей в HTML-документе.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

В этом примере атрибут media указывает браузеру загрузить внешнюю таблицу стилей screen.css и использовать ее стили только для экрана, а print.css — для печати.

Вы также можете указать несколько типов медиа (каждый из которых разделен запятой, например media="screen, print"), а также медиа-запросы для элемента <link>.

Различные типы медиа

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

Media TypeОписание
allИспользуется для всех медиа-устройств.
auralИспользуется для синтезаторов речи и звука.
brailleИспользуется для устройств тактильной обратной связи Брайля.
embossedИспользуется для печати страниц со шрифтом Брайля.
handheldИспользуется для небольших или портативных устройств — обычно это небольшие устройства экрана, такие как мобильные телефоны или КПК.
printИспользуется для принтеров.
projectionИспользуется для проецируемых презентаций, например, проекторов.
screenИспользуется в основном для цветных компьютерных экранов.
ttyИспользуется для мультимедиа, использующего сетку символов с фиксированным шагом — например, телетайпы, терминалы или портативные устройства с ограниченными возможностями отображения.
tvИспользуется для устройств телевизионного типа — цветные экраны с низким разрешением, цветной экран с ограниченной прокруткой, звук доступен.

Есть несколько типов мультимедиа на выбор, но большинство браузеров поддерживают только два типа: экранные (screen) и печатные (print).

skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…