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:
- black
- navy
- blue
- maroon
- purple
- green
- red
- orange
- teal
- magenta
- olive
- gray
- lime
- aqua
- silver
- yellow
- white
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%).
