CSS :: Единицы измерения

Два вида единиц измерения

Многие свойства CSS принимают в качестве своих значений числа, которые задают размеры соответствующих html-элементов. Например, довольно часто возникает необходимость указания ширины или высоты блочных элементов, величины внутренних и внешних отступов, межстрочного интервала и расстояния между соседними буквами, размера шрифта, ширины полей форм или ячеек таблицы, толщины границ и т.д. И все это в свою очередь приводит к необходимости использования соответствующих единиц измерения этих величин.

Выделяют два вида единиц измерения: абсолютные, которые являются фиксированными и не зависят от устройства вывода, а также относительные, величина которых зависит от какого-нибудь исходного размера, например, размера шрифта родительского элемента.

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

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

cm (от англ. centimeter – сантиметр),
mm (от англ. millimeter – миллиметр),
in (от англ. inch – дюйм) – один дюйм равен 2,54cm,
pt (от англ. point – пункт) – один пункт равен 1/72 дюйма или 0,353mm,
pc (от англ. pica – пика) – одна пика равна 12 пунктам.

Абсолютные единицы измерения используются в основном для стилей, которые используются при выводе текста html-документов на печатные носители информации. Пункты, кроме того, широко применяются в текстовых редакторах. Использование абсолютных единиц показано в примере №1.

HTML Результат

htmlCodes

<!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. Применение абсолютных единиц измерения

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

Для вывода информации на экран во многих случаях предпочтительнее использовать относительные единицы измерения, к которым относятся (см. примеры №2 и №3):

px (от англ. pixel – пиксель) – 1px представляет собой одну элементарную точку на экране, размеры которой зависят от технических характеристик устройства вывода, например, размеров зерна монитора или экрана смартфона, а также заданного разрешения экрана, например, квадрат со стороной в 100px будет иметь различную длину сторон в миллиметрах, если на одном и том же экране монитора установить сначала разрешение 1366х768 пикселей, а затем изменить на 800х600 пикселей, т.к. при этом браузер станет выделять под один пиксель больше места (зерен экрана);
em – 1em равен высоте (размеру) текущего шрифта родительского элемента, например, если размер шрифта родительского элемента равен 15px, а размер шрифта текущего элемента указан как 2еm, то абсолютный размер шрифта текущего элемента составит 30px; недостатком данной единицы измерения является зависимость от размеров шрифтов всех его родительских элементов, что в итоге может привести к определенным трудностям в расчетах и неточностям в вычислениях;
rem (от англ. root em) – 1rem равен высоте (размеру) шрифта корневого элемента, т.е. самого элемента «html», от которого шрифт наследуется телом документа «body»; данная единица измерения обладает преимуществами перед единицами em и процентами, т.к. рассчитывается на основе размера шрифта только у одного элемента «body» и не зависит от размеров шрифтов других родительских элементов;
% – определяет величину свойства текущего элемента в процентах от величины такого же свойства родительского элемента, например, если ширина родительского блока равна 100mm, а ширина текущего элемента задана как 150%, то его реальная ширина составит 150mm;
ex – 1ex равен высоте символа x в нижнем регистре текущего шрифта элемента, используется редко;
ch – 1ch равен ширине символа 0 (ноль) текущего шрифта элемента, используется редко;

HTML Результат

htmlCodes

<!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>

Пример №2. Применение относительных единиц px, em, rem, %, ex, ch

vw (от англ. view width) – 1vw равен 1% от ширины области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от ширины области просмотра, что особенно удобно для экранов планшетов и смартфонов;
vh (от англ. view height) – 1vh равен 1% от высоты области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от высоты области просмотра, что особенно удобно для экранов планшетов и смартфонов;
vmin – 1vmin равен 1% от минимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера меньше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, что меньше в данный момент;
vmax – 1vmax равен 1% от высоты максимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера больше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, какая величина больше в данный момент.

HTML Результат

htmlCodes

<!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>

Пример №3. Применение относительных единиц vw, vh, vmin, vmax

Теперь хотелось бы отметить, что значения единиц измерения не обязательно должны быть целыми. Если необходимо, то можно применять и десятичные дроби, а некоторые свойства, например, p{margin: -3px;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.

Единицы измерения углов в CSS

Когда в css-свойствах используются функции предназначенные, например, для поворота элемента или изображения на определенный угол (см. пример №4), они в качестве своих параметров обычно принимают все доступные в CSS единицы измерения углов:

deg (от англ. degree – градус) – всем известная и общепринятая в быту единица измерения углов, которая равна 1/360 полного оборота по окружности (1deg = π/180rad ≈ 0,01745rad);
rad (от лат. radius – луч, радиус) – 2π радиан равны 360 градусам (1rad = 180/πdeg ≈ 57,296deg);
grad (от фр. grade) – 400 градов равны одному полному обороту или же 360 градусам;
turn (от англ. turn – поворачивать)– один полный оборот равен 360 градусам.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Использование единиц измерения углов в CSS</title>
	
	<style>
				
		/* Оформляем родительский «div» абзацев */
		div{
		width: 600px;
		height: 600px;
		margin: auto;		
		padding: 50px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 240px;
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформированного абзаца */	
		.p_1{transform: rotate(-10.5deg);}
		
		/* Это класс 2-го трансформированного абзаца */	
		.p_2{transform: rotate(0.11rad);}
		
		/* Это класс 3-го трансформированного абзаца */	
		.p_3{transform: rotate(10grad);}

		/* Это класс 4-го трансформированного абзаца */	
		.p_4{transform: rotate(-0.5turn);}				
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: rotate(-10.5deg)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: rotate(0.11rad)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: rotate(10grad)
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform: rotate(-0.5turn)
		</p>		
					
	</div>

</body>
</html>

Пример №4. Использование единиц измерения углов в CSS

Быстрый переход к другим страницам

Наследование, каскадирование и приоритетность стилей CSS
Единицы измерения, использующиеся в CSS
Использование цветов в CSS
Вернуться к оглавлению учебника