Kolor - CSS-Tricks

Anonim

colorNieruchomość w CSS ustawia kolor tekstu i tekstowych dekoracji.

p ( color: blue; )

Wartości

colorNieruchomość może przyjąć dowolną wartość koloru CSS.

  • Nazwane kolory: na przykład „aqua”.
  • Kolory szesnastkowe: na przykład # 00FFFF lub # 0FF.
  • Kolory RGB i RGBa: na przykład rgb (0, 255, 255) i rgba (0, 255, 255, .5).
  • Kolory HSL i HSLa: na przykład hsl (180, 100%, 50%) i hsla (180, 100%, 50%, .5).

Nazwane kolory

p ( color: aqua; )

Nazwane kolory są również znane jako kolory słów kluczowych, kolory X11 lub kolory SVG. Wszystkie nazwane kolory są domyślnie nieprzezroczyste, z wyjątkiem transparentcałkowicie przezroczystego lub „przezroczystego”. Zobacz nasz fragment nazwanych kolorów i odpowiedników szesnastkowych, aby zapoznać się z listą nazwanych kolorów.

Kolory Hex

Kolory szesnastkowe lub szesnastkowe są określane za pomocą wartości alfanumerycznych. Pierwsza para znaków reprezentuje wartość czerwoną, druga para reprezentuje wartość zieloną, a trzecia para reprezentuje wartość niebieską, wszystkie w zakresie od 00 do FF.

p ( color: #00FFFF; )

Jeśli pary wartości czerwonego, niebieskiego i zielonego są podwojone, można skrócić wartość szesnastkową do 3-znakowego skrótu - na przykład # 00FFFF można skrócić do # 0FF.

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

Kolory RGB i RGBa

Kolory RGB są określane za pomocą listy oddzielonych przecinkami trzech wartości liczbowych (od 0 do 255) lub wartości procentowych (od 0% do 100%). Pierwsza wartość reprezentuje wartość czerwoną, druga reprezentuje wartość zieloną, a trzecia reprezentuje wartość niebieską. Kolory RGB są domyślnie nieprzezroczyste.

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

RGBa dodaje czwartą wartość do kanału alfa, która określa krycie koloru. Wartość alfa to liczba z zakresu od 0,0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).

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

Kolory HSL i HSLa

Kolorów HSL podano listę przecinkami oddzielone trzech wartości: stopień Hue (ilości w zakresie od 0 do 360) do nasycenia procentach (w zakresie od 0% do 100%) i lekkość procentach (w zakresie od 0% do 100%). Kolory HSL są domyślnie nieprzezroczyste.

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

HSLa dodaje czwartą wartość do kanału alfa, aby kontrolować krycie koloru. Wartość alfa to liczba z zakresu od 0,0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).

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

Próbny

Zobacz wartości koloru pióra według CSS-Tricks (@ css-tricks) w CodePen.

Uwagi dotyczące użytkowania

Do colorkaskady nieruchomości. Jeśli ustawisz go w treści, wszystkie elementy podrzędne odziedziczą ten kolor, chyba że mają własny ustawiony kolor w arkuszu stylów klienta użytkownika.

Obramowania dziedziczą, colorchyba że w borderdeklaracji określono wartość koloru .

colorWłaściwość dotyczy text-decorationlinii. W przeglądarkach obsługujących tę text-decoration-colorwłaściwość można określić różne kolory tekstu i jego linii dekoracyjnych.

colordotyczy również znaczników elementów listy (takich jak wypunktowanie i cyfry). Nie możesz ustawić osobnego koloru dla znacznika elementu listy, ale możesz zastąpić go obrazem z list-stylewłaściwością.

Chociaż nazwane kolory i kolory szesnastkowe nie mają kanałów alfa, możesz ustawić ich krycie za pomocą opacitywłaściwości we wszystkich obecnych przeglądarkach i IE9 +.

Związane z

  • font
  • text-decoration-color
  • opacity

Więcej informacji

  • color w specyfikacji W3C
  • color w MDN
  • Artykuł CSS-Tricks Yay dla HSLa

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
Każdy Każdy Każdy Każdy Dowolny * Każdy Każdy

* HSL, HSLa i RGBa są obsługiwane w IE9 +.