Боја - ЦСС-трикови

Anonim

colorИмовина у ЦСС поставља боју текста и текста украсима.

p ( color: blue; )

Вредности

colorИмовина може прихватити било коју вредност ЦСС боје.

  • Именоване боје: на пример, „аква“.
  • Хек боје: на пример, # 00ФФФФ или # 0ФФ.
  • РГБ и РГБа боје: на пример, ргб (0, 255, 255) и ргба (0, 255, 255, .5).
  • ХСЛ и ХСЛа боје: на пример, хсл (180, 100%, 50%) и хсла (180, 100%, 50%, .5).

Именоване боје

p ( color: aqua; )

Именоване боје су такође познате као боје кључних речи, Кс11 боје или СВГ боје. Све именоване боје су подразумевано непрозирне, осим transparentшто је потпуно транспарентно или „бистро“. Списак именованих боја потражите у нашем фрагменту Именоване боје и Хек еквиваленти.

Хек Цолорс

Хексадецималне боје или хексидицималне боје наведене су с алфанумеричким вредностима. Први пар знакова представља црвену вредност, други пар представља зелену вредност, а трећи пар представља плаву вредност, све у опсегу од 00 до ФФ.

p ( color: #00FFFF; )

Ако су парови црвене, плаве и зелене вредности двоструки, можете хексадецималну вредност скраћивати у скраћеницу од 3 знака - на пример, # 00ФФФФ може се скратити у # 0ФФ.

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

РГБ и РГБа боје

РГБ боје се наводе помоћу листе одвојених зарезом од три нумеричке вредности (у распону од 0 до 255) или процентуалних вредности (у распону од 0% до 100%). Прва вредност представља црвену вредност, друга представља зелену вредност, а трећа представља плаву вредност. РГБ боје су подразумевано непрозирне.

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

РГБа додаје четврту вредност за алфа канал, која подешава непрозирност боје. Алфа вредност је број у опсегу од 0,0 (потпуно провидан) до 1 (потпуно непрозиран).

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

ХСЛ и ХСЛа боје

ХСЛ боје су назначене списком одвојених зарезом од три вредности: степен нијансе (број у распону од 0 до 360), проценат засићења (у распону од 0% до 100%) и проценат светлости (у распону од 0% до 100%). ХСЛ боје су подразумевано непрозирне.

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

ХСЛа додаје четврту вредност за алфа канал за контролу непрозирности боје. Алфа вредност је број у опсегу од 0,0 (потпуно провидан) до 1 (потпуно непрозиран).

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

Демо

Погледајте вредности боје оловке од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.

Напомене о употреби

Тхе colorпроперти каскаде. Ако га поставите на тело, сви потомци ће наследити ту боју, осим ако у табели стилова корисничког агента немају своју боју.

Границе се наслеђују colorуколико вредност боје није наведена у borderдекларацији.

colorИмовина се односи на text-decorationлинијама. У прегледачима који подржавају text-decoration-colorсвојство можете одредити различите боје за текст и његове линије украса.

colorтакође се односи на маркере ставки на листи (попут тачака и бројева). Не можете поставити засебну боју за означивач ставке на листи, али је можете заменити сликом са list-styleсвојством.

Иако именоване боје и хексадецималне боје немају алфа канале, њихову непрозирност можете подесити opacityсвојством у свим тренутним прегледачима и ИЕ9 ​​+.

Повезан

  • font
  • text-decoration-color
  • opacity

Више информација

  • color у спецификацији В3Ц
  • color на МДН
  • ЦСС-Трицкс чланак Иаи за ХСЛа

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који Било који Било који Било који Било који * Било који Било који

* ХСЛ, ХСЛа и РГБа подржани су у ИЕ9 +.