Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

Типы CSS медиа

Тип носителя позволяет определить, каким образом документ будет представлен в различных средах. Файл может отображаться по-разному на экране, на бумаге, или слуха браузера и т.д.


Тип носителя

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


правило @media

Правило @media позволяет те же таблицы стилей для различных сред установить различные стили.

В следующем примере говорит нам, чтобы отобразить 14 пикселей Verdana стиль шрифта на экране браузера. Тем не менее, если страница будет напечатана 10 пикселей Таймс шрифтов. Обратите внимание, что шрифта веса бумаги и на экране настройки выделены жирным шрифтом:

<html>
<head>
<style>
@media screen
{
	p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
	p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
	p.test {font-weight:bold;}
}
</style>
</head>

<body>
....
</body>
</html>

Вы можете попробовать это сами и убедитесь сами! Если вы используете Mozilla / Firefox или IE5 + печатать эту страницу, вы увидите, "Типы носителей" будет использовать другой дисплей , чем другой размер шрифта небольшой точки шрифта.


Другие типы медиа

Примечание: Названия типа носителя не чувствительны к регистру.

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