Форум веб-мастеров

Все о веб-дизайне, разработке и раскрутке сайтов
Текущее время: 20 апр 2018, 01:19

Часовой пояс: UTC + 3 часа [ Летнее время ]





Начать новую тему Ответить на тему  [ 1 сообщение ] 
Автор Сообщение
 Заголовок сообщения: Разные стили для media устройств
СообщениеДобавлено: 10 сен 2011, 21:18 
Не в сети

Зарегистрирован: 10 сен 2011, 20:50
Сообщения: 3
Стили для разных устройств
При подключении каскадных таблиц стилей в html возможно подключить отдельные стили для разных типов устройств. Но не все знают как это сделать. Аттрибут media тега link позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.
Перечень значений для аттриубута media и список устройств, для которых данное значение будет работать.
1. all -Все типы. Это значение используется по умолчанию.
2. aural -Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
3. embossed - Используется для принтеров на системе Брайля
4. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
5. handheld - Наладонные компьютеры(КПК) и аналогичные им аппараты.
6. print - Печатающие устройства вроде принтера.
7. projection - Проектор.
8. screen - Экран монитора.
9. tv - Телевизор.

Подключение стилей в html
В html задать использование разных стилей для разных устройств можно следующим образом:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Если же нужно указать больше утстройств, для которых применяется данный стиль то указывать их нужно через запятую
<link rel="stylesheet" type="text/css" href="print.css" media="print,projection">

Подключение стилей в css файле

Такая же штука возможна и с файлом каскадных таблиц стилей (CSS). В ксс есть поддержка задавать различные правила, использую @. Допустим, @font-face позволит подгружать свои собственные шрифты с сервера.
А вот @media позволяет указать типы устройств и описать стиль для определенного селектора. Т.е. в ксс это делается так:
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
Если нужно опять же для нескольких устройств пишем следующим образом:
@media screen,print
{
p.test {font-weight:bold;}
}
Как проверить ?
Предположим вы написали стили файлов для обычного отображения страницы и для принтеров (media=”print”). А у вас нет принтера, но проверить позарез нужно. То просто берем print заменяем на screen. Небольшой обман браузера и вы увидете, как стиль будет работать для принтеров. Но не забудьте вернуть назад!


Вернуться к началу
 Профиль  
Ответить с цитатой  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ 1 сообщение ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: Yandex [Bot] и гости: 1


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Русская поддержка phpBB
    liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня   Rambler's Top100   Рейтинг@Mail.ru