Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Подключение стилей для разных устройств

Обсуждение темы Подключение стилей для разных устройств в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Стили для разных устройств При подключении каскадных таблиц стилей в html возможно подключить отдельные стили для разных типов устройств. Но не все знают ...


Закрытая тема
 
Опции темы
Старый 14.09.2011, 05:00   #1
Стили для разных устройств
При подключении каскадных таблиц стилей в html возможно подключить отдельные стили для разных типов устройств. Но не все знают как это сделать. Аттрибут media тега link позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.
Перечень значений для аттриубута media и список устройств, для которых данное значение будет работать.

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

Подключение стилей в html

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

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

Метки
css, css для устройств, стили


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
непотребное дублирование стилей vitaly-go HTML, CSS, JavaScript 2 09.11.2010 18:07
Подключение PDO-pgsql Anthony ASP, Perl, PHP и MySQL 0 30.09.2009 11:58
Подключение index.php Yurbanizator Настройка серверов 2 14.12.2006 08:09
Подключение CSS в единый шаблон на php KeTal HTML, CSS, JavaScript 8 06.04.2005 15:19
Подключение к БД в dreamweaver mic ASP, Perl, PHP и MySQL 4 09.01.2005 14:26


Текущее время: 09:58. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум