Число в CSS


Содержание

Значения и единицы измерения CSS

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

Ключевые слова CSS

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

Пример использования ключевых слов в CSS

Результат в браузере

Числовые значения CSS

Значениями свойств в данном случае могут быть целые или дробные числа, состоящие из арабских цифр (0-9). Если число дробное — оно записывается с точкой, а не с запятой. Кроме этого числа могут быть положительными или отрицательными, в случае отрицательных значений перед числом ставится знак минус (-). Далеко не все свойства CSS могут иметь отрицательные или дробные значения.

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

Результат в браузере

Размеры CSS

Размеры CSS — отрицательные или положительные целые или дробные числа, после которых обязательно указываются единицы измерения (исключение составляет ноль (0), для него единицы измерения указывать не обязательно). Единицы измерения, а, соответственно, и размеры могут быть относительными или абсолютными. Относительные размеры всегда зависят от каких-то дополнительных факторов, например разрешения экрана монитора пользователя. Абсолютные размеры не зависят ни от чего и всегда неизменны.

Относительные размеры CSS

Единицы измерения Описание Пример
em Исчисляется в размерах шрифта данного элемента (font-size), где 1em как раз и соответствует размеру шрифта. margin: -7em;
ex Высота строчной буквы «x» шрифта данного элемента. padding: 1.3ex;
px Пиксели. Измеряется в пикселях монитора компьютера или другого визуального устройства. Пиксель — это самая маленькая точка на мониторе высчитываемая исходя его разрешения. left: -150px;
Абсолютные размеры CSS
Единицы измерения Описание Пример
cm Сантиметры. width: 9.5cm;
mm Миллиметры. height: 223mm;
in Дюймы. 1 дюйм равен 2.54 сантиметра. bottom: -2in;
pt Пункты. 1 пункт равен 1/72 дюйма. font-size: 18pt;
pc Пики. 1 пика равна 12 пунктам. min-width: 2.7pc;

Пример указания размеров в CSS

Результат в браузере

Помните и никогда не забывайте о том, что размеры в CSS (в отличие от HTML) всегда пишутся с указанием единиц измерения, как показано в примере. Ошибки, когда например вместо 150px пишут просто 150 являются самыми распространенными среди новичков, поэтому давайте-ка не будем пополнять их ряды, хорошо? :)

Проценты

Процентные значения в CSS записываются также, как в HTML — это целые или дробные положительные или отрицательные числа со знаком процента (%) на конце. Проценты тоже являются относительными единицами измерения, так как всегда зависят от какого-то другого значения, которое приравнивается к 100%.

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

Результат в браузере

Ширина этого параграфа равна половине ширины элемента BODY, а именно 200px.

Текстовые строки

Текст в CSS должен быть обязательно заключен в служебные двойные (» «) или одинарные (‘ ‘) кавычки, причем, если внутри текста используются двойные кавычки, то служебные должны быть одинарными и наоборот (‘Агентство «ВИА» сообщает’).

Если же вы все-таки хотите указать внутри текста такие же кавычки, как и служебные — вам поможет символ обратного слеша (\). Дело в том, что если обратный слеш ставится перед кавычкой, то он отменяет ее действие в качестве служебной (‘Агентство \’ВИА\’ сообщает’). Причем, обратный слеш в таком случае не будет отображен на странице, а будут выведены только сами кавычки.

Адреса файлов (URL)

Ожидается, что в будущем появится еще один определитель ресурса — URN , который в соединении с URL получит название URI .

Пример указания адресов в CSS

Результат в браузере

  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф

Цвета в CSS

Цвет в CSS можно указывать несколькими способами: по имени цвета, по HEX-коду, в формате RGB.

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).

Пример указания цвета в CSS


Результат в браузере

Значения по умолчанию

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

  • Введение
  • Что такое CSS?
  • Синтаксис CSS
  • Подключение CSS
  • Типы устройств
  • Базовый синтаксис
  • Значения и единицы измерения CSS
  • Комментарии в CSS
  • Селекторы CSS
  • Селекторы тегов
  • Селекторы атрибутов
  • Универсальный селектор
  • Классы
  • Идентификаторы
  • Селекторы потомков
  • Дочерние селекторы
  • Соседние селекторы
  • Псевдоклассы
  • Псевдоэлементы
  • Обработка CSS
  • Наследование
  • Приоритеты стилей

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Число в CSS

— тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью.

Синтаксис

Синтаксис расширяет синтаксис — тип хранения данных в CSS — является частным случаем типа number, который представляет целые числа: как положительное, так и отрицательное. Целые числа могу быть использованы в свойствах CSS , таких как column-count, counter-increment, grid-column, grid-row, и z-index.»> . Дробное значение представлено с помощью . , после которой стоит одна (или более) цифра, и может быть присоединено к целочисленному типу данных. Не существует единицы измерения, связанной с числами.

Интерполяция

Во время анимации, значения типа данных CSS являются интерполированными как числа вещественные или с плавающей точкой. Скорость интерполяции определена timing function, связанной с анимацией.

Стилизация номеров строк (цифр) в упорядоченных списках ol

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

    , то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:


Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

Далее в начало каждого элемента списка добавляется с жестко забитым туда числом. После таких манипуляций можно легко задать css-свойства для вышеупомянутых span -ов.

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент ::before и css-свойства content , counter-increment , counter-reset .

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

  • li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
  • counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
      .
    1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента ::before .
    2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента ::before .

подробнее о css-счетчиках можно посмотреть в спецификации.

Вложенные списки и неограниченные возможности стилизации номеров строк.

Вот более интересный пример, сделанный по тому же принципу. Мы не будем приводить в статье html и сss, просто загляните в исходный код.

Поддержка браузерами

CSS-счетчики, так же как и псевдоэлементы ::before и ::after , с давних пор поддерживаются браузерами:

Число

Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5).

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Пример

Спецификация ?

Спецификация Статус
CSS Values and Units Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 12 1 3.5 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Единицы измерений в CSS

Единицы измерений в CSS — это важная часть кода, которая используется при верстке страницы постоянно.


Они бывают абсолютными и относительными.

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

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

Единица измерения Название Эквивалент
сантиметры 1cm = 96px/2.54
миллиметры 1mm = 1/10 от 1cm
дюймы 1in = 2.54cm = 96px
пика 1pc = 1/6 от 1in (дюйма) или 12 пунктов
пункты 1pt = 1/72th от 1in (дюйма)
пиксели 1px = 1/96 от 1in (дюйма)

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

Самое интересное, что все остальные единицы можно представить, оттолкнувшись от пикселей:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

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

Цитата из спецификации:

Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Таким образом, при номинальной длине руки 28 дюймов угол зрения составляет около 0,0213 градусов. Для чтения на расстоянии вытянутой руки 1px соответствует примерно 0,26 мм (1/96 дюйма).

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

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

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

Единица Относительно чего измеряется
% от высоты шрифта родительского элемента
Высота шрифта текущего элемента (по умолчанию в браузерах обычно =16px)
Размер шрифта корневого элемента
Высота символа «x» шрифта элемента в нижнем регистре
Ширина символа «0» (ZERO, U + 0030) в шрифте элемента
1% ширины окна просмотра
1% высоты окна просмотра
1% меньшего размера окна просмотра, т.е. меньшее значение из 1vw или 1vh.
1% большего размера окна просмотра, т.е. большее значение из 1vw или 1vh.

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

Начнем с настроек браузера и единицы rem (root em)

Это единица, соответствующая размеру «корневого» элемента, а именно — тега html. Для него не так часто задаются стили, поэтому размер берется из настроек браузера.

В каждом браузере есть настройки шрифтов по умолчанию. Посмотреть их в Хроме можно, нажав в меню «Настройки» на ссылку «расширенные настройки». В открывшемся окне задается тип шрифта по умолчанию для различных семейств шрифта (с засечками, без засечек и моноширинный), а также его размер. Чаще всего, это 16px. Именно он берется за «корневой» — «root» emrem. От этого размера и рассчитывается единицы, указанные в rem.

В инспекторе свойств для выделенного абзаца со стилевым правилом

Единицы измерения CSS, размер шрифта

Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

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

В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

Абсолютные величины

Физические единицы:

  • Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
  • Сантиметры (cm), 1cm = 96px/2.54.
  • Миллиметры (mm), 1mm = 1/10 от 1cm.
  • Четверть миллиметра, (q) 1q = 1/40 от 1cm.
  • Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
  • Пункты (pt), 1pt = 1/72 дюйма.

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

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


Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

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

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

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

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

Процентные значения.

Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).

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

Давайте рассмотрим пример. Допустим, у всех параграфов (элемент

) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):

Результат нашего примера:

Рис.51 Пример использования процентных значений.

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

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

Результат нашего примера:

Рис.52 Пример наследования процентных значений.

В данном примере для вложенного блока

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

Если бы мы не изменили значение размера шрифта для блока

Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

Единица измерения еm.

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

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

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

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

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

Единица измерения rеm.

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

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

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании :)

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem .

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem . В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.


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

Рис.55 Пример использования значений rem.

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

Единица измерения еx.

Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

Единица измерения ch.

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.

1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.

Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw , для третьего — 3vw ), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw , для третьего — 50vw ) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh , для третьего — 20vh ).

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

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

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

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.

1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block ), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0 .

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin . Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

Для высоты расчёт аналогичен:

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:

  1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Andro >vmax , iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax , 7 версия – некорректно работала единица измерения vh ).
  2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
    • IE работает только с версии 9.0 (поддерживает значение vm , вместо vmin ).
    • IE 10, IE 11 не поддерживают значение vmax .
    • Edge 12, 13, 14 не поддерживают значение vmax .

Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.


Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:

Значение Описание
medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

    Практическое задание № 13
    У нас имеются следующие стили, в которых элемент и элементы

Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
  • Сколько в пикселях составляет размер шрифта текста, внутри блока

Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
  • Сколько в пикселях составляет размер шрифта текста, внутри блока

Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
  • Сколько в пикселях составляет размер шрифта текста, внутри блока

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

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

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

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

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

К относительным единицам измерения относятся пиксели (px) и проценты (%). Процент — единица измерения, не имеющая напрямую никакого отношения к размеру шрифта в элементе или к размеру самого элемента. Величина свойства, установленная в процентах, напрямую зависит от величины этого же свойства, установленного для родительского элемента. Например, размер шрифта задается относительно размера шрифта родительского элемента, также высота и ширина выражается в процентах относительно высоты и ширины области содержимого родительского элемента.

Пиксель — точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em — высота текущего шрифта, ex — высота символа «х» в нижнем регистре указанного шрифта.

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem — размер шрифта корневого элемента ( ), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.


Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

Обратите внимание, что объявление не будет работать, если перед единицей измерения стоит пробел, или если единица измерения не указана (за исключением нулевого значения). Если в качестве значения используется ноль, то указание единицы измерения можно опустить.

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

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5342bf1b3d168fdf • Your IP : 188.64.174.135 • Performance & security by Cloudflare

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

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

В таблице ниже показаны основные единицы измерения используемые в CSS.

Табл. 1. Основные единицы измерения используемые в CSS

Единица измерения Тип Пример
px (пикселы) Длина width: 650 px;
em Длина line-height: 2em;
% (проценты) Длина width: 80%;
in (дюймы) Длина margin-top: .75in;
cm (сантиметры) Длина margin-top: 2.80cm;
xx-small . xx-large Размер шрифта font-size: xx-large;
rgb(r, g, b) Цвет (десятичная система) color: rgb(100, 100, 100);
#rrggbb Цвет (шестнадцатиричная система) color: #3399FF;
#rgb Цвет (шестнадцатиричная система, уменьшенная глубина) color: #b1b;

Всё разнообразие значений CSS можно сгруппировать так:

  • числа (целые числа и десятичные дроби, разделителем в дроби служит точка),
  • проценты,
  • размеры (абсолютные и относительные),
  • цвета (в различных системах),
  • ключевое слово: значения свойств в CSS могут задаваться ключевыми словами, но единицами измерения являются ключевые слова для задания размера шрифта xx-small . xx-large , также к ним можно отнести названия цветов,
  • адреса (URI или Uniform Resource Identifiers, унифицированный идентификатор ресурсов), хотя это не единица измерения, но используется в указании свойств значений, поэтому упомянет кратко о адресах в этой статье.

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

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

Как вы должны знать, для монитора можно задать один стиль отображения документа, а для принтера другой.

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

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

Единицы измерения свойств CSS для мониторов

Мониторы в CSS также называются термином — переменные среды, так как их размеры не являются постоянными, как например размер листа формата А4. Для задания стилевых значений html-документа выводимого на экран чаще всего используют следующие три единицы измерения:

  • px (пикселы)
    — это относительные единицы измерения, их размер зависит от настроек дисплея пользователя. Пикселы задаются только целым числом.
  • em
    В CSS, как и в других цифровых средах вёрстки, величина em равняется максимально возможной высоте буквы в используемом шрифте. Чаше всего значение em звдаётся числом с плавающей стрелкой.
  • % (проценты)
    Проценты — относительная величина, что очевидно. При задании величины в процентах можно также использовать числа с плавающей запятой.

Единицы измерения свойств CSS для печатных форм

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

  • pt (точка)
    — это традиционная единица измерения для определения размера шрифтов. В одном сантиметре чуть меньше 28,35 точек.
  • in (дюймы)
    — единица измерения длины равная 2,54 сантиметра (примерно). Если рядом сложить четыре простых карандаша, их общая ширина равна 1,125 дюйма.
  • cm (сантиметры)
    Размер листа формата А4 составляет 21 ˟ 29,7 см.

Ключевые слова для задания размера шрифта

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

Свойство font-size поддерживает семь ключевых слов:

  1. xx-large
  2. x-large
  3. large
  4. medium (по умолчанию)
  5. small
  6. x-small
  7. xx-small
Табл. 2. Соотношение размеров font-size с другими величинами
Ключевое слово Заголовок Пикселы
xx-large h1 32
x-large h2 24
large h3 18
medium h4 16
small h5 13
x-small 10
xx-small h6 9

При составлении колонки «Пикселы» учитывались размеры текста по умолчанию в Firefox 3, IE 8 и Safari 3/4.

Цвета в CSS

В CSS поддерживается трёхканальное цветовое пространство — RGB (red, green, blue). Глубина цвета каждого канала — 8 бит.

В CSS2.1 цвета можно задавать следующими способами:

  • rgb(r, g, b)
    Три канала, десятичная система, значение каждого канала можно задать в диапазоне от 0 до 255.
  • #rrggbb
    Три канала, шестнадцатиричная система, значение каждого канала можно задать в диапазоне от 00 до ff.
  • #rgb
    Три канала, шестнадцатиричная система, уменьшенная глубина

В CSS3 есть возможность использовать четырёхканальных стандарт RGBA. Четвёртый канал — альфа — задаёт прозрачность элемента. Подробнее об этом будет написано нижа.

Пока вернёмся к возможностям по работе с цветами в CSS2.1.

Кратко про RGB

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

Давайте рассмотрим пример кода, в котором используется десятичная система для задания цвета в модели RGB.

Пример должен отобразиться так:

В первом блоке мы задали только красный цвет на максимальную насыщенность — 255, показатели остальных цветов равны нолю. В следующих примерах аналогично сделали с зелёным и синим цветом.

Обратите внимание, в примере я установил для свойст height (высота блока) и line-height (высота строки) одинаковое значение — 40px , это позволило установить текст в блоке

Шестнадцатеричные цвета

Как следует из названия, для задания цвета в данном случае используется шестнадцатеричная система. Если обычно мы пользуемся десятичной системой с цифрами от 0 до 9, то в шестнадцатеричной системе используются следующие цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. В качестве цифр диапазона от 10 до 15 используются латинские буквы. В таблице №3 показано соответствие десятичных и шестнадцатеричных чисел.

Табл. 3. Десятичные и шестнадцатеричные числа меньше 16

Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F

Для написания шестнадцатеричных чисел больше 15 используют объединение двух шестнадцатеричных цифр. Так, для записи числа 255 в шестнадцатеричной системе используется FF.

Табл. 4. Десятичные и шестнадцатеричные числа больше 16

Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

В десятичной системе самое большое число, которое можно записать при помощи двух цифр — это 99, в шестнадцатеричной системе при помощи двух цифр можно написать число — FF, оно соответствует 255.

Если цвет указывается в 16-ричной системе, то перед числовым значением нужно ставить знак «#», например #C0C0C0 .

Допускается сокращенная запись 16-ричного цвета: вместо 6-значного числа можно указать 3-значное. Это допустимо только в случае, когда две цифры в значении цвета повторяются.

Происходит следующее преобразование:

Например, цвет #ffffaa можно кратко написать так — #ffa , или цвет #332211 можно записать в виде #321 .

Кратко про RGBА

Формат RGBA по синтаксису практически соответствует формату RGB, но тут добавлен четвёртый канал — альфа-канал, задающий прозрачность элемента. Следует отметить, что фотрмат RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. На момент написания этой статьи стандарт CSS3 ещё не утверждён и находится в разработке, так что некоторые вещи в нём могут поменяться.

Значения для альфа-канала: 0 соответствует полной прозрачности, 1 — полной непрозрачности, а промежуточные значения вроде 0.5 — полупрозрачности.

Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

Приветствую Вас, уважаемые читатели блога webcodius! Для задания размеров различных элементов html страницы, в CSS существуют единицы измерения. Причем могут использоваться как относительные, так и абсолютные единицы.

Абсолютные единицы связаны с физическим миром и не зависят от устройства вывода. Для их указания можно использовать следующие единицы:

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

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

Илон Маск рекомендует:  Несколько слов о <meta http equiv >
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL