Типы значений CSS.

  Типы значений CSS - это аналог типов данных языков программирования.
  Логика развития функционала CSS потребовала нового уровня стандартизации значений атрибутов стилей CSS общеприменяемых для разных атрибутов стилей.
  Типы значений CSS
  angle - Угловая величина - число, дробное или целое, с единицей измерения, или без единицы измерения.
  В зависимости от контекста применения угловая величина может быть задана десятичной дробью (с точкой).
  Контекст применения угловой величины может накладывать ограничение на её единицу измерения.
  Единица измерения следует без разделяющего пробела непосредственно за значением угловой величины.
  Единицы измерения угловых величин:

  • deg - Градусы. (= 10mm)
  • grad - Грады (360deg = 400grad).
  • rad - Радианы (360deg ≈ 6.2832rad).
  • turn - Число оборотов полного круга (360deg = 1turn).
  Примеры формата записи значения angle:

  • 180deg
  • -10.5deg
  • 25grad
  • 2rad
  • 10turn
  • calc(90deg / 2)
  • attr(Имя атрибута angle)
  • attr(Имя атрибута deg)
  array - Массив.

Формат записи значения array:

  • minmax(Минимум, Максимум) - Обращение к CSS функции minmax, которая возвращает массив из двух заданных значений.
  • repeat(Количество, Значение) - Обращение к CSS функции repeat, которая возвращает массив повторяющихся значений.
  blend-mode - Cпособ наложения перекрывающихся слоёв.
  Способ наложения задаёт алгоритм вычисления результирующего цвета каждого пикселя перекрывающихся слоёв, который определяет цвет переднего плана на WEB-странице.

Формат записи значения blend-mode:

  • normal - Верхний слой полностью перекрывает нижний:


  • color - Цвет переднего плана формируется пикселями верхнего слоя, но с яркостью соответствующих пикселей нижнего слоя:


  • color-burn - Цвет переднего плана является результатом смещения "влево" (в сторону чёрного) чёрной составляющей цвета каждого пикселя нижнего слоя на значение равное величине яркости соответствующего пикселя верхнего слоя:


  • color-dodge - Цвет переднего плана является результатом смещения "влево" (в сторону чёрного) белой составляющей цвета каждого пикселя нижнего слоя на значение равное величине яркости соответствующего пикселя верхнего слоя:


  • darken - Цвет переднего плана является результатом выбора самого темного цвета из соответствующих пикселей верхнего и нижнего слоёв:


  • difference - Цвет переднего плана является результатом вычитания цветов пикселей слоя, соответствующий пиксель которого темнее из цветов соответствующих пикселей другого слоя.
      Например чёрный цвет верхнего пикселя приводит к итоговому цвету нижнего пикселя (вычитания ноля)

  • exclusion - Аналогичен difference но с уменьшенной контрастностью:


  • hard-light - Цвет переднего плана является результатом выбора цвета пикселя нижнего слоя если цвет нижнего темнее, и инвертированного умножения (screen) в противном случае:


  • hue - Цвет переднего плана формируется пикселями верхнего слоя, но с насыщенностью и яркостью соответствующих пикселей нижнего слоя:


  • lighten - Цвет переднего плана является результатом выбора самого светлого цвета из соответствующих пикселей верхнего и нижнего слоёв:


  • luminosity - Цвет переднего плана формируется пикселями нижнего слоя, но с яркостью соответствующих пикселей верхнего слоя:


  • multiply - Цвет переднего плана является результатом умножения цветов пикселей верхнего и нижнего слоёв.
      Например чёрный цвет верхнего пикселя приводит к итоговому чёрному цвету (умножение на ноль), белый - к итоговому цвету нижнего пикселя (умножение на единицу)

  • overlay - Цвет переднего плана является результатом умножения цветов пикселей верхнего и нижнего слоёв (multiply) если цвет нижнего темнее, и инвертированного умножения (screen) в противном случае:


  • saturation - Цвет переднего плана формируется пикселями нижнего слоя, но с насыченностью соответствующих пикселей верхнего слоя:


  • screen - Цвет переднего плана является результатом инвертированного умножения цветов пикселей верхнего и нижнего слоёв.
      Например белый цвет верхнего пикселя приводит к итоговому белому цвету (умножение на ноль), черный - к итоговому цвету нижнего пикселя (умножение на единицу)

  • soft-light - Цвет переднего плана является результатом выбора цвета пикселя нижнего слоя если цвет нижнего темнее, и умножения (multiply) в противном случае:


  color - Цвет.

Форматы записи значения color:

  • currentColor - Ключевое слово, которое задаёт текущее значение цвета.
      Это может быть унаследованное значение, или значение по умолчанию.
  • hsl(Оттенок, Насыщенность, Степень белого) - Обращение к CSS функции hsl, которая возвращает градиентное значение цвета.
  • hsla(Оттенок, Насыщенность, Степень белого, Прозрачность) - Обращение к CSS функции hsla, которая возвращает градиентное значение цвета.
  • rgb(Красный, Зеленый, Синий) - Обращение к CSS функции rgb, которая возвращает смешанное значение цвета.
  • rgba(Красный, Зеленый, Синий, Прозрачность) - Обращение к CSS функции rgba, которая возвращает смешанное значение цвета.
  • RGB-код - Значение цвета в виде:

        #Степень красного цветаСтепень зеленого цветаСтепень синего цвета.
      Степень каждого цвета кодируется шестнадцатеричным числом от 00 до FF, или от 0 до F.
  • Имя цвета - Например одно из ключевых слов из таблицы:
Имена цветов CSS
Цвет Имя цвета RGB-код Цвет Имя цвета RGB-код Цвет Имя цвета RGB-код
black #000000 silver #C0C0C0 gray #808080
white #FFFFFF maroon #800000 red #FF0000
purple #800080 fuchsia #FF00FF green #008000
lime #00FF00 olive #808000 yellow #FFFF00
navy #000080 blue #0000FF teal #008080
aqua #00FFFF orange #FFA500 aliceblue #F0F8FF
antiquewhite #FAEBD7 aquamarine #7FFFD4 azure #F0FFFF
beige #F5F5DC bisque #FFE4C4 blanchedalmond #FFEBCD
blueviolet #8A2BE2 brown #A52A2A burlywood #DEB887
cadetblue #5F9EA0 chartreuse #7FFF00 chocolate #D2691E
coral #FF7F50 cornflowerblue #6495ED cornsilk #FFF8DC
crimson #DC143C darkblue #00008B darkcyan #008B8B
darkgoldenrod #B8860B darkgray #A9A9A9 darkgreen #006400
darkgrey #A9A9A9 darkkhaki #BDB76B darkmagenta #8B008B
darkolivegreen #556B2F darkorange #FF8C00 darkorchid #9932CC
darkred #8B0000 darksalmon #E9967A darkseagreen #8FBC8F
darkslateblue #483D8B darkslategray #2F4F4F darkslategrey #2F4F4F
darkturquoise #00CED1 darkviolet #9400D3 deeppink #FF1493
deepskyblue #00BFFF dimgray #696969 dimgrey #696969
dodgerblue #1E90FF firebrick #B22222 floralwhite #FFFAF0
forestgreen #228B22 gainsboro #DCDCDC ghostwhite #F8F8FF
gold #FFD700 goldenrod #DAA520 greenyellow #ADFF2F
grey #808080 honeydew #F0FFF0 hotpink #FF69B4
indianred #CD5C5C indigo #4B0082 ivory #FFFFF0
khaki #F0E68C lavender #E6E6FA lavenderblush #FFF0F5
lawngreen #7CFC00 lemonchiffon #FFFACD lightblue #ADD8E6
lightcoral #F08080 lightcyan #E0FFFF lightgoldenrodyellow #FAFAD2
lightgray #D3D3D3 lightgreen #90EE90 lightgrey #D3D3D3
lightpink #FFB6C1 lightsalmon #FFA07A lightseagreen #20B2AA
lightskyblue #87CEFA lightslategray #778899 lightslategrey #778899
lightsteelblue #B0C4DE lightyellow #FFFFE0 limegreen #32CD32
linen #FAF0E6 mediumaquamarine #66CDAA mediumblue #0000CD
mediumorchid #BA55D3 mediumpurple #9370DB mediumseagreen #3CB371
mediumslateblue #7B68EE mediumspringgreen #00FA9A mediumturquoise #48D1CC
mediumvioletred #C71585 midnightblue #191970 mintcream #F5FFFA
mistyrose #FFE4E1 moccasin #FFE4B5 navajowhite #FFDEAD
oldlace #FDF5E6 olivedrab #6B8E23 orangered #FF4500
orchid #DA70D6 palegoldenrod #EEE8AA palegreen #98FB98
paleturquoise #AFEEEE palevioletred #DB7093 papayawhip #FFEFD5
peachpuff #FFDAB9 peru #CD853F pink #FFC0CB
plum #DDA0DD powderblue #B0E0E6 rosybrown #BC8F8F
royalblue #4169E1 saddlebrown #8b4513 salmon #FA8072
sandybrown #F4A460 seagreen #2E8B57 seashell #FFF5EE
sienna #A0522D skyblue #87CEEB slateblue #6A5ACD
slategray #708090 slategrey #708090 snow #FFFAFA
springgreen #00FF7F steelblue #4682B4 tan #D2B48C
thistle #D8BFD8 tomato #FF6347 turquoise #40E0D0
violet #EE82EE wheat #F5DEB3 whitesmoke #F5F5F5
yellowgreen #9ACD32 rebeccapurple #663399
  gradient - Градиент цветов.
  Градиент цветов в CSS не надо путать с градиентным значением цвета.
  Градиенты подразделяются на линейные градиенты и радиальные градиенты.
  Линейный градиент
  Линейный градиент задаётся осью градиента, каждая точка на которой имеет отличный цвет от соседней.
  Разница в цветах на оси градиента получается за счет плавного перехода между заданными цветами градиента.
  Любая линия перпендикулярная оси градиента имеет один цвет, который соответствует цвету точки пересечения этой линии с осью градиента.
  Эти линии бесконечны в обе стороны от оси градиента.

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

  Любой CSS объект имеющий значение линейного градиента, будет иметь окраску соответствующую расположению оси и направлению цветов градиента.
  Радиальный градиент
Радиальный градиент задаётся окружностью или эллипсом, любой радиус которых является радиусом градиента. (Радиусом эллипса считается любой отрезок от места пересечения условных горизонтальной и вертикальной осей эллипса до любой точки на эллипсе.)
  Каждая точка на любом радиусе градиента имеет отличный цвет от соседней на этом же радиусе.
  Разница в цветах точек на радиусе градиента получается за счет плавного перехода между заданными цветами градиента.
  Кажда(я|ый) из внутренних концентрических окружностей или эллипсов перпендикулярных радиусу градиента имеет один цвет, который соответствует цвету точки пересечения эт(ой|ого) окружности или эллипса с радиусом градиента.

  Радиус градиента, по умолчанию, ограничен самой дальней от его центра границей пространства занимаемым CSS объектом, к которому применяется этот градиент (например для фона это будет наиболее удалённый угол поля элемента).

  Любой CSS объект имеющий значение радиального градиента, будет иметь окраску соответствующую направлению цветов градиента и части его радиусов до соответствующей границы пространства этого объекта.

Форматы записи значения gradient:

  • linear-gradient([Угол| to [top | bottom | left | right],]
      Цвет1 [Доля][, Цвет2 [Доля][,...] [, ЦветN [Доля])

    - Обращение к CSS функции linear-gradient, которая возвращает значение линейного градиента.
  • radial-gradient([[circle | ellipse [Радиус1] [Радиус2]] [at Позиция][Угол]
      [closest-corner | closest-side | farthest-corner | farthest-side],]
      Цвет1 [Доля][, Цвет2 [Доля][,...][, ЦветN [Доля]))

    - Обращение к CSS функции radial-gradient, которая возвращает значение радиального градиента.
  image - Изображение.

Форматы записи значения image:

  • [-webkit-]canvas(Идентификатор) - Обращение к CSS функции canvas, которая возвращает изображение.
  • repeating-linear-gradient([Угол| to [top | bottom | left | right],]
      Цвет1 [Доля][, Цвет2 [Доля][,...][, ЦветN [Доля])

    - Обращение к CSS функции repeating-linear-gradient, которая возвращает изображение.
  • repeating-radial-gradient([circle | ellipse [Радиус1] [Радиус2]] [at Позиция]
      [closest-corner | closest-side | farthest-corner | farthest-side]
      Цвет1 [Доля][, Цвет2 [Доля][,...][, ЦветN [Доля]))

    - Обращение к CSS функции repeating-radial-gradient, которая возвращает изображение.
  • url(Ссылка) - Обращение к CSS функции url, которая возвращает изображение.
  integer - Целое положительное или отрицательное число без единицы измерения.
  Целое состоит из одной или нескольких десятичных цифр от 0 до 9 со знаком + или -.
  Знак + может быть опущен.
  Примеры формата записи значения integer:

  • 0
  • 000
  • 10
  • +10
  • -23
  • 0145
  • -0
  • calc(10 * 2)
  • attr(Имя атрибута integer)
  length - Линейная величина - положительное число, дробное или целое, с единицей измерения, или без единицы измерения.
  В зависимости от контекста применения линейная величина может быть задана десятичной дробью (с точкой).
  Если линейная величина задана без единицы измерения, то её единица измерения может быть вычислена браузером в зависимости от контекста её применения.
  Также контекст применения линейной величины может накладывать ограничение на её единицу измерения.
  Единица измерения следует непосредственно за значением линейной величины без разделяющего пробела.
  Единицы измерения линейных величин:

  • cm - Сантиметры. (= 10mm)
  • ch - Доли (десятичное число с точкой) от ширины символа 0 (ноль) текущего шрифта (адаптивный размер).
  • em - Доли (десятичное число с точкой) от высоты символов текущего шрифта (адаптивный размер).
  • ex - Доли (десятичное число с точкой) от высоты символов текущего шрифта в нижнем регистре (адаптивный размер. 1ex ≈ 0.5em).
  • fr - Фракция или доля от связанного c этим размером CSS пространства.
  • in - Дюймы (≈ 2.54cm).
  • mm - Милиметры. (= 0.1cm)
  • pc - Пики (= 12pt ).
  • pt - Пункты (= 1/72in ).
  • px - Пикселы. (Для устройств отображения с очень высоким разрешением один CSS-пиксель может означать несколько физических пикселей, в любом случае количество пикселей на дюйм будет равно ≈ 96.)
  • rem - Доли (десятичное число с точкой) от текущей высоты символов шрифта установленного для элемента тега HTML (адаптивный размер).
  • vmax - Проценты от текущего максимального размера окна (ширины или высоты, адаптивный размер).
  • vmin - Проценты от текущего минимального размера окна (ширины или высоты, адаптивный размер).
  • vh - Проценты от текущей высоты окна (адаптивный размер).
  • vw - Проценты от текущей ширины окна (адаптивный размер).
  • % - Процент.
  Примеры формата записи значения length:

  • 200
  • 0.2cm
  • 10em
  • 2pt
  • 23%
  • 2.5mm
  • 20vmin
  • calc(100% - 100px)
  • calc(100px / 2.5)
  • attr(Имя атрибута length)
  • attr(Имя атрибута px)
  • max(100%, 100px)
  • min(100vmax, 100vh)
  number - Положительное или отрицательное число, дробное или целое, без единицы измерения.
  Число состоит из одной или нескольких десятичных цифр от 0 до 9 со знаком + или - в целой части, и нескольких десятичных цифр от 0 до 9 в дробной части.
  Целая часть отделяется от дробной знаком . (точка).
  Знак + может быть опущен.
  Примеры формата записи значения number:

  • 0.0
  • 000.10
  • 10.999
  • -10.567
  • -23.5
  • 0145.0145
  • -0.5
  • calc(100 - 12.5)
  • attr(Имя атрибута number)
  position - Позиция.
  Позиция в CSS это положение CSS объекта, к которому применяется значение position, в пространстве его нахождения.
  В большинстве случаев CSS объектом будет поле - "родительского" элемента.

Формат записи значения position:

  • Смещение1 Смещение2 - Координата относительно пространства нахождения CSS объекта.

Значения:

  • Смещение - Задается одним из ключевых слов устанавливающих относительность смещения, и, через пробел от этого ключевого слова, величиной смещения с единицей измерения.
      Если величина смещения не задана, то она считается равной 0.
      Ключевые слова:
    • bottom - Смещение задаётся относительно условной нижней границы пространства нахождения CSS объекта.
        Условной потому, что само пространство нахождения объекта может быть повернуто на Web-странице.
        bottom 100% = top.
    • center - Смещение задаётся относительно условной горизонтальной линии, делящей пространство нахождения CSS объекта пополам.
        Условной потому, что само пространство нахождения объекта может быть повернуто на Web-странице.
        center -50% = top, center 50% = bottom.
    • left - Смещение задаётся относительно условной левой границы пространства нахождения CSS объекта.
        Условной потому, что само пространство нахождения объекта может быть повернуто не Web-странице.
        left 100% = right.
    • right - Смещение задаётся относительно условной правой границы пространства нахождения CSS объекта
        Условной потому, что само пространство нахождения объекта может быть повернуто не Web-странице).
        right 100% = left.
    • top - Смещение задаётся относительно условной верхней границы пространства нахождения CSS объекта
        Условной потому, что само пространство нахождения объекта может быть повернуто не Web-странице).
        top 100% = bottom.
  Примеры формата записи значения position:

  • bottom left 10%
  • top 100px left 20%
  • center 10px right 100px
  ratio - Соотношение между двумя значениями.
  Задаётся двумя положительными целыми числами, разделёнными косой чертой.
  Примеры формата записи значения ratio:

  • 4/3
  • 16/9
  resolution - Разрешение - положительное число, дробное или целое, с единицей измерения или без единицы измерения.
  Означает, плотность пикселей устройства отображения.
  В зависимости от контекста применения разрешение может быть задано десятичной дробью (с точкой).
  Если разрешение задано без единицы измерения, то его единица измерения может быть вычислена браузером в зависимости от контекста его применения.
  Также контекст применения разрешения может накладывать ограничение на его единицу измерения.
  Единица измерения следует непосредственно за значением линейной величины без разделяющего пробела.
  Единицы измерения разрешения:

  • dpi - Количество точек на дюйм. (1dpi ≈ 0.39dpcm.)
  • dpcm - Количество точек на сантиметр. (1dpcm ≈ 2.54dpi.)
  • dppx - Количество точек на единицу пикселей. (1dppx ≈ 96dpi.)
  Примеры формата записи значения length:

  • 300dpi
  • 96dpi
  • 118dpcm
  shape - Форма плоской фигуры.

Формат записи значения shape:

  • rect(y1,x1,y2,x2) - Обращение к CSS функции rect, которая задаёт прямоугольник со заданными сторонами.
  string - Строка (последовательность ) символов Unicode.
  Последовательность символов выделяется двойными - " или одинарными - ' кавычками, которые не считаются частью последовательности.
  Поэтому, для включения двойных и(или) одинарных кавычек в последовательность, их надо предварять символом - \ - обратный слеш.
  Символы последовательности также могут быть заданы помощью кодовых точек Unicode или кодом любого символа в кодировке UniINS в виде:

        &"десятичный код символа";.

  Посмотреть коды символов можно, к примеру, здесь.
  Примеры формата записи значения string:

  • "0.0"
  • "string"
  • 'number'
  • "\"string\" it\'s not \'number\'"
  • attr(Имя атрибута)
  time - Величина времени - число, дробное или целое, с единицей измерения, или без единицы измерения.
  В зависимости от контекста применения величина времени может быть задана десятичной дробью (с точкой).
  Если величина времени задана без единицы измерения, то её единица измерения может быть вычислена браузером в зависимости от контекста её применения.
  Также контекст применения величины времени может накладывать ограничение на её единицу измерения.
  Единица измерения следует непосредственно за значением величины времени без разделяющего пробела.
  Единицы измерения величины времени:

  • ms - Миллисекунды. (= 0.001s)
  • s - Секунды. (= 1000ms).
  Примеры формата записи значения time:

  • 200
  • 0.2s
  • 10ms
  • -2s
  • calc(120s + 10ms)
  • attr(Имя атрибута time)
  • attr(Имя атрибута ms)
  url - URL-адрес (в том числе и data URL).
  В принципе это строковое значение, однако, оно пригодно для использования в качестве аргумента в функции url.
  Примеры формата записи значения url:

  • http://www.bomba.ru/content/volum1.html
  • https://name:1234567@//www.bomba.ru/content/volum1.html
  • #CANVASX
  • data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt
  • attr(Имя атрибута url)