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



belarusweb.net

Основы создания сайтов...
CSS >>>

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

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

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

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

Абсолютные единицы используются в основном для стилей, которые используются при выводе текста 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.28. Применение абсолютных единиц измерения

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

<!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.29. Применение относительных единиц 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.30. Применение относительных единиц vw, vh, vmin, vmax

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

Контрольные вопросы и задания

  1. Перечислите абсолютные единицы измерения величин CSS.
  2. Перечислите относительные единицы измерения величин CSS.
  3. В чем заключается основное отличие относительных единиц от абсолютных?

Словарь новых английских слов

property ['prɔpəti] – свойство.
import [ˈɪmpɔːt] – импорт, импортировать.
selector [si'lektə] – искатель, отборщик.
visited [ˈvɪzɪtɪd] – посещенный.
active ['æktiv] – активный, действующий.
target [ˈtɑːɡɪt] – цель, мишень.
enabled [ɪˈneɪbl̩d] – разрешенный.
disabled [dɪsˈeɪbld] – заблокированный.
checked [tʃɛkt] – выбранный, проверенный.
empty [ˈɛm(p)ti] – пустой.
root [ruːt] – корень, основание.
odd [ɒd] – нечетный, непарный.
even [ˈiːvn] – четный.
child [tʃʌɪld] – дочерний элемент.
first [fəːst] – первый.
last [lɑːst] – последний.
only [ˈəʊnli] – только, единственный.
type [taɪp] – тип.
not [nɒt] – не, ни.
letter [ˈletər] – буква, литера.
line [laɪn] – линия, строка.
before [bɪˈfɔː] – впереди, перед.
after [ˈɑːftə] – потом, после, позади.
content [kənˈtɛnt] – содержимое.
hover [ˈhɒvə] – нависать.
strong [strɔːŋ] – сильный, крепкий.
important [ɪmˈpɔːt(ə)nt] – важный.
centimeter ['senti,mi:tə] – сантиметр.
inch [int∫] – дюйм (2,54 см).
point [pɔint] – пункт, точка.
pica [ˈpʌɪkə] – шрифт 'пика'.
percent [pəˈsent] – процент.
font [fɒnt] – комплект шрифта.
view [vjuː] – вид, смотреть.
hue [hjuː] – цвет, оттенок, тон.
saturation [satʃəˈreɪʃ(ə)n] – насыщенность.
lightness [ˈlʌɪtnəs] – освещенность, светлота.

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