|
Единицы измерения
Для задания размеров различных элементов, в CSS используются абсолютные и
относительные единицы измерения. Абсолютные единицы не зависят от устройства
вывода, а относительные единицы определяют размер элемента относительно значения
другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом, либо когда надо
вычислить процентное соотношение между элементами. В табл. 1 перечислены
основные относительные единицы.
Табл. 1. Относительные единицы измерения |
|
|
| Единица |
|
Описание |
|
|
| em |
|
Высота шрифта элемента |
|
|
| ex |
|
Высота символа x |
|
|
| px |
|
Пиксел |
|
|
| % |
|
Процент |
Практически все браузеры вычисляют значение ex как
удвоенное em. Возможно это и резонное приближение, но
технически неверное. В примере 1 показано применение указанных единиц.
| Пример 1. Использование относительных единиц |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
.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>
</head>
<body>
<span
class="em">Размер в em</span>
<span class="ex">Размер в
ex</span>
<span class="px">Размер в
пикселях</span>
<span class="percent">Размер в
процентах</span>
</body>
</html> |
Результат данного примера показан ниже. Размер текстов получился примерно
одинаковым, но единицы измерения использовались различные.
Размер в em
Размер в ex
Размер в пикселях
Размер в процентах |
Наиболее используемыми единицами являются пикселы и проценты. Но они зависят
от разрешения монитора, его размеров и других системных настроек.
Абсолютные единицы
Абсолютные единицы применяются реже, чем относительные и, как
правило, при работе с текстом. В табл. 2 перечислены основные абсолютные
единицы.
Табл. 2. Абсолютные единицы измерения |
|
|
|
| Единица |
|
Описание |
|
|
|
| in |
|
Дюйм (1 дюйм равен 2,54 см) |
|
|
|
| cm |
|
Сантиметр |
|
|
|
| mm |
|
Миллиметр |
|
|
|
| pt |
|
Пункт (1 пункт равен 1/72 дюйма) |
|
|
|
| pc |
|
Пика (1 пика равна 12 пунктам) |
Самой, пожалуй, распространенной единицей является пункт, который
используется для указания размера шрифта. Многие люди привыкли задавать размер
шрифта в текстовых редакторах, например, 12. А что это число означает, не
понимают. Так это именно пункты и есть, они родные. Конечно они нам не родные,
мы привыкли измерять все в миллиметрах и подобных единицах, но пункт, пожалуй,
единственная величина из не метрической системы измерения, которая используется
у нас повсеместно. И все благодаря текстовым редакторам и издательским системам.
В примере 2 показано использование пунктов и других единиц.
Пример 2. Использование абсолютных единиц |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<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>
</head>
<body>
<span
class="in">Размер в дюймах</span>
<span class="mm">Размер в
миллиметрах</span>
<span class="pt">Размер в
пунктах</span>
</body>
</html> |
Результат использования абсолютных единиц измерения показан ниже.
Размер в дюймах
Размер в миллиметрах
Размер в
пунктах |
| Примечание |
| Если размеры шрифта на странице заданы в абсолютных единицах, то в
опциях браузера эту величину изменить нельзя. Поэтому, размер шрифтов лучше
задавать в процентах, что позволит делать их больше или меньше подбирая
подходящий для комфортного чтения. |
|
|
|
