Kolory HEX

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 26 z 76.

Kolory szesnastkowe to sposób określania kolorów za pomocą wartości szesnastkowych. Szesnastkowy kod koloru to sześciocyfrowy kod poprzedzony symbolem hash (#), który określa ilość czerwonego, zielonego i niebieskiego światła składającego się na dany kolor.

Każda para cyfr w kodzie reprezentuje intensywność jednego z tych kolorów podstawowych, w zakresie od 00 (brak intensywności) do FF (pełna intensywność). Kolory HEX zapewniają szeroki wybór kolorów i są powszechnie stosowane w projektowaniu stron internetowych.

Oto podstawowa składnia używania kolorów szesnastkowych w CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Na przykład:

p {
    color: #FF0000; /* Czerwony */
    background-color: #00FF00; /* Zielony */
}

Możesz również używać skróconego zapisu kolorów HEX, gdy obie cyfry w każdej parze są takie same. Na przykład:

p {
    color: #F00; /* Czerwony (odpowiednik #FF0000) */
    background-color: #0F0; /* Zielony (odpowiednik #00FF00) */
}

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma nagłówkami (<h1> i <h2>) oraz akapitem (<p>). Twoim zadaniem jest użycie szesnastkowych kodów kolorów dla kolorów tła. Wykonaj poniższe kroki:

Napisz regułę CSS dla elementu <h1>. Ustaw kolor tła na elektryczny fiolet, używając szesnastkowego kodu koloru #BF00FF.
Napisz regułę CSS dla elementu <h2>. Ustaw kolor tła na neonową zieleń, używając #39FF14.
Napisz regułę CSS dla wszystkich elementów <p>. Ustaw kolor tła na jasnoszary, używając #D3D3D3.

Spróbuj swoich sił

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>