Theory and Tasks for Students - Spring 2019
Форматы значений стилей CSS

Как значения некоторые стили принимают размер, цвет, картинку, целые или вещественные числа, строки, названия констант или даже время. Многие значения могут иметь единицы измерения, они записываются слитно с числом {целое/вещественное число}{единица измерения}:

  • Размеры - существуют два типа единиц измерения размеров - физические и относительные:
    • Физические(реальные) единицы измерения определяют размер относительно, очевидно, пространства реального мира. Используются в основном для печати и устройств с высоким разрешением(количество точек на дюйм - dpi) - в остальных случаях эти единицы определяются размером пикселя и считается, что 1 дюйм равен 96 пикселям:
      • mm - миллиметры
      • cm - сантиметры
      • in - дюймы, ~2.54 cm
      • pt - пункты, 1/72 in
      • pc - пика, 12pt или 1/6 in
    • Относительные(виртуальные) единицы измерения определяют размер относительно как-либо других размеров/элементов:
      • em - текущая высота шрифта, т.е. 2em будет задавать размер в два раза больше текущей высоты шрифта элемента
      • ex - высота символа x текущего шрифта с текущим размером в нижнем регистре, обычно равен 0.5em - используется крайне редко
      • ch - ширина символа 0 в данном шрифте, удобна в использовании с моноширинными шрифтами
      • % - процентная величина от соответствующей высоты/ширины элемента или высоты строки или чего-либо ещё родительского элемента, в зависимости от свойства
      • vw, vh - viewport width и viewport height, 1% от, соответственно, ширины и высоты области отображения всей веб-страницы, что не всегда является размером всего экрана
    • px - пиксели, размер зависит от устройства - и в то же время, например, при печати, 96px == 1in
    • Таким образом, в последнее время рекомендуется большую часть размеров определять в относительных единицах, в частности, в em - особенно если это касается размеров шрифтов, т.к. в таком случае будут учитываться настройки масштабирования текста браузера/операционной системы. При этом всё ещё распространена практика определения размера шрифта в пунктах, хотя бы у элемента <body>, в основном из-за того, что у разных браузеров размер шрифта по умолчанию бывает разный, 12..16px.
      Размеры и отступы элементов принято определять либо в процентах, vw, vh, пикселях(если это связано с картинками), em.
      Размеры рамок лучше всего задавать в пикселях, т.к. к ним не применяется сглаживание при размерах, выражаемых дробным количеством пикселей.
      Без явной на то необходимости лучше оставлять размеры/положение объектов как есть.
  • Цвета - есть несколько способов определения цвета:
    • Color name - например, black - 140 констант-названий различных цветов
    • HEXadecimal - #rrggbb - шестнадцатеричный формат определения 24-битного цвета(8 бит на канал), каждая пара знаков определяет число от 0 до 255 (00..ff) - значение цветовой составляющей по аддитивной схеме RGB(Red-Green-Blue)
    • HEX Alpha - #rrggbbaa - в некоторых браузерах поддерживается добавление значения альфа-канала(прозрачность цвета), значение прозрачности 00 даёт одинаковый абсолютно прозрачный результат для всех оттенков и идентичен константе transparent
    • Short HEX - #rgb - сокращённый HEX формат, значение каждого канала умножается на 11 в шестнадцатеричной системе, таким образом цвета #f40 и #ff4400 - идентичны, однако таким образом можно задать только 4096 разных цветов, т.е. нельзя, например, задать цвет #000001
    • Short HEX Alpha - #rgba - так же возможно добавление альфа-канала, так же поддерживается не всеми клиентами
    • Функция rgb(r, g, b) - каждый из трёх аргументов функции - целое число на промежутке [0..255], результат идентичен соответствующему HEX значению
    • Функция rgba(r, g, b, a) - здесь прозрачность задаётся вещественным числом на промежутке [0..1], значение 0 делает цвет абсолютно прозрачным, поддерживается всеми современными браузерами, в отличие от HEX аналогов
    • Функция hsl(h, s, l) - позволяет задать цвет по модели Hue-Saturation-Lightness, распространённой в сфере дизайна и считаемой более интуитивно понятной, чем RGB;
      значение h - угол круга оттенков в градусах deg, радианах rad, градах grad и оборотах turn - также принимается простое числовое значение, оно интерпретируется как градусы; 0 градусов - красный цвет, 120 - зелёный, 240 - синий и т.д.;
      s и l - насыщенность(0% - серый) и освещённость(не яркость/brightness, 0% - чёрный, 100% - белый) цвета;
      Таким образом, цвет hsl(180, 100%, 25%) практически эквивалентен #008080, rgb(0, 128, 128):
      HEX
      HSL
      RGB
    • Функция hsla(h, s, l, a) - аналогично, добавляется значение прозрачности, как в функции rgba()
  • Строки - значение указывается в "кавычках";
  • Изображение - обычно используется функция url("http://www.example.com") с ссылкой, абсолютно или относительной, на это изображение;
  • Время - число секунд s, миллисекунд ms;
  • Угол - как видно в функции цвета hsl(), угол может задаваться в градусах deg, радианах rad, градах grad и оборотах turn;
  • У многих стилей возможно ещё несколько дополнительных значений:
    • initial - значение, установленное браузером по умолчанию
    • inherit - наследует значение этого стиля из родительского элемента
    • unset - наследует значение, если это возможно, иначе использует значение по умолчанию