Единицы измерения CSS
Дата публикации: 12/06/2003
Категория: 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>
Результат использования абсолютных
единиц измерения показан ниже.
Размер в дюймах
Размер в миллиметрах
Размер в пунктах
Примечание
Если размеры шрифта на странице заданы в
абсолютных единицах, то в опциях браузера
эту величину изменить нельзя. Поэтому,
размер шрифтов лучше задавать в процентах,
что позволит делать их больше или меньше
подбирая подходящий для комфортного чтения.
Влад
Мержевич
Рецепты HTML
Статьи по теме:
