Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Wyniki wyszukiwania

    Kolor

    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: 
    Contributors to this page: Anonymous, Takenbot, teoli, Verruckt, gandalf, Mikolaj, Mgjbot, Ptak82, Ruby
    Ostatnia aktualizacja: teoli,