Медиа типы в CSS

Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы. Вы можете определять тип медиа в теге <link> для внешней таблицы стилей и внутри тега <style> для внедряемых таблиц стилей.


<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css" media="all">

/* rules */

</style>

Когда тип медиа неопределен, стили относятся ко всем медиа. Медиа типы могут принимать следующие значения:

all – стили для всех типов медиа
aural – для синтезаторов речи
braille – для устройств чтения символов Брайля
embossed – для устройств печати символов Брайля
handheld – для портативных устройств
print – для печати на принтере
projection – для демонстрации с помощью проекторов
screen – для показа на экране монитора
tty – для показа на терминалах и телетайпах
tv – для показа на экране ТВ

Код ниже демонстрирует как применить CSS для дизайна различных медиа:

Пример кода

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Media</title>
<style type="text/css" media="screen">
 .warning {color:#ff0000}
  h1.warning {text-decoration:underline}
  p.warning {font-weight:bold}
  .printDisplay {display:none}
  </style>
  <style type="text/css" media="print">
 .warning {color:#660000;}
 h1.warning {text-decoration:underline; font-size:1in;}
  p.warning {font-weight:bold; font-size:.5in;}
 .screenDisplay {display:none}
</style>
</head>
<body>
  <h1 class="warning">WARNING</h1>
  <p class="warning">Don't go there!</p>
 <p class="printDisplay">This is the print version.</p>
  <p class="screenDisplay">This is the screen version.</p>
</body>
</html>

Указанный выше CSS-файл может быть прикреплен к любому количеству HTML-страниц. Тег <link>, расположенный в секции head каждой веб-страницы, может использоваться для прикрепления внешней каскадной таблицы стилей к любой странице вашего сайта.

Пример кода

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1 class="warning">WARNING</h1>
  <p class="warning">Don't go there!</p>
</body>
</html>

Атрибуты <link>

Атрибуты	Описание
href	указывает на местонахождение внешней каскадной таблицы стилей
rel	атрибут должен устанавливать значение stylesheet для ссылки на таблицу стилей
type	должно быть установлено text/css для ссылки на таблицу стилей

Количество внешних каскадных таблиц стилей, которые может использовать страница HTML, неограниченно. Более, того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.

Встроенные стили

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Styles</title>
</head>
<body>
  <p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p>
  <ul style="margin-top:-20px; font-size:10pt">
 <li style="list-style-type:square">Hello</li>
 <li style="list-style-type:circle">Hi</li>
  <li style="list-style-type:disc">Howdy</li>
</ul>

2.86
1
2
3
4
5

Голосов: 2046

Семь крутых HTML-элементов, которые мало кто использует Про новые CSS псевдоклассы - :is() :where() :has() 10 редких тегов HTML, которые редко используют Косая граница блока или граница с наклоном Как в CSS связывать объекты? Масштабирование в CSS средствами zoom и transform Эффект пульсации элемента на чистом CSS Красивая форма обратной связи на чистом CSS Что такое Pixel Perfect верстка? Адаптивная верстка. Правильные медиа выражения для retina. Формат ссылки для телефонных звонков Icon Fonts или SVG? Скошенные элементы на CSS3 Стилизуем placeholder при помощи CSS Адаптивный CSS3 Manasory без JavaScript Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. CSS прижать footer к низу окна браузера Создаём отзывчивые письма без медиа-запросов Кроссбраузерная стилизация select на CSS Специальные символы HTML Треугольники по средствам CSS Стилизация элементов checkbox и radio button на CSS3 Как убрать свечение вокруг текстового поля? Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах 17 CSS/HTML эффектов с кроссбраузерными решениями Пять полезных CSS селекторов Медиа типы в CSS Базовые правила HTML верстки писем для E-Mail рассылки Создаём адаптивный сайт

Возможно, вам будет интересно

Создаём отзывчивые письма без медиа-запросов

Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю.

Читать подробнее

Как в CSS связывать объекты?

Что такое связывание объектов? Это создание события, которое отражается на другом объекте на веб-странице. При этом событие может отражаться также и на первом объекте. Для создания достаточно использовать только CSS, так что это интересный и не ресурсоёмкий способ.

Читать подробнее

Масштабирование в CSS средствами zoom и transform

Масштабировать элементы можно используя css свойство zoom. Cвойство CSS Zoom, поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.

Читать подробнее

Формат ссылки для телефонных звонков

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

Читать подробнее