belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
Статьи >>>
                                Статьи по веб-программированию

Единицы измерения, использующиеся в CSS.

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

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

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

В качестве примера, ниже представлен калькулятор, который позволяет рассчитать высоту и ширину экрана широкоформатного дисплея (16:9) в зависимости от размеров его диагонали. Для расчета необходимо ввести любой известный размер и нажать кнопку 'Рассчитать'.


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

<!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;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх