Одиниці вимірювання
Для визначення розмірів різних елементів у CSS використовуються абсолютні та відносні одиниці вимірювання. Абсолютні одиниці не залежать від пристрою виведення, тоді як відносні одиниці визначають розмір елемента відносно значення іншого розміру.
Відносні одиниці
Відносні одиниці зазвичай використовуються для роботи з текстом або коли потрібно вирахувати відсоткове співвідношення між елементами. У таблиці 1 перераховані основні відносні одиниці.
| Одиниця | Опис |
|---|---|
| em | Висота шрифту поточного елемента |
| ex | Висота символу x |
| px | Піксель |
| % | Відсоток |
Змінне значення, яке залежить від розміру шрифту поточного елемента (встановлюється через стильове властивість font-size). В кожному браузері встановлений розмір тексту, який застосовується у випадку, коли цей розмір явно не вказано. Тому початково 1em дорівнює розміру шрифту, встановленого в браузері за замовчуванням. Встановлюючи розмір тексту для всієї сторінки в em, ми працюємо саме з цим параметром. У випадку, коли em використовується для певного елемента, за 1em приймається розмір шрифту його батька.
ex визначається як висота символу "x" у нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, встановленого в браузері за замовчуванням, або до розміру шрифту батьківського елемента.
Піксель - це елементарна точка, яку відображає монітор або інше подібне пристрій, наприклад, смартфон. Розмір пікселя залежить від роздільної здатності пристрою та його технічних характеристик.
У прикладі 1 показане використання зазначених одиниць.
Приклад 1. Використання відносних одиниць
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Відносні одиниці</title>
<style type="text/css">
.em, .ex, .px, .percent {
font-family: Verdana, Arial, sans-serif;
}
.em { font-size: 2em; }
.ex { font-size: 2ex; }
.px { font-size: 30px; }
.percent { font-size: 200%; }
</style>
</head>
<body>
<p class="em">Розмір 2 em</p>
<p class="ex">Розмір 2 ex</p>
<p class="px">Розмір 30 пікселів</p>
<p class="percent">Розмір 200%</p>
</body>
</html>Результат даного прикладу показаний нижче (рис. 1).
Абсолютні одиниці
Абсолютні одиниці застосовуються рідше, ніж відносні, і, як правило, при роботі з текстом. У таблиці 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//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Абсолютні одиниці</title>
<style type="text/css">
.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>
<p class="in">Розмір 0.5 дюйма</p>
<p class="mm">Розмір 8 міліметрів</p>
<p class="pt">Розмір 24 пункти</p>
</body>
</html>Результат використання абсолютних одиниць вимірювання показаний нижче (рис. 2).