Wstęp do CSS - część piąta

Kolory

Sposoby zapisu

W CSS istnieje kilka sposobów zapisu kolorów. Od ekwiwalentów tekstowych, przez stary, znany z HTML sposób opisu przy pomocy wartości szesnastkowych, aż do określania ośmiobitowej wartości każdego z trzech kolorów składowych.

Ekwiwalenty tekstowe. W3C definiuje siedemnaście (CSS 2.1) podstawowych kolorów, którym zostały przypisane ekwiwalenty tekstowe. Są to:

Warto zwrócić uwagę, że zaleca się pisownie tych wszystkich nazw przy pomocy wyłącznie małych liter.

Zapis trzech kolorów w notacji szesnastkowej. Jest to stary, dobrze znany jeszcze z HTML sposób zapisu kolorów. W CSS2 został on nieco udoskonalony.

Pierwsze dwa znaki (przypominam, że w systemie szesnastkowym używa się 16 znaków - wszystkich cyfr i liter alfabetu od 'a' do 'f') definiują wartość składowej czerwonej koloru, kolejne dwa składowej zielonej, a dwa ostatnie składowej niebieskiej. Przed takim zapisem należy postawić krzyżyk (ang. hash) - #. Tak więc, kolor #23fb83 wygląda tak: #23fb83. Wszystkie wartości wyzerowane (#000000) oznaczają brak koloru, czyli czerń. Wszystkie wartości maksymalne (#ffffff) oznaczają biel. Tak samo jak w przypadku ekwiwalentów zaleca się stosowanie małych liter przy zapisie tych wartości.

Nieco wcześniej wspominałem o pewnym uproszczeniu. To uproszczenie polega na skróceniu zapisu niektórych kolorów. Weźmy na przykład jeden z odcieni szarości - #bbbbbb. Jego zapis to aż siedem znaków. CSS pozwala na skrócenie tego zapisu do czterech. Ponieważ wartości, które pierwszą i drugą cyfrę mają taką samą (np. aa, 22, ff) jest tylko szesnaście, postanowiono dać możliwość skrócenia tych dwóch cyfr (w systemie szesnastkowych litery a-f nazywane są również cyframi) do jednej, tej która się właśnie powtarza. Dzięki temu, wcześniej wymieniony kolor #bbbbbb, można zapisać jako #bbb. Inny przykład: #2288dd = #28d.

Trzy kolory w notacji dziesiętnej. Zapewnie nie raz spotkaliście się z zapisem koloru w postaci 255,190,32. Te trzy liczby (z zakresu od 0 do 255 - największej liczby, którą można zmieścić w ośmiu bitach - jednym bajcie) określają, tak jak poprzedni sposób, wartości trzech składowych kolorów. W CSS również jest możliwy zapis przy wykorzystaniu wartości dziesiętnych. Używa się do tego następującej składni: rgb(255, 190, 32). Możliwe jest również wykorzystanie wartości procentowych, np. rgb(80%, 23.5%, 32%).