Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru

Добрый день

На сайте новая статья посвященная стилям. Статья доступна по адресу www.htmlbook.ru/css/unit.shtml

Единицы измерения CSS

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы

Единица Описание
em Высота шрифта элемента
ex Высота символа x
px Пиксел
% Процент

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

Пример 1. Использование относительных единиц

<html>
<head>
<style>
.em, .ex, .px, .percent { font-family: Verdana, Arial, sans-serif }
.em { font-size: 2em }
.ex { font-size: 4ex }
.px { font-size: 30px }
.percent { font-size: 200% }
</style>

<body>
<span class=em>Размер в em</span>
<span class=ex>Размер в ex</span>
<span class=px>Размер в пикселях</span>
<span class=percent>Размер в процентах</span>
</body>
</html>

Размер текстов получился примерно одинаковым, но единицы измерения использовались различные.

Размер в em
Размер в ex
Размер в пикселях
Размер в процентах

Наиболее используемыми единицами являются пикселы и проценты. Но они зависят от разрешения монитора, его размеров и других системных настроек.

Абсолютные единицы

Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

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

Пример 2. Использование абсолютных единиц

<html>
<head>
<style>
.in, .mm, .pt { font-family: Verdana, Arial, sans-serif }
.in { font-size: 0.5in }
.mm { font-size: 8mm }
.pt { font-size: 24pt }
</style>

<body>
<span class=in>Размер в дюймах</span>
<span class=mm>Размер в миллиметрах</span>
<span class=pt>Размер в пунктах</span>
</body>
</html>

Результат использования абсолютных единиц измерения показан ниже.

Размер в дюймах
Размер в миллиметрах
Размер в пунктах

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

Рекомендую подписаться на рассылку:
CenterINet - все для начинающих и опытных web мастеров
Всё о Photoshop

Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!

Новичку, интересующемуся, профессионалу!

 

  Разделы сайта
 
Создание сайта
  HTML
  CSS
  Графика
  Дизайн
  Инструментарий
  Справочная информация
  Шаблоны
  Форум

  Подписка на новости
  Введите ваш e-mail:
  Помощь
  Не знаете с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное