Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie.

W swoim przykładowym arkuszu stylów, dodasz kolory tła.

Informacja: Kolor

Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. CSS 2 definiuje 17 nazwanych kolorów. Niektóre z nazw mogą nie być tym, czego się spodziewasz:

  black   gray   silver   white  
podstawowe red   lime   blue  
drugorzędne yellow   aqua   fuchsia  
 maroon  orange  olive  purple  green  navy  teal 


Więcej szczegółów
Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład:
dodgerblue  peachpuff   tan   firebrick   aquamarine  

Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji słowa kluczowe kolorów w SVG. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać.

Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech heksadecymalnych liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15.

black  #000
pure red   #f00
pure green   #0f0
pure blue   #00f
white   #fff

Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent:

black   #000000
pure red   #ff0000
pure green   #00ff00
pure blue   #0000ff
white   #ffffff

Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia.

Przykłady
Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie:
Zacznij od czystej czerwieni:  #f00
Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego:  #f77
Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego:  #fa7
Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów:  #c74
Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów:  #c98
Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary:  #ccc
Aby uzyskać pastelowy odcień, taki jak blady niebieski:
Zacznij od białego:  #fff
Zredukuj trochę wartości komponentów innych, niż niebieski:  #eef


Więcej szczegółów
Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów.

Na przykład to jest kasztanowaty (ciemnoczerwony):

rgb(128, 0, 0)

Więcej szczegółów na temat określania kolorów znajdziesz w sekcji Kolory w specyfikacji CSS.

Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: CSS2 Kolory Systemowe specyfikacji CSS.


Własności kolorów

Korzystałeś(aś) już z własności color dla tekstu.

Możesz też użyć własności background-color, aby zmienić tła elementów.

Jeżeli ustawisz wartość tła na transparent, będzie ono przezroczyste i pokaże tło elementu rodzica.

Przykład
Boksy Przykład w tym kursie używają bladożółtego tła:
background-color: #fffff4;

Boksy Więcej szczegółów używają bladoszarego:

background-color: #f4f4f4;

Zadanie: Korzystanie z kodów kolorów

Wyedytuj swój plik CSS.

Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. (Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)).

/*** CSS Tutorial: Color page ***/
 
/* page font */
body {font: 16px "Comic Sans MS", cursive;}
 
/* paragraphs */
p {color: blue;}
#first {font-style: italic;}
 
/* initial letters */
strong {
 color: red;
 background-color: #ddf;
 font: 200% serif;
 }
 
.carrot {color: red;}
.spinach {color: green;}

Odśwież okno przeglądarki, aby zobaczyć wynik:

Cascading Style Sheets
Cascading Style Sheets


Wyzwanie
W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam.

(To nie jest do końca możliwe, ale możesz być blisko ideału. Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody).


Co dalej?

Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu.

Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: Treść

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: teoli, Mgjbot, Verruckt, Ptak82, gandalf, Takenbot, Ruby, Anonymous, Mikolaj
 Ostatnia aktualizacja: teoli,