Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Słowo kluczowe currentcolor

środa,

CSS: Słowo kluczowe currentcolor

W kaskadowych arkuszach stylów currentcolor to specjalne słowo kluczowe, które odnosi się do aktualnego koloru tekstu elementu. Umożliwia to odniesienie się do koloru określonego w właściwości color elementu w innych właściwościach CSS, takich jak border-color, background-color, box-shadow itp.

Jak działa własność currentcolor

Własność currentcolor działa podobnie jak zmienna, która przechowuje wartość koloru tekstu elementu, zdefiniowaną w jego właściwości color. To bardzo użyteczne, kiedy chcesz, aby inne właściwości elementu (np. ramka, cień, tło) używały tego samego koloru co tekst, zapewniając spójność i ułatwiając zarządzanie zmianami stylów.

Przykłady użycia currentcolor

  1. Ramka z tym samym kolorem co tekst.

    .element {
           color: blue;
           border: 1px solid currentcolor; /* Ramka będzie niebieska */
       }
  2. Cień tekstu z tym samym kolorem co tekst.

    .element {
           color: red;
           text-shadow: 1px 1px currentcolor; /* Cień tekstu będzie czerwony */
       }
  3. Tło elementu pseudo-klasowego (::before, ::after) z tym samym kolorem co tekst.

    .element::before {
           content: '';
           color: green;
           background-color: currentcolor; /* Tło będzie zielone */
       }

Zalety własności currentcolor

  • Spójność: Zapewnia jednolitość kolorystyczną pomiędzy tekstem a innymi elementami stylu.
  • Ponowne użycie: Pozwala na łatwe ponowne użycie koloru tekstu w różnych właściwościach bez konieczności powielania wartości koloru.
  • Modyfikacje: Ułatwia zarządzanie zmianami stylów, zmiana koloru tekstu automatycznie zmienia kolor innych własności odnoszących się do currentolor.

Uwaga!

Własność currentcolor odnosi się do koloru tekstu elementu, w którym jest używany, a nie do koloru tekstu elementu nadrzędnego. Jest to ważne do zrozumienia, szczególnie przy elementach zagnieżdżonych, gdzie każdy z nich może mieć inny kolor tekstu.

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły