28. Единицы измерения размеров и цвета в css: способы, синтаксис, примеры. Абсолютные и относительные единицы измерения: определение, группы.

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

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

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

Табл. 1. Относительные единицы измерения
Единица	Описание
em	Высота шрифта текущего элемента
ex	Высота символа x
px	Пиксел
%	Процент

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевое свойствоfont-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, мы работаем именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1em принимается размер шрифта его родителя.

ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.

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

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 2 перечислены основные такие единицы.

Табл. 2. Абсолютные единицы измерения
Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Многие люди привыкли задавать размер шрифта в текстовых редакторах, например, 12. А что это число означает, не понимают. Так это именно пункты и есть, они родные. Конечно они нам не родные, мы привыкли измерять все в миллиметрах и подобных единицах, но пункт, пожалуй, единственная величина из не метрической системы измерения, которая используется у нас повсеместно. И все благодаря текстовым редакторам и издательским системам. В примере 2 показано использование пунктов и других единиц.

Измерение цвета

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359. Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

29. Правила форматирования блоковых элементов страницы в CSS: группы (блоковые, строчные), примеры. Основные определения, синтаксис, индивидуальные свойства, примеры блоковых элементов: контент (содержимое блокового элемента), поля (padding), граница блока (border), отступы (margin). Графическая модель блокового элемента страницы.

Все элементы страниц HTML можно подразделить на две группы - блоковые и строчные.

Блоковые элементы - это те, которые отображаются на странице в виде абзацев или схожих с ними блоков. Примерами их могут служить элементы, заключенные в тэги-контейнеры <div>, <p>, <table>, тэги заголовков всех уровней, а также тэг <img>. Cтрочные, или inline, элементы - это отдельные элементы, встречающиеся внутри блоковых и управляющие выделением, обособлением слов внутри абзаца (внутри блока). Это, например, тэги-контейнеры <strong>, <em>, а также устаревшие тэги физического форматирования <b>, <i>, <u>. Вы, наверное, уже поняли, что посредством CSS можно изменить отображение этих элементов, и текст, выделенный в тэге-контейнере <b>, может стать не просто жирным, но жирным другого (отличного от всего абзаца) цвета, или же вообще быть не жирным, а, к примеру, зачеркнутым. Большую часть свойств CSS можно применить и к тем, и к другим элементам. Это такие свойства, как цвет текста и начертание шрифта, цвет фона и т.п. A‚рочные элементы, так же, как и блоковые, поддерживают классы и идентификаторы. Но есть отдельная группа свойств, применимых только к блоковым элементам. О них мы сейчас и поговорим.

Каждый блоковый элемент (например, <p>) в представлении браузера состоит из нескольких частей, которые как бы вложены одна в другую. Pмой внутренней частью этой "слойки" является непосредственно содержимое блока (в случае тэга <p> - какой-либо текст). Снаружи содержимое блока окружено некоторым пространством, являющимся отступом от содержимого до границы блока. Это пространство имеет всегда тот же цвет фона, что и содержимое, а его размер задается в таблице стилей с помощью свойства padding. Еще ближе к поверхности нашей "слойки", сразу вслед за отступом, лежит граница блока - border. В таблице стилей мы можем задать для нее сразу три свойства - толщину, цвет и стиль отображения (border-width, border-color и border-style, соответственно). Если с толщиной и цветом все более-менее понятно, то относительно последнего свойства естественным образом возникает вопрос: какие значения мы можем ему прописать, и как это будет выглядеть? Значения следующие: none - граница визуально отсутствует, даже если свойству border-width присвоено значение, отличное от нуля; solid - граница отображается в виде сплошной линии, толщина которой равна значению border-width; inset - граница отображается таким образом, что создается впечатление "вдавленности" всего блока в поверхность страницы; outset - граница отображается таким образом, что весь блок выглядит как бы выступающим над поверхностью страницы; double - двойная граница, при этом значение свойства border-width делится поровну между двумя линиями и промежутком между ними; ridge - граница выглядит, как рельефная линия, выступающая над поверхностью страницы; groove - граница выглядит, как вдавленная в страницу линия, напоминающая желобок.

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