Основы CSS, какие единицы измерения использовать в разных случаях

Значения для правил в CSS: цвета, функционалы и размеры

В предшествующем докладе рассматривались основы CSS и методы подключения стилей к HTML-коду (с использованием элементов Style и Link). В данной статье продолжим рассмотрение темы, фокусируясь на механизмах наследования в стилевом оформлении и установке размеров шрифтов (в пикселях, пунктах, процентах и прочих единицах измерения).

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

Перейдем к источникам информации о правилах каскадных стилей. Разумным будет обратиться к валидатору W3C или непосредственно к странице текущей спецификации CSS. Для ознакомления с существующими правилами в этой спецификации достаточно перейти по ссылке в верхнем меню с названием «properties».

В качестве значений для этих правил могут служить различные слова, такие как «left», «right», «center», «justify» и др., предварительно определенные в таблице данной спецификации (см. рисунок выше, столбец «Values»). В качестве значений также могут выступать просто числа без размерности (как в правиле «z-index») или шестнадцатеричные коды цвета (например, #fff8dc).

Более детально остановимся на задании цветов в CSS и способах их реализации:

— Прямым указанием названия одного из 17 предопределенных цветов, таких как «aqua», «black», «blue», «fuchsia», «gray», «green», «lime», «maroon», «navy», «olive», «orange», «purple», «red», «silver», «teal», «white» и «yellow».

Пример:

color: red;

— Использование шестнадцатеричных кодов цвета, как, например, #186EAE.

Пример:

background-color: #186EAE;

— Сокращенное шестнадцатеричное представление цвета в CSS, например, #CA7.

Пример:

border-color: #CA7;

— Задание цвета с использованием функционала, представленного в форме rgb(0, 148, 253), где указываются значения для каждого из трех каналов RGB.

Пример:

text-shadow: 2px 2px 4px rgb(0, 148, 253);

— То же самое, но значения в каналах выражены в процентном соотношении.

Пример:

box-shadow: 0 0 10px rgb(0%, 50%, 98%);

Кроме того, в качестве значений для правил CSS часто используются функционалы, как, например, функция Url.

Пример:

background-image: url(images/navtabr.png);

Также в CSS широко применяются размеры шрифтов и других элементов. В отличие от тега Font с атрибутом Size, где размеры указывались числами от 1 до 7, в CSS размеры шрифтов всегда указываются с использованием единиц измерения.

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

Могут использоваться как относительные, так и абсолютные единицы. Абсолютные единицы, связанные с физическим миром, включают сантиметры (cm), миллиметры (mm) и дюймы (in). Последние служат основой для часто используемых в полиграфии пунктов (pt) и пиков (pc).

Дюйм (in) равен 25,4 миллиметра (mm), а пункт (pt) формируется разделением одного дюйма (in) на 72 части, что примерно соответствует трети миллиметра (mm). Пик (pc) равен 12 пунктам (pt).

Пиксели, Em, Ex и проценты в CSS: относительные размеры в веб-дизайне

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

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

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

Пиксели (px): Относительная величина, зависящая от монитора и его настроек, поскольку размер пикселя формируется видеокартой на основе обрабатываемых сигналов.

Пример использования пикселей в CSS:

.selector {
    width: 300px;
    height: 200px;
}

Em и Ex: Относительные единицы, связанные с размерами шрифтов. Em представляет собой высоту шрифта по умолчанию, в то время как Ex — высоту прописной буквы «x» в используемом шрифте.

Пример использования Em и Ex в CSS:

.selector {
    font-size: 1.5em;
    line-height: 2ex;
}

Проценты (%): Относительная величина, вычисляемая относительно других параметров.

Пример использования процентов в CSS:

.selector {
    width: 50%;
    margin-left: 10%;
}

Не все свойства CSS могут быть определены с использованием процентов, и данная возможность зависит от конкретного свойства, как указано в спецификации W3C. Таким образом, важно выбирать подходящие относительные единицы в зависимости от контекста и требований макета.

Наследование в CSS

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

Различные браузеры могут различным образом поддерживать и интерпретировать некоторые стилевые свойства. Эта вариабельность зависит как от конкретного браузера, так и от его версии. В данном контексте, на странице, посвященной «properties», приводятся характеристики стилевых правил:

• в колонке «Name» указывается название правила,
• в колонке «Values» перечислены возможные значения,
• в колонке «Initial value» определено начальное значение (используемое по умолчанию),
• в колонке «Applies to» указывается, к каким элементам применяется правило,
• в колонке «Inherited?» отражено, наследуется ли данное правило.

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

Рассмотрим примеры наследования в CSS с использованием созданной структуры из трех вложенных контейнеров типа Div. Допустим, что внутрь внешнего контейнера Div вложены несколько элементов HTML, таких как теги абзаца P. Если для данного контейнера Div указать какое-либо свойство CSS, для которого наследование разрешено, оно будет применено ко всем тегам абзаца внутри этого контейнера.

Таким образом, если в таблице значений против интересующего правила в колонке «Inherited?» указано «Yes», наследование разрешено (например, для свойства color), а если «No», то наследование запрещено (например, для свойства background).

Проиллюстрируем концепцию наследования в CSS на примерах, создав структуру из трех вложенных контейнеров Div, чтобы более наглядно представить, как осуществляется передача свойств для некоторых правил и не осуществляется для других.