Медиа типы в 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>
Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127
Введение в условные операторы и условную логику CSS
Семь крутых 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 рассылки
Создаём адаптивный сайт
Возможно, вам будет интересно
Косая граница блока или граница с наклоном
В данной статье мы расскажем, как организовать на вашем сайте интересное решение, а именно речь пойдет о том. как организовать разделение блоков с помощью косых границ или наклонов. Суть идеи в том, чтобы линии были не строго горизонтальными, а под углом.
Про новые CSS псевдоклассы - :is() :where() :has()
В мире веб-разработки постоянно появляются новые инструменты и возможности для создания более эффективных и удобных интерфейсов. Одним из последних дополнений к CSS стали селекторы :is(), :where() и :has(), которые предлагают новые способы выбора элементов на веб-странице. Давайте рассмотрим каждый из них подробнее и узнаем, как они могут быть полезны в веб-разработке.
Базовые правила HTML верстки писем для E-Mail рассылки
Для того, чтобы email рассылка смотрелась максимально одинаково в большинстве почтовых клиентах, необходимо придерживаться некоторых базовыx правил HTML верстки email-писем.
17 CSS/HTML эффектов с кроссбраузерными решениями
Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.
