- Niniejsza wersja:
- http://www.w3.org/TR/2011/REC-css3-color-20110607
- Najnowsza wersja:
- http://www.w3.org/TR/css3-color
- Poprzednia wersja:
- http://www.w3.org/TR/2010/PR-css3-color-20101028
- Redaktorzy:
- Tantek Çelik (ekspert zaproszony i wcześniej w Microsoft Corporation) <tantek@cs.stanford.edu>
- Chris Lilley (W3C) <chris@w3.org>
- L. David Baron (Mozilla Corporation) <dbaron@dbaron.org>
- Pozostali autorzy:
- Steven Pemberton (CWI) <steven.pemberton@cwi.nl>
- Brad Pettit (Microsoft Corporation) <bradp@microsoft.com>
Rekomendacja W3C z dnia 07 czerwca 2011 r.
Zapoznaj się z erratą do tego dokumentu, ponieważ może ona zawierać normatywne poprawki.
Zobacz również tłumaczenia.
Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. Mają zastosowanie następujące zasady W3C: odpowiedzialność, znak towarowy, używanie dokumentu.
Streszczenie
CSS (Cascading Style Sheets — kaskadowe arkusze stylów) to język służący do opisu sposobu prezentacji dokumentów HTML i XML na ekranie, papierze, w mowie itd. Zawiera własności i wartości dotyczące kolorów umożliwiające definiowanie kolorów tekstu, tła, obramowań i innych części elementów dokumentów. Niniejsza specyfikacja zawiera opis wartości i własności kolorów pierwszego planu i przezroczystości grup. Wśród nich znajdują się własności i wartości przejęte z CSS 2 oraz nowe własności i wartości.
Status dokumentu
Niniejszy okument jest tłumaczeniem oficjalnej specyfikacji i może zawierać błędy wynikające z tłumaczenia
W niniejszej sekcji opisano status tego dokumentu w chwili jego publikacji. Może on zostać zastąpiony kolejnymi dokumentami. Aktualna lista publikacji W3C oraz najnowsza wersja tego raportu technicznego znajdują się na stronie W3C technical reports index pod adresem http://www.w3.org/TR/.
Preferowanym miejscem do toczenia dyskusji na temat tej specyfikacji jest publiczna lista dyskusyjna (archiwum) www-style@w3.org (zobacz instrukcje). W temacie wiadomości e-mail wysyłanej do tej listy dyskusyjnej należy umieścić tekst „css3-color”, najlepiej w następujący sposób: “[css3-color] …streszczenie komentarza…”
Dokument ten jest wynikiem pracy grupy roboczej ds. CSS (część działalności ds. stylów).
W osobnym raporcie implementacyjnym zamieszczono zestaw testów oraz wykazano, że każdy z testów w tym zestawie przeszły przynajmniej dwie niezależne implementacje.
Objaśnienie zmian dokonanych od najnowszego szkicu Ostatniego wezwania zawiera lista uwag dotyczących najnowszego szkicu Ostatniego wezwania. Komentarze zgłoszone w okresie, gdy dokument ten miał status Rekomendacji kandydującej (dot. wersji roboczej z dnia 14 maja 2003) oraz informacje o tym, jak zgłoszone kwestie rozwiązano w tej wersji roboczej można znaleźć w archiwum komentarzy. Komentarze zgłoszone w okresie ostatniej możliwości zgłaszania uwag (Last Call), (dot. wersji roboczej z dnia 14 lutego 2003) oraz informacje o tym, jak zgłoszone kwestie rozwiązano w tej wersji roboczej można znaleźć w archiwum komentarzy.
Dostępna jest też pełna lista zmian dokonanych w tym dokumencie.
Niniejszy dokument został zrecenzowany przez Członków W3C, programistów oraz inne grupy W3C i zainteresowane strony i został zatwierdzony jako Rekomendacja W3C przez Dyrektora W3C. Jest to dokument stabilny i można go używać jako materiału źródłowego oraz cytować w innych dokumentach. Rolą W3C w tworzeniu tej Rekomendacji jest zwracanie uwagi na niniejszą specyfikację odpowiednich organizacji oraz promowanie użycia jej w jak najszerszym zakresie. Dzięki temu zwiększa się funkcjonalność i interoperacyjność sieci internetowej.
Prace nad tym dokumentem zostały przeprowadzone zgodnie z zasadami patentowymi W3C z dnia 5 lutego 2004 r. W3C utrzymuje publiczną listę wszystkich informacji patentowych ujawnionych w związku z rezultatami prac grupy. Na stronie tej znajdują się także informacje na temat ujawniania patentów.Osoba posiadająca wiedzę na temat patentu, który jej zdaniem zawiera uzasadnione roszczenia powinna ujawnić te informacje zgodnie z ustępem 6 zasad patentowych W3C.
Spis treści
- 1. Wprowadzenie
- 2.Zależności
- 3. Własności koloru
- 4. Jednostki kolorów
- 5. Proste mieszanie alfa
- 6. Przykładowy arkusz stylów dla dokumentów (X)HTML
- 7. Profile
- 8. Zestaw testów
- 9. Wezwanie do implementowania porzuconych własności
- 10.Podziękowania
- 11. Zmiany
- 12. Źródła
- Indeks
- Indeks własności
1. Wprowadzenie
Od CSS 3 specyfikacja kaskadowych arkuszy stylów jest podzielona na moduły. Prace nad każdym modułem mogą być wykonywane stopniowo, w tempie zgodnym z implementowaniem opisywanych przez ten moduł własności. Niniejsza specyfikacja jest jednym z takich modułów.
Moduł ten zawiera opis własności CSS, za pomocą których można definiować kolory pierwszego planu i stopień przezroczystości elementów. Ponadto dokument ten zawiera szczegółowy opis typu wartości <color> języka CSS.
W specyfikacji tej opisane są własności i wartości dotyczące kolorów ze specyfikacji CSS 1 i CSS 2 oraz nowe własności i wartości.
Grupa robocza nie oczekuje, że wszystkie implementacje CSS 3 będą obsługiwać wszystkie własności lub wartości. Zamiast tego powstanie zapewne niewielka liczba wersji CSS 3 zwanych „profilami”. Na przykład istnieje możliwość, że implementację wszystkich proponowanych własności i wartości będzie zawierać tylko profil dla aplikacji klienckich dysponujących 32-bitową paletą kolorów.
Niniejsza specyfikacja jest wynikiem połączenia wybranych części następujących Rekomendacji i Wersji roboczych oraz dodania pewnych nowych elementów.
- HTML 4.01 [HTML401]
- CSS 2.0 [CSS2]
- SVG 1.0 [SVG10]
- Interfejs użytkownika dla CSS 3 (16 lutego 2000) [CSS3UI]
2. Zależności
W części Definicje specyfikacji [CSS21] znajdują się dodatkowe definicje terminów. Przykłady kodu źródłowego dokumentów i fragmenty kodu zostały napisane w języku XML [XML10] lub HTML [HTML401].
3. Własności koloru
3.1. Kolor pierwszego planu: własność color
Nazwa: | color |
Wartość: | <color> | inherit |
Wartość początkowa: | zależna od aplikacji klienckiej |
Zastosowanie: | wszystkie elementy |
Dziedziczenie: | tak |
Wartości procentowe: | nie dotyczy |
Media: | wizualne |
Wartość obliczana: |
|
Własność ta służy do określania koloru pierwszego planu treści tekstowej elementu. Ponadto za jej pomocą można określić potencjalną wartość niebezpośrednią (currentColor) dla każdej innej własności, która przyjmuje wartości kolorów. Jeśli słowo kluczowe currentColor
zostanie użyte jako wartość samej własności color
, ustawienie takie jest traktowane jako color: inherit
.
Kolor zielony można określić na różne sposoby:
em { color: lime } /* nazwa koloru */ em { color: rgb(0,255,0) } /* Zakres RGB 0-255 */
3.2. Przezroczystość: własność opacity
Określanie przezroczystości można traktować jako rodzaj operacji końcowej. Ogólnie rzecz biorąc najpierw element (włącznie z potomkami) jest renderowany na obrazie pozaekranowym w trybie RGBA, po czym następuje jego zmieszanie z aktualnym obrazem przy użyciu ustawień przezroczystości. Szczegółowe informacje na ten temat znajdują się w części proste mieszanie alfa.
Nazwa: | opacity |
Wartość: | <alphavalue> | inherit |
Wartość początkowa: | 1 |
Zastosowanie: | wszystkie elementy |
Dziedziczenie: | nie |
Wartości procentowe: | nie dotyczy |
Media: | wizualne |
Wartość obliczana: | Taka sama, jak wartość określona po obcięciu <alphavalue> do przedziału [0.0,1.0]. |
- <alphavalue>
- Pod względem składniowym jest to <number>. Jednolity poziom przezroczystości, jaki ma zostać zastosowany do całego obiektu. Wszystkie wartości spoza przedziału od
0.0
(pełna przezroczystość) do1.0
(całkowity brak przezroczystości) zostaną sprowadzone do tych wartości brzegowych. Jeśli obiekt jest elementem kontenerowym, to efekt jest taki, jakby treść tego kontenera została zmieszana z bieżącym tłem przy użyciu maski, której wartość każdego piksela jest typu <alphavalue>.
Ponieważ element o przezroczystości ustawionej na wartość mniejszą od 1
jest złożony z jednego obrazu pozaekranowego, treść znajdująca się poza nim nie może być ułożona na osi z między fragmentami treści znajdującej się wewnątrz niego. Z tego samego powodu implementacje muszą tworzyć nowy kontekst stosowy dla każdego elementu o przezroczystości ustawionej na wartość niższą od 1. Jeśli element o przezroczystości poniżej 1
nie jest pozycjonowany, implementacje muszą narysować tworzoną przez niego warstwę, w obrębie kontekstu stosowego jego rodzica, w tym samym kontekście stosowym, który byłby użyty gdyby element ten był pozycjonowany i miał zdefiniowane ustawienia z-index: 0
i opacity: 1
. Jeśli element z przezroczystością poniżej 1
jest pozycjonowany, to własność z-index
ma zastosowanie zgodne ze specyfikacją [CSS21], z tym wyjątkiem, że wartość auto
jest traktowana jak 0
, ponieważ zawsze tworzony jest nowy kontekst stosowy. Więcej informacji o kontekstach stosowych znajduje się w podrozdziale 9.9 i dodatku E specyfikacji [CSS21]. Zasady opisane w tym akapicie nie dotyczą elementów SVG, ponieważ SVG ma swój własny model renderowania ([SVG11], rozdział 3).
4. Jednostki kolorów
Wartość typu <color> może być słowem kluczowym lub wartością liczbową.
4.1. Podstawowe nazwy kolorów
Lista podstawowych nazw kolorów: aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, purple
, red
, silver
, teal
, white
oraz yellow
. W nazwach kolorów nie jest rozróżniana wielkość liter.
Nazwa | Numer | Nazwa koloru | Szesn. RGB | Dziesiętny |
---|---|---|---|---|
black | #000000 | 0,0,0 | ||
silver | #C0C0C0 | 192,192,192 | ||
gray | #808080 | 128,128,128 | ||
white | #FFFFFF | 255,255,255 | ||
maroon | #800000 | 128,0,0 | ||
red | #FF0000 | 255,0,0 | ||
purple | #800080 | 128,0,128 | ||
fuchsia | #FF00FF | 255,0,255 | ||
green | #008000 | 0,128,0 | ||
lime | #00FF00 | 0,255,0 | ||
olive | #808000 | 128,128,0 | ||
yellow | #FFFF00 | 255,255,0 | ||
navy | #000080 | 0,0,128 | ||
blue | #0000FF | 0,0,255 | ||
teal | #008080 | 0,128,128 | ||
aqua | #00FFFF | 0,255,255 |
Przykład
body {color: black; background: white } h1 { color: maroon } h2 { color: olive }
4.2. Liczbowe wartości kolorów
4.2.1. Wartości kolorów w formacie RGB
Model kolorów RGB jest stosowany do określania kolorów za pomocą wartości liczbowych. Wszystkie poniższe reguły określają ten sam kolor:
Przykład
em { color: #f00 } /* #rgb */ em { color: #ff0000 } /* #rrggbb */ em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) }
W notacji szesnastkowej wartość RGB jest poprzedzona znakiem #
. Po nim może znajdować się ciąg trzech lub sześciu cyfr szesnastkowych. Trzycyfrowa notacja RGB (#rgb) jest przekształcana na formę sześciocyfrową (#rrggbb) poprzez skopiowanie poszczególnych cyfr (nie dodanie zer). Na przykład wartość #fb0
zostanie rozwinięta do postaci #ffbb00
. Dzięki temu kolor biały (#ffffff
) można oznaczyć skrótem (#fff
). Dodatkowo w ten sposób można uwolnić się od zależności od głębi kolorów wyświetlacza.
Format wartości RGB w notacji funkcyjnej jest następujący: rgb(
+ trzy wartości liczbowe (całkowitoliczbowe lub procentowe) oddzielone przecinkami + )
. Wartość całkowitoliczbowa 255
odpowiada wartości 100%
i wartościom F
lub FF
w notacji szesnastkowej: rgb(255,255,255)
= rgb(100%,100%,100%)
= #FFF
. W bezpośrednim sąsiedztwie wartości liczbowych mogą znajdować się białe znaki.
Wszystkie kolory RGB są określane w przestrzeni kolorów sRGB (zobacz [SRGB]). Różne aplikacje klienckie mogą odtwarzać kolory z różną wiernością. Model sRGB pozwala użyć jednoznacznej i dającej się obiektywnie zmierzyć definicji koloru, którą można odnieść do norm międzynarodowych (zobacz [COLORIMETRY]).
Wartości spoza gamy obsługiwanej przez urządzenie powinny być obcinane lub odwzorowane w tym zakresie, gdy jest on znany: kolory czerwony, zielony i niebieski muszą zostać tak zmienione, aby mieściły się w zakresie obsługiwanym przez urządzenie. Aplikacje klienckie mogą wykonywać odwzorowania kolorów wyższej jakości z jednego zakresu na inny. Niniejsza specyfikacja nie definiuje, jak dokładnie ma być wykonywane to obcinanie. Dla typowego monitora CRT, którego zakres kolorów pokrywa się z przestrzenią sRGB, poniższe cztery reguły są równoważne:
Przykład
em { color: rgb(255,0,0) } /* Zakres całkowitoliczbowy 0 - 255 */ em { color: rgb(300,0,0) } /* Obcięcie do rgb(255,0,0) */ em { color: rgb(255,-10,0) } /* Obcięcie do rgb(255,0,0) */ em { color: rgb(110%, 0%, 0%) } /* Obcięcie do rgb(100%,0%,0%) */
Inne urządzenia, takie jak drukarki, mają inne zakresy niż przestrzeń sRGB. Niektóre kolory spoza zakresu sRGB 0..255 mogą dać się przedstawić (w zakresie danego urządzenia), podczas gdy niektóre kolory z tego zakresu mogą znajdować się poza zakresem urządzenia i mogą wymagać odwzorowania.
4.2.1. Wartości kolorów w formacie RGBA
Model kolorów RGB został w niniejszej specyfikacji rozszerzony o kanał „alfa”, który umożliwia określanie poziomu przezroczystości kolorów. Szczegółowe informacje na ten temat znajdują się w części proste mieszanie alfa. Wszystkie poniższe reguły określają ten sam kolor:
Przykład
em { color: rgb(255,0,0) } /* Zakres całkowitoliczbowy 0 - 255 */ em { color: rgba(255,0,0,1) /* to samo, tylko przezroczystość bezpośrednio ustawiona na 1 */ em { color: rgb(100%,0%,0%) } /* zakres zmiennoprzecinkowy 0.0% - 100.0% */ em { color: rgba(100%,0%,0%,1) } /* to samo, tylko przezroczystość bezpośrednio ustawiona na 1 */
W odróżnieniu od RGB, dla wartości RGBA nie ma notacji szesnastkowej.
Format wartości RGBA w notacji funkcyjnej jest następujący: rgba(
+ trzy wartości liczbowe (całkowitoliczbowe lub procentowe) oddzielone przecinkami + <alphavalue> + )
. Wartość 255
jest równoważna z 100%
, rgba(255,255,255,0.8)
= rgba(100%,100%,100%,0.8)
. W bezpośrednim sąsiedztwie wartości liczbowych mogą znajdować się białe znaki.
Implementacje muszą obcinać składniki czerwony, zielony i niebieski wartości kolorów RGBA do gamy obsługiwanej przez urządzenie zgodnie z zasadami dla wartości kolorów RGB złożonych z tych składników.
Poniższe przykłady ilustrują efekt, jaki można uzyskać przy użyciu notacji rgba()
:
Przykład:
p { color: rgba(0,0,255,0.5) } /* półprzezroczysty jednolity niebieski */ p { color: rgba(100%, 50%, 0%, 0.1) } /* mocno przezroczysty jednolity pomarańczowy */
4.2.3. Słowo kluczowe transparent
W CSS 1 wprowadzono wartość transparent
dla własności background-color
. W CSS 2 umożliwiono przypisywanie tej wartości także własności border-color
. W Open eBook(tm) Publication Structure 1.0.1 [OEB101] rozszerzono zestaw wartości własności color
o słowo kluczowe transparent
. W CSS 3 rozszerzono definicję wartości koloru o słowo kluczowe transparent
, dzięki czemu słowa tego można używać jako wartości wszystkich własności przyjmujących wartości typu <color>. W ten sposób w CSS 3 uproszczono definicję tych własności.
- transparent
- Pełna przezroczystość. Słowo te można traktować jako uproszczony zapis przezroczystej czerni, rgba(0,0,0,0), która jest jego wartością obliczaną.
4.2.4. Wartości kolorów w formacie HSL
W CSS 3 jako uzupełnienie do numerycznych oznaczeń kolorów RGB dodano liczbowe oznaczenia kolorów HSL (ang. hue-saturation-lightness — barwa, nasycenie, jasność) . Zauważono, że format RGB ma następujące wady:
- Model RGB jest zorientowany na sprzęt: odzwierciedla użycie kineskopów.
- Model RGB jest nieintuicyjny. Ludzie mogą nauczyć się posługiwać się modelem RGB, ale raczej tylko poprzez nauczenie się odwzorowywania barwy, nasycenia i jasności na ten model.
Istnieje jeszcze kilka innych modeli kolorów. Do zalet modelu HSL zalicza się to, że jest on symetryczny pod względem jasności i ciemności (czego nie można powiedzieć np. o HSV) i łatwo można go przekształcić na RGB.
Kolory HSL definiuje się za pomocą trzech wartości (barwa, nasycenie i jasność). Barwę określa się jako kąt koła kolorów (tzn. tęczy reprezentowanej w postaci koła). Kąt ten jest mierzony w stopniach i nie ma potrzeby podawania jednostki. Jeśli chodzi o składnię, podaje się tylko wartość liczbową (<number>). Standardowo red=0=360 (czerwony), a pozostałe kolory są rozmieszczone w różnych innych miejscach na kole. Zatem green=120 (zielony), blue=240 (niebieski) itd. Wartości kąta są „przechodzące”, tzn. np. -120=240, a 480=120. Jednym ze sposobów, w jaki implementacja może znormalizować dany kąt x do przedziału <0,360) (tzn. od zera włącznie do 360 stopni) jest wykonanie działania (((x mod 360) + 360) mod 360). Nasycenie i jasność podawane są procentowo. 100%
oznacza pełne nasycenie, a 0%
— odcień szarości. Jasność 0%
oznacza czerń, a jasność 100%
— biel. Jasność 50%
jest „ustawieniem normalnym”.
Przykład:
* { color: hsl(0, 100%, 50%) } /* czerwony */ * { color: hsl(120, 100%, 50%) } /* żółty */ * { color: hsl(120, 100%, 25%) } /* ciemnozielony */ * { color: hsl(120, 100%, 75%) } /* jasnozielony */ * { color: hsl(120, 75%, 75%) } /* pastelowy zielony itd. */
Zaletą modelu HSL w stosunku do RGB jest jego intuicyjność: kolory można zgadywać, a następnie je dostosowywać do potrzeb. Łatwiej też tworzy się zestawy pasujących do siebie kolorów (wystarczy pozostawić barwę bez zmian, a zmienić poziom jasności i nasycenia).
Jeśli nasycenie zostanie ustawione na wartość niższą od 0%, implementacje muszą sprowadzić ją do 0%. Jeśli wartość znajduje się poza gamą obsługiwaną przez urządzenie, implementacje muszą ją sprowadzić do obsługiwanej wartości. W razie możliwości powinna zostać zachowana barwa, a jeśli to niemożliwe, nie ma konkretnych wytycznych, jak należy postąpić. (Innymi słowy sprowadzenie to różni się od zastosowania zasad przycinania kolorów RGB po zastosowaniu opisanego poniżej algorytmu konwertowania kolorów HSL na RGB).
Algorytm zamieniania kolorów HSL na RGB jest prosty (tutaj zapisany w języku ABC [ABC], który został użyty do wygenerowania tabel). W tych algorytmach wszystkie trzy wartości (H, S i L) zostały znormalizowane do ułamków z przedziału 0..1:
HOW TO RETURN hsl.to.rgb(h, s, l): SELECT: l<=0.5: PUT l*(s+1) IN m2 ELSE: PUT l+s-l*s IN m2 PUT l*2-m2 IN m1 PUT hue.to.rgb(m1, m2, h+1/3) IN r PUT hue.to.rgb(m1, m2, h ) IN g PUT hue.to.rgb(m1, m2, h-1/3) IN b RETURN (r, g, b) HOW TO RETURN hue.to.rgb(m1, m2, h): IF h<0: PUT h+1 IN h IF h>1: PUT h-1 IN h IF h*6<1: RETURN m1+(m2-m1)*h*6 IF h*2<1: RETURN m2 IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6 RETURN m1
4.2.4.1. Przykłady wartości w formacie HSL
Każda z poniższych tabel reprezentuje jedną barwę. Z koła kolorów wybrano dwanaście kolorów o regularnym odstępie co 30°: czerwony, żółty, zielony, niebieskozielony, niebieski, fuksja i wszystkie kolory pośrednie (ostatni kolor wypada między fuksją i czerwonym).
Oś X każdej tabeli reprezentuje nasycenie (100%, 75%, 50%, 25%, 0%).
Oś Y reprezentuje poziom jasności. 50% oznacza „normalną” jasność.
0° Czerwony | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
30° Czerwony-Żółty (=Pomarańcz) | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
60° Żółty | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
90° Żółty-zielony | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
120° Zielony | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
150° Zielony-niebieskozielony | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
180° Niebieskozielony | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
210° Niebieskozielony-niebieski | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
240° Niebieski | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
270° Niebieski-fuksja | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
300° Fuksja | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
330° Fuksja-czerwony | |||||
---|---|---|---|---|---|
Nasycenie | |||||
100% | 75% | 50% | 25% | 0% | |
100 | |||||
88 | |||||
75 | |||||
63 | |||||
50 | |||||
38 | |||||
25 | |||||
13 | |||||
0 |
4.2.4. Wartości kolorów w formacie HSL
Podobnie jak notacja funkcyjna rgb()
ma odpowiednik z kanałem alfa w postaci rgba()
, notacja hsl()
ma odpowiednik w postaci hsla()
. Szczegółowe informacje na ten temat znajdują się w części proste mieszanie alfa. Wszystkie poniższe reguły określają ten sam kolor:
Przykłady:
em { color: hsl(120, 100%, 50%) } /* zielony */ em { color: hsla(120, 100%, 50%, 1) } /* to samo, tylko z bezpośrednim ustawieniem przezroczystości na 1 */
Format wartości koloru HSLA w notacji funkcyjnej jest następujący: hsla(
+ barwa w stopniach + nasycenie i jasność procentowo + <alphavalue> + )
. W bezpośrednim sąsiedztwie wartości liczbowych mogą znajdować się białe znaki.
Implementacje muszą obcinać składniki barwy, nasycenia i jasności kolorów HSLA do gamy obsługiwanej przez urządzenie zgodnie z zasadami dla wartości kolorów HSLA złożonych z tych składników.
Poniższe przykłady ilustrują efekt, jaki można uzyskać przy użyciu notacji hsla()
:
Przykłady:
p { color: hsla(240, 100%, 50%, 0.5) } /* półprzezroczysty jednolity niebieski */ p { color: hsla(30, 100%, 50%, 0.1) } /* jednolity pomarańczowy, wysoki stopień przezroczystości */
4.3. Dodatkowe nazwy kolorów
Poniższa tabela zawiera wykaz kolorów X11 [X11COLORS], które są obsługiwane przez najczęściej używane przeglądarki. Uwzględniono także warianty ze słowami gray i grey z SVG 1.0. Poniższa lista pokrywa się z listą nazw kolorów SVG 1.0. Niniejsza specyfikacja rozszerza ich definicje poza SVG. Znajdujące się po lewej stronie dwie próbki kolorów ilustrują efekt ustawienia koloru tła komórki tabeli na dwa sposoby: w pierwszej kolumnie użyte zostały nazwy kolorów, a w drugiej — odpowiadające im wartości numeryczne.
Nazwa | Numer | Nazwa koloru | Szesn. RGB | Dziesiętny |
---|---|---|---|---|
aliceblue | #f0f8ff | 240,248,255 | ||
antiquewhite | #faebd7 | 250,235,215 | ||
aqua | #00ffff | 0,255,255 | ||
aquamarine | #7fffd4 | 127,255,212 | ||
azure | #f0ffff | 240,255,255 | ||
beige | #f5f5dc | 245,245,220 | ||
bisque | #ffe4c4 | 255,228,196 | ||
black | #000000 | 0,0,0 | ||
blanchedalmond | #ffebcd | 255,235,205 | ||
blue | #0000ff | 0,0,255 | ||
blueviolet | #8a2be2 | 138,43,226 | ||
brown | #a52a2a | 165,42,42 | ||
burlywood | #deb887 | 222,184,135 | ||
cadetblue | #5f9ea0 | 95,158,160 | ||
chartreuse | #7fff00 | 127,255,0 | ||
chocolate | #d2691e | 210,105,30 | ||
coral | #ff7f50 | 255,127,80 | ||
cornflowerblue | #6495ed | 100,149,237 | ||
cornsilk | #fff8dc | 255,248,220 | ||
crimson | #dc143c | 220,20,60 | ||
cyan | #00ffff | 0,255,255 | ||
darkblue | #00008b | 0,0,139 | ||
darkcyan | #008b8b | 0,139,139 | ||
darkgoldenrod | #b8860b | 184,134,11 | ||
darkgray | #a9a9a9 | 169,169,169 | ||
darkgreen | #006400 | 0,100,0 | ||
darkgrey | #a9a9a9 | 169,169,169 | ||
darkkhaki | #bdb76b | 189,183,107 | ||
darkmagenta | #8b008b | 139,0,139 | ||
darkolivegreen | #556b2f | 85,107,47 | ||
darkorange | #ff8c00 | 255,140,0 | ||
darkorchid | #9932cc | 153,50,204 | ||
darkred | #8b0000 | 139,0,0 | ||
darksalmon | #e9967a | 233,150,122 | ||
darkseagreen | #8fbc8f | 143,188,143 | ||
darkslateblue | #483d8b | 72,61,139 | ||
darkslategray | #2f4f4f | 47,79,79 | ||
darkslategrey | #2f4f4f | 47,79,79 | ||
darkturquoise | #00ced1 | 0,206,209 | ||
darkviolet | #9400d3 | 148,0,211 | ||
deeppink | #ff1493 | 255,20,147 | ||
deepskyblue | #00bfff | 0,191,255 | ||
dimgray | #696969 | 105,105,105 | ||
dimgrey | #696969 | 105,105,105 | ||
dodgerblue | #1e90ff | 30,144,255 | ||
firebrick | #b22222 | 178,34,34 | ||
floralwhite | #fffaf0 | 255,250,240 | ||
forestgreen | #228b22 | 34,139,34 | ||
fuchsia | #ff00ff | 255,0,255 | ||
gainsboro | #dcdcdc | 220,220,220 | ||
ghostwhite | #f8f8ff | 248,248,255 | ||
gold | #ffd700 | 255,215,0 | ||
goldenrod | #daa520 | 218,165,32 | ||
gray | #808080 | 128,128,128 | ||
green | #008000 | 0,128,0 | ||
greenyellow | #adff2f | 173,255,47 | ||
grey | #808080 | 128,128,128 | ||
honeydew | #f0fff0 | 240,255,240 | ||
hotpink | #ff69b4 | 255,105,180 | ||
indianred | #cd5c5c | 205,92,92 | ||
indigo | #4b0082 | 75,0,130 | ||
ivory | #fffff0 | 255,255,240 | ||
khaki | #f0e68c | 240,230,140 | ||
lavender | #e6e6fa | 230,230,250 | ||
lavenderblush | #fff0f5 | 255,240,245 | ||
lawngreen | #7cfc00 | 124,252,0 | ||
lemonchiffon | #fffacd | 255,250,205 | ||
lightblue | #add8e6 | 173,216,230 | ||
lightcoral | #f08080 | 240,128,128 | ||
lightcyan | #e0ffff | 224,255,255 | ||
lightgoldenrodyellow | #fafad2 | 250,250,210 | ||
lightgray | #d3d3d3 | 211,211,211 | ||
lightgreen | #90ee90 | 144,238,144 | ||
lightgrey | #d3d3d3 | 211,211,211 | ||
lightpink | #ffb6c1 | 255,182,193 | ||
lightsalmon | #ffa07a | 255,160,122 | ||
lightseagreen | #20b2aa | 32,178,170 | ||
lightskyblue | #87cefa | 135,206,250 | ||
lightslategray | #778899 | 119,136,153 | ||
lightslategrey | #778899 | 119,136,153 | ||
lightsteelblue | #b0c4de | 176,196,222 | ||
lightyellow | #ffffe0 | 255,255,224 | ||
lime | #00ff00 | 0,255,0 | ||
limegreen | #32cd32 | 50,205,50 | ||
linen | #faf0e6 | 250,240,230 | ||
magenta | #ff00ff | 255,0,255 | ||
maroon | #800000 | 128,0,0 | ||
mediumaquamarine | #66cdaa | 102,205,170 | ||
mediumblue | #0000cd | 0,0,205 | ||
mediumorchid | #ba55d3 | 186,85,211 | ||
mediumpurple | #9370db | 147,112,219 | ||
mediumseagreen | #3cb371 | 60,179,113 | ||
mediumslateblue | #7b68ee | 123,104,238 | ||
mediumspringgreen | #00fa9a | 0,250,154 | ||
mediumturquoise | #48d1cc | 72,209,204 | ||
mediumvioletred | #c71585 | 199,21,133 | ||
midnightblue | #191970 | 25,25,112 | ||
mintcream | #f5fffa | 245,255,250 | ||
mistyrose | #ffe4e1 | 255,228,225 | ||
moccasin | #ffe4b5 | 255,228,181 | ||
navajowhite | #ffdead | 255,222,173 | ||
navy | #000080 | 0,0,128 | ||
oldlace | #fdf5e6 | 253,245,230 | ||
olive | #808000 | 128,128,0 | ||
olivedrab | #6b8e23 | 107,142,35 | ||
orange | #ffa500 | 255,165,0 | ||
orangered | #ff4500 | 255,69,0 | ||
orchid | #da70d6 | 218,112,214 | ||
palegoldenrod | #eee8aa | 238,232,170 | ||
palegreen | #98fb98 | 152,251,152 | ||
paleturquoise | #afeeee | 175,238,238 | ||
palevioletred | #db7093 | 219,112,147 | ||
papayawhip | #ffefd5 | 255,239,213 | ||
peachpuff | #ffdab9 | 255,218,185 | ||
peru | #cd853f | 205,133,63 | ||
pink | #ffc0cb | 255,192,203 | ||
plum | #dda0dd | 221,160,221 | ||
powderblue | #b0e0e6 | 176,224,230 | ||
purple | #800080 | 128,0,128 | ||
red | #ff0000 | 255,0,0 | ||
rosybrown | #bc8f8f | 188,143,143 | ||
royalblue | #4169e1 | 65,105,225 | ||
saddlebrown | #8b4513 | 139,69,19 | ||
salmon | #fa8072 | 250,128,114 | ||
sandybrown | #f4a460 | 244,164,96 | ||
seagreen | #2e8b57 | 46,139,87 | ||
seashell | #fff5ee | 255,245,238 | ||
sienna | #a0522d | 160,82,45 | ||
silver | #c0c0c0 | 192,192,192 | ||
skyblue | #87ceeb | 135,206,235 | ||
slateblue | #6a5acd | 106,90,205 | ||
slategray | #708090 | 112,128,144 | ||
slategrey | #708090 | 112,128,144 | ||
snow | #fffafa | 255,250,250 | ||
springgreen | #00ff7f | 0,255,127 | ||
steelblue | #4682b4 | 70,130,180 | ||
tan | #d2b48c | 210,180,140 | ||
teal | #008080 | 0,128,128 | ||
thistle | #d8bfd8 | 216,191,216 | ||
tomato | #ff6347 | 255,99,71 | ||
turquoise | #40e0d0 | 64,224,208 | ||
violet | #ee82ee | 238,130,238 | ||
wheat | #f5deb3 | 245,222,179 | ||
white | #ffffff | 255,255,255 | ||
whitesmoke | #f5f5f5 | 245,245,245 | ||
yellow | #ffff00 | 255,255,0 | ||
yellowgreen | #9acd32 | 154,205,50 |
4.4. Słowo kluczowe currentColor
W specyfikacjach CSS 1 i CSS 2 wartością początkową własności border-color
jest wartość własności
W specyfikacjach tych nie zdefiniowano jednak odpowiedniego słowa kluczowego. Brak ten został spostrzeżony w SVG i w specyfikacji SVG 1.0 wprowadzono wartość color
.currentColor
dla własności fill
, stroke
, stop-color
, flood-color
oraz lighting-color
. W CSS 3 rozszerzono definicję wartości koloru o słowo kluczowe currentColor
, dzięki czemu słowa tego można używać jako wartości wszystkich własności przyjmujących wartości typu <color>. W ten sposób w CSS 3 uproszczono definicję tych własności.
- currentColor
- Wartość własności
color
. Wartość obliczona słowa kluczowegocurrentColor
jest wartością obliczoną własnościcolor
. Jeśli słowo kluczowecurrentColor
zostanie użyte jako wartość samej własnościcolor
, ustawienie takie jest traktowane jakocolor: inherit
.
4.5. Kolory systemowe w CSS
4.5.1. Kolory systemowe w CSS 2
Wycofywane. Specyfikacja CSS 2 oprócz zwykłego określania kolorów tekstu, tła itp. dopuszcza również możliwość definiowania kolorów w sposób zgodny ze środowiskiem graficznym użytkownika.
Jeśli w danym systemie nie ma odpowiedniej wartości, określona wartość powinna zostać zamieniona na najbliższą jej wartość systemową lub na kolor domyślny. Należy pamiętać, że niektóre profile CSS mogą w ogóle nie obsługiwać kolorów systemowych.
Poniżej znajduje się lista dodatkowych wartości, dostępnych dla własności CSS związanych z określaniem kolorów. Każdej własności przyjmującej wartości kolorów można przypisać jedną z tych wartości. Mimo że wielkość liter nie jest rozróżniana, zaleca się, aby stosować taki sam zapis, jak poniżej. Dzięki temu nazwy te są bardziej czytelne.
- ActiveBorder
- Obramowanie aktywnego okna.
- ActiveCaption
- Podpis aktywnego okna.
- AppWorkspace
- Kolor tła interfejsu wielodokumentowego.
- Background
- Tło pulpitu.
- ButtonFace
- Kolor tła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki jednej warstwie obramowania.
- ButtonHighlight
- Kolor obramowania zwróconego ku źródłu światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki jednej warstwie obramowania.
- ButtonShadow
- Kolor obramowania odwróconego od źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki jednej warstwie obramowania.
- ButtonText
- Tekst na przyciskach.
- CaptionText
- Tekst w podpisie, polu rozmiaru oraz polu strzałki paska przewijania.
- GrayText
- Tekst elementu wyłączonego. Jeśli sterownik ekranu nie obsługuje jednolitego szarego koloru, kolor ten zostanie ustawiony na wartość #000.
- Highlight
- Zaznaczony element w kontrolce.
- HighlightText
- Tekst elementu zaznaczonego w kontrolce.
- InactiveBorder
- Obramowanie nieaktywnego okna.
- InactiveCaption
- Podpis nieaktywnego okna.
- InactiveCaptionText
- Kolor tekstu w nieaktywnym podpisie.
- InfoBackground
- Kolor tła chmurki.
- InfoText
- Kolor tekstu w chmurkach.
- Menu
- Tło menu.
- MenuText
- Tekst w menu.
- Scrollbar
- Szary obszar paska przewijania.
- ThreeDDarkShadow
- Kolor ciemniejszej (zazwyczaj zewnętrznej) z dwóch krawędzi obramowania odwróconego od źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
- ThreeDFace
- Kolor tła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
- ThreeDHighlight
- Kolor jaśniejszej (zazwyczaj zewnętrznej) z dwóch krawędzi obramowania zwróconego w kierunku źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
- ThreeDLightShadow
- Kolor ciemniejszej (zazwyczaj wewnętrznej) z dwóch krawędzi obramowania zwróconego w kierunku źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
- ThreeDShadow
- Kolor jaśniejszej (zazwyczaj wewnętrznej) z dwóch krawędzi obramowania odwróconego od źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
- Window
- Tło okna.
- WindowFrame
- Ramka okna.
- WindowText
- Tekst w oknach.
Poniższa reguła ustawia kolory pierwszego planu i tła akapitów takie same, jak kolory pierwszego planu i tła okna użytkownika:
PRZYKŁADY NIEZALECANE:
p { color: WindowText; background-color: Window }
appearance
CSS 3 UI. Do naśladowania kolorów elementów interfejsu użytkownika należy używać własności appearance
zamiast kombinacji kolorów systemowych.4.6. Uwagi dot. używania kolorów
Mimo iż kolory mogą stanowić wartościowe uzupełnienie informacji przedstawionych w dokumencie i ułatwiać jego czytanie, należy je stosować zgodnie z wytycznymi opisanymi w dokumencie W3C Web Content Accessibility Guidelines [WCAG20].
5. Proste mieszanie alfa
Rysując elementy implementacje muszą obsługiwać wartość alfa zgodnie z zasadami opisanymi w podrozdziale 14.2 Proste mieszanie alfa specyfikacji [SVG11]. (Jeśli własności color-interpolation
lub color-rendering
wymienione w tej specyfikacji nie są zaimplementowane lub nie mają zastosowania, implementacje muszą działać tak, jakby miały one wartości początkowe.)
6. Przykładowy arkusz stylów dla dokumentów (X)HTML
Ten dodatek ma charakter informacyjny, nie normatywny. Poniższy arkusz stylów mógłby zostać użyty w implementacji jako standardowy arkusz stylów dla dokumentów HTML4, XHTML1, XHTML1.1, XHTML Basic i innych dokumentów z rodziny XHTML.
html { color: black; background: white; } /* Tradycyjne koloru hiperłączy */ :link { color: blue; } :visited { color: purple; } /* Domyślny obrys elementów aktywnych */ :focus { outline: 1px dotted; /* lub 1px dotted invert */ }
7. Profile
Każda specyfikacja wykorzystująca moduł CSS3 Color musi definiować podzbiór właściwości modułu CSS3 Color, które dopuszcza i których używania zabrania oraz opisywać lokalne znaczenie wszystkich składników tego podzbioru.
Przykłady nienormatywne:
Profil CSS3 Color | |
---|---|
Specyfikacja | HTML4 |
Akceptuje | Podstawowe nazwy kolorów Sześciocyfrowe szesnastkowe wartości RGB |
Nie akceptuje | Własności color Własności opacity Trzycyfrowych szesnastkowych wartości RGB i funkcyjnej notacji RGB Wartości kolorów w notacji RGBA Wartości kolorów w notacjach HSL i HSLA Dodatkowych nazw kolorów Wartości koloru currentColor Kolorów CSS 2 UI Wartości koloru transparent |
Dodatkowe ograniczenia | brak. |
Profil CSS3 Color | |
---|---|
Specyfikacja | CSS poziom 1 |
Akceptuje | Własność color Podstawowe nazwy kolorów Wartości kolorów w formacie RGB |
Nie akceptuje | Własności opacity Wartości kolorów RGBA Wartości kolorów HSL i HSLA Dodatkowych nazw kolorów Wartości koloru currentColor Kolorów CSS 2 UI Colors Wartości koloru transparent |
Dodatkowe ograniczenia | brak. |
Profil CSS3 Color | |
---|---|
Specyfikacja | CSS poziom 2 |
Akceptuje | Własność color Podstawowe nazwy kolorów Wartości kolorów w formacie RGB CSS2 UI Colors Wartość koloru transparent |
Nie akceptuje | Własności opacity Wartości kolorów RGBA Wartości kolorów HSL i HSLA Dodatkowych nazw kolorów Wartości koloru currentColor |
Dodatkowe ograniczenia | Wartość koloru transparent nie może być nadawana własności color .Wartość koloru orange (jedna z dodatkowych nazw kolorów) jest akceptowana w CSS 2.1 |
Profil CSS3 Color | |
---|---|
Specyfikacja | SVG 1.0 i 1.1 |
Akceptuje | Własność color Własność opacity Podstawowe nazwy kolorów Wartości kolorów w formacie RGB Kolory CSS 2 UI Dodatkowe nazwy kolorów Wartość koloru currentColor |
Nie akceptuje | Wartości kolorów w formacie RGBA Wartości kolorów w formatach HSL i HSLA Wartości koloru transparent |
Dodatkowe ograniczenia | Wartość koloru currentColor nie może być przypisywana własności color . |
8. Zestaw testów
Został opracowany zestaw testów dla modułu kolorów CSS, ale mogą zostać dodane kolejne testy. Zestaw ten pozwala sprawdzić czy aplikacja kliencka jest zgodna w podstawowym zakresie z niniejszą specyfikacją. Testy te nie są wyczerpujące i nie testują wszystkich możliwych wartości numerycznych kolorów. Można je znaleźć pod adresem http://www.w3.org/Style/CSS/Test/CSS3/Color/current/.
9. Wezwanie do implementowania porzuconych własności
Ze specyfikacji tej usunięto część własności, które znajdowały się w rekomendacji kandydującej z dnia 14 maja 2003 r. Mimo to wezwanie do ich implementowania pozostaje ważne, ponieważ własności te mogą zostać dodane do przyszłych wersji tej specyfikacji, jeśli powstaną odpowiednie implementacje i zestawy testów pozwalające zweryfikować ich interoperacyjność. Do własności tych należą:
- ICC Color Profile: własność
color-profile
- Własność
rendering-intent
- Reguła
@color-profile
- Kolor systemowy
flavor
10. Podziękowania
Dziękujemy Bradowi Pettitowi za napisanie i zaimplementowanie profili kolorów. Dziękujemy Stevenowi Pembertonowi za opis kolorów HSL. Dziękujemy za komentarze następującym osobom: Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, podgrupa XSL FO grupy roboczej XSL oraz cała społeczność www-style. Dodatkowo dziękujemy Chrisowi Lilleyowi za pełnienie funkcji eksperta ds. kolorów CSS.
11. Zmiany
Niniejszy dokument różni się od proponowanej rekomendacji z dnia 28 października 2010 r. następującymi elementami: data, status oraz styl zostały dostosowane do rekomendacji W3C, zaktualizowano odwołania.
12. Źródła
12.1. Źródła normatywne
- [COLORIMETRY]
- Colorimetry, Third Edition. CIE 15:2004. ISBN 978-3-901906-33-6
- [CSS21]
- Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
- [SRGB]
- Multimedia systems and equipment – Colour measurement and management – Part 2-1: Colour management – Default RGB colour space – sRGB. IEC 61966-2-1 (1999-10) ISBN: 2-8318-4989-6 – ICS codes: 33.160.60, 37.080 – TC 100 – 51 pp. as amended by Amendment A1:2003. URL: http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf
- [SVG11]
- Jon Ferraiolo et al. Scalable Vector Graphics (SVG) 1.1. 14 January 2003. W3C Recommendation. URL: http://www.w3.org/TR/2003/REC-SVG11-20030114/
12.2. Źródła informacyjne
- [ABC]
- Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer’s Handbook. Prentice-Hall. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc
- [CSS2]
- Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411
- [CSS3UI]
- Tantek Çelik. CSS3 Basic User Interface Module. 11 May 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-ui-20040511
- [HTML401]
- David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
- [OEB101]
- Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm
- [SVG10]
- Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
- [WCAG20]
- Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211
- [X11COLORS]
- X11 Color Names URL: http://en.wikipedia.org/wiki/X11_color_names
- [XML10]
- C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/
Indeks
- ActiveBorder, 4.5.1.
- ActiveCaption, 4.5.1.
- aliceblue, 4.3.
- <alphavalue>, 3.2., 4.2.2., 4.2.5.
- antiquewhite, 4.3.
- appearance, 4.5.1.
- AppWorkspace, 4.5.1.
- aqua, 4.1., 4.3.
- aquamarine, 4.3.
- azure, 4.3.
- Background, 4.5.1.
- beige, 4.3.
- bisque, 4.3.
- black, 4.1., 4.3.
- blanchedalmond, 4.3.
- blue, 4.1., 4.3.
- blueviolet, 4.3.
- brown, 4.3.
- burlywood, 4.3.
- ButtonFace, 4.5.1.
- ButtonHighlight, 4.5.1.
- ButtonShadow, 4.5.1.
- ButtonText, 4.5.1.
- cadetblue, 4.3.
- CaptionText, 4.5.1.
- chartreuse, 4.3.
- chocolate, 4.3.
- color, 3.1.
- <color>, 3.1., 4.
- color-interpolation, 5.
- color-rendering, 5.
- compositing, 5.
- coral, 4.3.
- cornflowerblue, 4.3.
- cornsilk, 4.3.
- crimson, 4.3.
- currentColor, 4.4., 3.1., 3.1., 3.1.
- cyan, 4.3.
- darkblue, 4.3.
- darkcyan, 4.3.
- darkgoldenrod, 4.3.
- darkgray, 4.3.
- darkgreen, 4.3.
- darkgrey, 4.3.
- darkkhaki, 4.3.
- darkmagenta, 4.3.
- darkolivegreen, 4.3.
- darkorange, 4.3.
- darkorchid, 4.3.
- darkred, 4.3.
- darksalmon, 4.3.
- darkseagreen, 4.3.
- darkslateblue, 4.3.
- darkslategray, 4.3.
- darkslategrey, 4.3.
- darkturquoise, 4.3.
- darkviolet, 4.3.
- deeppink, 4.3.
- deepskyblue, 4.3.
- dimgray, 4.3.
- dimgrey, 4.3.
- dodgerblue, 4.3.
- firebrick, 4.3.
- floralwhite, 4.3.
- forestgreen, 4.3.
- fuchsia, 4.1., 4.3.
- gainsboro, 4.3.
- ghostwhite, 4.3.
- gold, 4.3.
- goldenrod, 4.3.
- gray, 4.1., 4.3.
- GrayText, 4.5.1.
- green, 4.1., 4.3.
- greenyellow, 4.3.
- grey, 4.3.
- Highlight, 4.5.1.
- HighlightText, 4.5.1.
- honeydew, 4.3.
- hotpink, 4.3.
- hsl(), 4.2.4.
- hsla(), 4.2.5.
- InactiveBorder, 4.5.1.
- InactiveCaption, 4.5.1.
- InactiveCaptionText, 4.5.1.
- indianred, 4.3.
- indigo, 4.3.
- InfoBackground, 4.5.1.
- InfoText, 4.5.1.
- ivory, 4.3.
- khaki, 4.3.
- lavender, 4.3.
- lavenderblush, 4.3.
- lawngreen, 4.3.
- lemonchiffon, 4.3.
- lightblue, 4.3.
- lightcoral, 4.3.
- lightcyan, 4.3.
- lightgoldenrodyellow, 4.3.
- lightgray, 4.3.
- lightgreen, 4.3.
- lightgrey, 4.3.
- lightpink, 4.3.
- lightsalmon, 4.3.
- lightseagreen, 4.3.
- lightskyblue, 4.3.
- lightslategray, 4.3.
- lightslategrey, 4.3.
- lightsteelblue, 4.3.
- lightyellow, 4.3.
- lime, 4.1., 4.3.
- limegreen, 4.3.
- linen, 4.3.
- magenta, 4.3.
- maroon, 4.1., 4.3.
- mediumaquamarine, 4.3.
- mediumblue, 4.3.
- mediumorchid, 4.3.
- mediumpurple, 4.3.
- mediumseagreen, 4.3.
- mediumslateblue, 4.3.
- mediumspringgreen, 4.3.
- mediumturquoise, 4.3.
- mediumvioletred, 4.3.
- Menu, 4.5.1.
- MenuText, 4.5.1.
- midnightblue, 4.3.
- mintcream, 4.3.
- mistyrose, 4.3.
- moccasin, 4.3.
- navajowhite, 4.3.
- navy, 4.1., 4.3.
- oldlace, 4.3.
- olive, 4.1., 4.3.
- olivedrab, 4.3.
- opacity, 3.2.
- orange, 4.3.
- orangered, 4.3.
- orchid, 4.3.
- palegoldenrod, 4.3.
- palegreen, 4.3.
- paleturquoise, 4.3.
- palevioletred, 4.3.
- papayawhip, 4.3.
- peachpuff, 4.3.
- peru, 4.3.
- pink, 4.3.
- plum, 4.3.
- powderblue, 4.3.
- purple, 4.1., 4.3.
- red, 4.1., 4.3.
- #rgb, 4.2.1.
- rgb(), 4.2.1.
- rgba(), 4.2.2.
- rosybrown, 4.3.
- royalblue, 4.3.
- #rrggbb, 4.2.1.
- saddlebrown, 4.3.
- salmon, 4.3.
- sandybrown, 4.3.
- Scrollbar, 4.5.1.
- seagreen, 4.3.
- seashell, 4.3.
- sienna, 4.3.
- silver, 4.1., 4.3.
- skyblue, 4.3.
- slateblue, 4.3.
- slategray, 4.3.
- slategrey, 4.3.
- snow, 4.3.
- springgreen, 4.3.
- sRGB, 4.2.1., 4.1.
- steelblue, 4.3.
- system colors, 4.5.1.
- tan, 4.3.
- teal, 4.1., 4.3.
- thistle, 4.3.
- ThreeDDarkShadow, 4.5.1.
- ThreeDFace, 4.5.1.
- ThreeDHighlight, 4.5.1.
- ThreeDLightShadow, 4.5.1.
- ThreeDShadow, 4.5.1.
- tomato, 4.3.
- transparent, 4.2.3., 3.1.
- turquoise, 4.3.
- violet, 4.3.
- wheat, 4.3.
- white, 4.1., 4.3.
- whitesmoke, 4.3.
- Window, 4.5.1.
- WindowFrame, 4.5.1.
- WindowText, 4.5.1.
- yellow, 4.1., 4.3.
- yellowgreen, 4.3.
Indeks własności
Własność | Wartości | Wartość domyślna | Zastosowanie | Dz. | Wartości procentowe | Media |
---|---|---|---|---|---|---|
color | <color> | inherit | zależna od aplikacji klienckiej | wszystkie elementy | tak | nie dotyczy | wizualne |
opacity | <alphavalue> | inherit | 1 | wszystkie elementy | nie | nie dotyczy | wizualne |