Русскоязычные документы веб-мастеру готовы к употреблению
Где вы зарабатываете больше всего?
Яндекс.Директ
Google Adsens
Sape
Begun
Setlinks
Mainlinks
Blogun

Одним из основных назначений каскадных таблиц стилей является настройка внешнего вида тех или иных элементов HTML документа. Работая с HTML документами вы, наверняка, сталкивались с указанием размеров, например, <TABLE WIDTH="95%"> или <IMG HSPACE=4 ... > Указания различных размеров исключительно важны для (более или менее) точного позиционирования элементов на странице.

Для начала определимся с единицами измерения. Их можно разделить на абсолютные и относительные.

Абсолютными являются:

  • in - дюйм (2.54 см)
  • cm - сантиметр
  • mm - миллиметр
  • pt - пункт (типографская величина - 1/72 дюйма)
  • pc - пика (12 пунктов или 1/6 дюйма)
  • ex - высота буквы "x" в используемом шрифте (правда, в какой-то мере эту величину можно считать относительной - она зависит от шрифта).

К относительным величинам относятся:

  • px - пиксел (рассчитывается относительно устройства отображения)
  • % - процент (вычисляется относительно элемента-предка)
  • em - названия не имеет, вычисляется относительно размера шрифта.

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

Вообще, абсолютные величины хорошо подходят для ситуаций, когда точно известны физические параметры устройства вывода (недаром они так распространены в полиграфии!), но для сайтов годятся мало. Хотя в последнее время часто используется один трюк - создается специальная таблица стилей для печати страниц, так как практически все принтеры работают со стандартным размером листа A4. Подключить такую таблицу стилей можно используя тег:

<LINK TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="print_style.css">

Теперь давайте повнимательнее присмотримся к относительным величинам. Для указания размеров шрифтов очень удобно использовать пиксели и величину em. Пиксели отлично работают, когда вам требуется задать определенный размер шрифта какого-то элемента, например:

P {font-size: 12px;}

Казалось бы, а зачем нужна "em", которая все-равно равна размеру шрифта? Но хитрость в том, что при каскадировании элементы-потомки наследуют свойства элементов-предков. И если вам потребуется, например, указать размер вложенного элемента относительно родителя, то использование величины em позволит при изменении дизайна менять только размер шрифта родителя! Например:

P {font-size: 12px;}
STRONG {font-size: 1.2em;}

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

Недостаток величины em заключается в том, что она некорректно поддерживается старыми браузерами, поэтому если вам необходима их поддержка, то придется от нее отказаться.

Отличие em и пикселей заключается в том, что пиксели "привязываются" к устройству вывода. 1 пиксел будет иметь один и тот же размер на данном устройстве, в то время как размер 1em зависит от размера шрифта в элементе-предке.

Казалось бы, что пиксел, как и, скажем, миллиметр будет по-разному смотреться на мониторах с разным разрешением. Действительно, если вы зададите фиксированный размер шрифта (в пикселах) и переключите монитор, скажем, в режим 640х480, то обнаружите, что шрифты стали очень уж крупными (так как изменился размер пиксела). Но прелесть в том, что пользователи сами настраивают для себя оптимальное разрешение экрана в зависимости от монитора и своего зрения! То есть, если пользователь не очень хорошо видит, то он обычно устанавливает низкое разрешение монитора и шрифты начинают казаться крупнее. Пользователь же с нормальным зрением, скорее всего, установит разрешение в зависимости от диагонали своего монитора, и опять же размер шрифта "автоматически" подгонится под его восприятие...

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

Указание размера в процентах также является привычным для тех, кто писал документы на HTML. Процент - он процент и есть, указывает размер относительно элемента-предка. В принципе, вместо указания размера шрифта с помощью величины em, можно использовать и проценты, но делают это достаточно редко. Чаще всего в процентах указывают размеры блоков, отступы, высоту строки и т.п.

Источник: http://www.listsoft.ru/
 


Комментарии

Имя 

 

[15.10.08] Урок фотошоп Рисование фракталов

[14.10.08] Плагины для Photoshop Добавлено парочку новых.

[13.10.08] Пиксельные шрифты Добавлено 11 шрифтов.

[10.10.08] Урок фотошопа Как нарисовать дерево.

[05.10.08] JavaScript Новая документация.

[03.10.08] Plug-ins Пару новых плагинов для фотошопа.

[01.10.08] Урок фотошопа Старая фотография.

[01.10.08] Урок фотошопа Сказочный текст.

[30.09.08] PERL статьи 3 новых интересных статьи.

[30.09.08] PHP статьи Полосатая таблица.

[29.09.08] WEB документация На сайте появились учебники и книги.

[18.09.08] Урок Фотошопа Ледяной текст 2.

[16.09.08] Урок Фотошопа Mp3 Player.

[15.09.08] Урок Фотошопа Огненный текст.

Все новости
Рейтинг@Mail.ru
Александр Акимов
ICQ:
Mail: odvd@ya.ru