Цвят - CSS-трикове

Anonim

В colorимота в CSS определя цвета на текст и той декорации.

p ( color: blue; )

Стойности

В colorимота може да приеме всяко CSS цвят стойност.

  • Наименовани цветове: например „аква“.
  • Шестнадесетични цветове: например # 00FFFF или # 0FF.
  • RGB и RGBa цветове: например rgb (0, 255, 255) и rgba (0, 255, 255, .5).
  • Цветове HSL и HSLa: например hsl (180, 100%, 50%) и hsla (180, 100%, 50%, .5).

Наречени цветове

p ( color: aqua; )

Имените цветове са известни още като цветове на ключови думи, цветове X11 или SVG цветове. Всички именувани цветове са непрозрачни по подразбиране, с изключение на това transparent, което е напълно прозрачно или „ясно“. Вижте нашия Именован цвят и шестнадесетичен еквивалент за списък на посочените цветове.

Hex цветове

Шестнадесетичните цветове или шестнадесетичните цветове са посочени с буквено-цифрови стойности. Първата двойка символи представлява червената стойност, втората двойка представлява зелената стойност, а третата двойка представлява синята стойност, всички в диапазон от 00 до FF.

p ( color: #00FFFF; )

Ако двойките червени, сини и зелени стойности са двойни, можете да съкратите шестнадесетичната стойност до 3-значен стенограф - например, # 00FFFF може да бъде съкратено до # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

RGB и RGBa цветове

RGB цветовете са посочени със списък, разделен със запетая, от три числови стойности (вариращи от 0 до 255) или процентни стойности (вариращи от 0% до 100%). Първата стойност представлява червената стойност, втората представлява зелената стойност, а третата представлява синята стойност. RGB цветовете по подразбиране са непрозрачни.

p ( color: rgb(0, 255, 255); )

RGBa добавя четвърта стойност за алфа канала, която задава непрозрачността на цвета. Алфа стойността е число в диапазон от 0,0 (напълно прозрачно) до 1 (напълно непрозрачно).

p ( color: rgba(0, 255, 255, .5); )

HSL и HSLa цветове

Цветовете HSL са посочени със списък с три стойности, разделен със запетая: степента на нюанс (число, вариращо от 0 до 360), процент на наситеност (в диапазона от 0% до 100%) и процент на лекота (в диапазон от 0% до 100%). HSL цветовете по подразбиране са непрозрачни.

p ( color: hsl(180, 100%, 50%); )

HSLa добавя четвърта стойност за алфа канала за контрол на непрозрачността на цвета. Алфа стойността е число в диапазон от 0,0 (напълно прозрачно) до 1 (напълно непрозрачно).

p ( color: hsla(180, 100%, 50%, .5); )

Демонстрация

Вижте стойностите на цвета на писалката от CSS-трикове (@ css-трикове) на CodePen.

Бележки за употреба

На colorкаскади собственост. Ако го зададете в тялото, всички потомствени елементи ще наследят този цвят, освен ако те нямат свой собствен цвят, зададен в таблицата със стилове на потребителския агент.

Границите се наследяват, colorосвен ако в borderдекларацията не е посочена стойност на цвят .

В colorимота се отнася и за text-decorationлинии. В браузърите, които поддържат text-decoration-colorсвойството, можете да посочите различни цветове за текста и неговите линии за декорация.

colorсе отнася и за маркери на елементи от списъка (като точки и цифри). Не можете да зададете отделен цвят за маркер на елемент от списъка, но можете да го замените с изображение със list-styleсвойството.

Въпреки че имената на цветовете и шестнадесетичните цветове нямат алфа канали, можете да зададете тяхната непрозрачност със opacityсвойството във всички текущи браузъри и IE9 +.

Свързани

  • font
  • text-decoration-color
  • opacity

Повече информация

  • color в спецификацията на W3C
  • color на MDN
  • CSS-трикове статия Yay за HSLa

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Всякакви Всякакви Всякакви Всякакви Всяка * Всякакви Всякакви

* HSL, HSLa и RGBa се поддържат в IE9 +.