Kolory

Kolory odgrywają kluczową rolę w projektowaniu stron internetowych, pomagając wizualnie przekazać informacje, zwiększyć czytelność oraz poprawić ogólne wrażenia estetyczne. HTML i CSS oferują różne metody definiowania kolorów dla tekstu, tła (background) oraz obramowań (border). W tej lekcji przejdziemy przez podstawowe sposoby stosowania kolorów w HTML, korzystając z nazw kolorów, kodów HEX oraz wartości RGB, a także zobaczymy, jak stosować te kolory inline do stylowania tekstu, tła i obramowań.

Przykład Kodu

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kolory w HTML</title>
    <style>
        /* Stylowanie tła i tekstu dla całego body */
        body {
            background-color: #f0f0f0; /* Jasnoszare tło */
            color: #333; /* Ciemnoszary tekst */
        }
        /* Stylowanie klasy .example-text */
        .example-text {
            color: #0066cc; /* Kolor tekstu na niebiesko */
        }
        /* Stylowanie klasy .example-border */
        .example-border {
            border: 2px solid #ff9900; /* Pomarańczowa ramka */
            padding: 10px;
            margin: 20px 0;
        }
        /* Stylowanie klasy .example-background */
        .example-background {
            background-color: rgb(255, 223, 186); /* Jasnopomarańczowe tło */
            padding: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h3>Kolor tekstu zdefiniowany inline</h3>
    <p style="color: green;">Ten tekst jest zielony.</p>

    <h3>Klasa zmieniająca kolor tekstu</h3>
    <p class="example-text">Ten tekst jest niebieski.</p>

    <h3>Klasa dodająca obramowanie</h3>
    <div class="example-border">To jest div z pomarańczową ramką.</div>

    <h3>Klasa zmieniająca kolor tła</h3>
    <div class="example-background">To jest div z jasnopomarańczowym tłem.</div>

</body>
</html>

Opis

  • Nazwy Kolorów: HTML pozwala na używanie predefiniowanych nazw kolorów, np. green. Jest to prosta, ale ograniczona metoda, ponieważ dostępna jest tylko określona liczba nazw.
  • Kody HEX: Kody szesnastkowe, np. #ff9900, pozwalają na precyzyjne określenie kolorów poprzez kombinację wartości RGB w systemie szesnastkowym.
  • Wartości RGB: RGB, czyli Red-Green-Blue, umożliwia definiowanie kolorów poprzez określenie intensywności każdego z trzech kolorów podstawowych. Na przykład rgb(255, 223, 186).

Podsumowanie

Zrozumienie sposobów definiowania kolorów w HTML i CSS jest fundamentalne dla tworzenia atrakcyjnych i dostępnych stron internetowych. Korzystając z nazw kolorów, kodów HEX oraz wartości RGB, możemy precyzyjnie określić kolory tekstu, tła i obramowań, aby poprawić estetykę i użyteczność naszych projektów. Przedstawiony przykład demonstruje, jak można zastosować te metody w praktyce, oferując solidne podstawy do dalszej eksploracji i eksperymentowania z kolorami w projektowaniu stron internetowych.

Poprzedni
Następny

Scroll to Top