Многие свойства CSS принимают в качестве своих значений числа, которые задают размеры соответствующих html-элементов. Например, довольно часто возникает необходимость указания ширины или высоты блочных элементов, величины внутренних и внешних отступов, межстрочного интервала и расстояния между соседними буквами, размера шрифта, ширины полей форм или ячеек таблицы, толщины границ и т.д. И все это в свою очередь приводит к необходимости использования соответствующих единиц измерения этих величин.
Выделяют два вида единиц измерения: абсолютные, которые являются фиксированными и не зависят от устройства вывода, а также относительные, величина которых зависит от какого-нибудь исходного размера, например, размера шрифта родительского элемента.
К абсолютным единицам измерения относятся:
Абсолютные единицы используются довольно редко, в основном для стилей, которые используются при выводе текста html-документов на печатные носители информации. Пункты, кроме того, широко используются в текстовых редакторах. Использование абсолютных единиц показано в примере 1.1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Абсолютные единицы измерения</title> <style> .cm{font-size: 1cm;} .mm{font-size: 5mm;} .in{font-size: 0.5in;} .pt{font-size: 12pt;} .pc{font-size: 1pc;} </style> </head> <body> <span class="cm">Один сантиметр.</span><br> <span class="mm">Пять миллиметров.</span><br> <span class="in">Половина дюйма.</span><br> <span class="pt">12 пунктов.</span><br> <span class="pc">Одна пика (12 пунктов).</span> </body> </html>
Пример 1.1. Применение абсолютных единиц измерения
Для вывода информации на экран в основном используются относительные единицы измерения, к которым относятся (см. примеры 1.2 и 1.3):
<!DOCTYPE html> <!-- Зададим размер шрифта для документа --> <html style="font-size: 16px;"> <head> <meta charset="utf-8"> <title>Относительные единицы измерения</title> <style> .px{font-size: 10px;} .em{font-size: 1.0em;} .rem{font-size: 1.0rem;} .percent{font-size: 100%;} .ex{font-size: 2ex;} .ch{font-size: 2ch;} </style> </head> <body> <!-- Переопределим размер шрифта для абзаца --> <p style="font-size: 24px;"> <!-- Пиксели можно отнести и к абсолютным единицам шрифта --> <span class="px">10 пикселей.</span><br> <!-- Расчет ведется относительно шрифта элемента 'html' --> <span class="rem">1.0rem или 16*1.0=16 пикселей.</span><br> <!-- Расчет ведется относительно шрифта абзаца --> <span class="em">1.0em или 24*1.0=24 пикселя.</span><br> <span class="percent">100% равно 24 пикселям. Символы 'x', '0'.</span> <!-- Расчет ведется относительно символов 'x', '0' шрифта абзаца --> <br><span class="ex">2ex.</span><br> <span class="ch">2ch.</span> </p> </body> </html>
Пример 1.2. Применение относительных единиц px, em, rem, %, ex, ch
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Относительные единицы измерения</title> <style> .vw{font-size: 5vw;} .vh{font-size: 5vh;} .vmin{font-size: 5vmin;} .vmax{font-size: 5vmax} </style> </head> <body> <span class="vw">5% в зависимости от ширины области просмотра.</span> <br> <span class="vh">5% в зависимости от высоты области просмотра.</span> <br> <span class="vmin">5% в зависимости от того, что меньше.</span> <br> <span class="vmax">5% в зависимости от того, что больше.</span> </body> </html>
Пример 1.3. Применение относительных единиц vw, vh, vmin, vmax
Теперь хотелось бы отметить, что значения единиц измерения не обязательно должны быть целыми. Если необходимо, то можно применять и десятичные дроби, а некоторые свойства, например, p {margin: -3px;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.