«Единственный способ творить великие дела – это любить то, что ты делаешь»
Статьи


В основном в качестве единицы измерения в CSS и HTML используется пиксель – обозначается как px. Пиксель используется задания и изменения размера изображений, высоты шрифта, высоты и ширины блочных элементов и т.п.

Также в пикселях часто устанавливается значение по умолчанию для некоторых свойств CSS или атрибутов тегов HTML.

Например, если для тега <table> указан без значения атрибут border, задающий толщину границы таблицы, то она будет равна 1 пиксель. Это значение по умолчанию.

Или, например, при работе с кодом в редакторе Dreamweaver, при использовании свойства font-size (оно устанавливает размер шрифта), редактор автоматически предлагает ряд значений, первые из которых указаны в пикселях.

Поэтому многие разработчики пользуются именно пикселями, как единицей измерения при работе с CSS или HTML.

В HTML кроме пикселей используют проценты. Что касается CSS, то здесь единиц измерения намного больше, которые делятся на два типа: абсолютные и относительные.



Относительные единицы измерения

Относительные единицы измерения это единицы, которые устанавливают размер, зависящий от другой величины (относительно чего-либо).

В таблице приведен перечень относительных единиц измерения, использующихся в CSS.

Единица Описание
em

Высота шрифта текущего элемента. 1em - это текущий размер шрифта, относительно которого можно брать любые пропорции: 0.5em или 2em.

ex

Высота символа x. Зависит от текущего шрифта.

px

Размер задается в пикселях. Пиксель мельчайшая часть изображения. Его размер зависит от разрешения матрицы монитора.

%

Проценты. Размер задается в %, как правило, относительно величины/размера родительского элемента

Фрагмент кода

<p>Относительные единицы</p>
<p style="font-size:
4ex;">4 символа x</p>
<p style="font-size:
2em;">Размер шрифта увеличен вдвое. Относительно исходного</p>
<p style="font-size:
25px;">25 пикселей</p>
<p style="font-size:
150%;">150% от текущего размера шрифта</p>

Результат

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

Относительно символа x

Размер шрифта увеличен вдвое. Относительно исходного

25 пикселей

150% от текущего размера шрифта

Абсолютные единицы измерения

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

Единица Описание
cm

Сантиметр, см.

in

Дюйм. 1 дюйм равен 2,54 см.

mm

Миллиметр, мм.

pc

Пика. 1 пика равна 12 пунктам

pt

Пункт. 1 пункт равен 1/72 дюйма

Одной из популярных величин, использующихся при компьютерном наборе, является пункт, равный 0,3528 мм. Например, именно пункт используется для указания размера шрифта в Microsoft Office Word. 14 размер шрифта - соответствует 14 пунктам.

Фрагмент кода

<p> Абсолютные единицы</p>
<p style="font-size
: 5mm;">5 Миллиметров</p>
<p style="font-size:
1cm;">1 сантиметр</p>
<p style="font-size:
0.5in;">1/2 дюйма</p>
<p style="font-size:
14pt;">14 пунктов - 14 шрифт</p>
<p style="font-size:
1pc;">1 пика - 12 пунктов</p>

Результат

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

5 Миллиметров

1 сантиметр

1/2 дюйма

14 пунктов - 14 шрифт

1 пика - 12 пунктов

Вот такие абсолютные и относительные единицы измерения используются в CSS и HTML.

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?

Статьи по популярности