Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Свойства CSS
align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS цвета

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

Когда мы задаем цвет для рамки элемента, фона или текста, то мы задаем цвет именно для пикселей из которых они состоят. Существует два общих подхода для указания цвета в CSS: по имени или по значению. Самое простое это указание по имени: красный - это red, синий - это blue и так далее, но CSS предоставляет не так много имен цветов из которых можно выбрать. С другой стороны указание значения цвета предполагает гораздо больший выбор оттенков. Есть несколько способов для указания значения цвета, два наиболее распространенных из них это RGB и шестнадцатеричные значения. Они были частью CSS с самой первой версии и каждый веб-браузер их поддерживает. В CSS3 появилось еще несколько вариантов для определения цвета: RGBA, HSL и HSLA, они менее кроссбраузерны, но самые последние версии браузеров их уже поддерживают.

Имена цветов

Самый простой и наиболее очевидный способ указать цвет в CSS - это выбрать из набора ключевых слов имя предопределенного цвета. Всего доступно 147 ключевых слов с именами цветов: 17 имен - стандартные цвета, которые были введены еще в ранних версиях HTML (white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive и teal), и 130 дополнительных, которые были добавлены в CSS2. Весь список доступных названий цветов вы можете посмотреть в разделе HTML в нашей таблице цветов.

RGB и RGBA

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255. Рассмотрим RGB-код для темно-фиолетового цвета: rgb(204, 51, 255), его можно например применить к CSS свойству, отвечающему за цвет шрифта:

color: rgb(205, 51, 255);

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

color: rgba(204, 51, 255, 0.5);

Вы можете увидеть, что значения красного, зеленого и синего цветов аналогичны системе RGB. Четвертое число - 0.5 является степенью прозрачности. Буква "A" в RGBA означает альфа-канал, который является термином из графического дизайна означающим прозрачность.

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

HSL и HSLA

Система HSL (hue, saturation, lightness) описывает цвета основанные на оттенке (hue), насыщенности (saturation) и осветлении (lightness). Вот тот же самый темно-фиолетовый цвет, указанный в формате HSL:

color: hsl(285, 100%, 60%);

Первое число - оттенок, выраженный в градусах от 0 до 360, определяющих позицию цвета на цветовом круге. Второе число - насыщенность, определяемая в процентах от 0% до 100%, указывает насколько насыщенным (ярким) будет цвет. Третье число - осветление, оно определяется в процентах также как и насыщенность, осветление указывает насколько светлым или темным будет цвет.

CSS цвета HSL

Система HSLA, как и RGBA, добавляет четвертое число в диапазоне от 0 до 1, определяющее насколько прозрачным должен быть цвет. Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью HSLA системы:

color: hsla(285, 100%, 60%, 0.5);

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

Шестнадцатеричный код цвета представляет собой шесть символов, стоящих после символа #:

CSS шестнадцатеричные значения цветов

Каждый набор двух символов представляет номер от 0 до 255. Так первые два символа представляют красный (red) цвет, следующие два - зеленый (green) и последние два - синий (blue). В этом шестнадцатеричный код очень похож на RGB с тем отличием, что тут каждый цвет задан в шестнадцатеричной системе счисления вместо десятичной.

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

color: #f00;           
color: #ff0000;        

Примечание: браузеры, которые не поддерживают подобные цветовые значения (rgba, hsl и hsla), не связывают с фоном или шрифтом никакой цвет, полностью игнорируя объявление. В этом случае для фона элемента используется значение по умолчанию (он становится полностью прозрачным), а для текста используется либо значение по умолчанию (черный цвет), либо цвет унаследованный от родительского элемента.

Для старых версий браузеров следует добавить дополнительное правило, определяющее цвет в формате RGB, шестнадцатеричном значении или с помощью имени. Такое правило должно находиться перед правилом, указывающим цвет в формате RGBA, HSL или HSLA. Это обеспечит страховку для цвета, поскольку в CSS при наличии двух правил, устанавливающих значение для одного и того же свойства, приоритет всегда получает правило, установленное ниже в коде. Это означает, что если браузер поддерживает форматы RGBA, HSL или HSLA, то он будет использовать второе правило, а если не поддерживает - первое.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen