Zmienne lokalne

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 4 z 35.

Być może zauważyłeś, że często używamy :root do deklarowania zmiennych. Dzieje się tak, ponieważ :root jest globalny: zdefiniowane tutaj zmienne mają zastosowanie na całej stronie HTML (jak wspomnieliśmy wcześniej).

Ale czasami chcesz, aby zmienne wpływały tylko na niektóre części strony. Na przykład wyobraź sobie, że tworzysz sklep internetowy z wieloma kartami produktów. Możesz utworzyć zmienne wewnątrz klasy .card, aby stylizować tylko te karty, nie wpływając na inne elementy.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

Dzięki temu zmienna działa tylko wewnątrz elementów .card, co daje Ci większą kontrolę nad określonymi obszarami.

Wyzwanie

Łatwy

Otrzymujesz stronę sklepu internetowego z kilkoma kartami produktów. Twoje zadanie:

W klasie .card utwórz lokalną zmienną CSS o nazwie --card-accent i ustaw jej wartość na coral.
Użyj tej zmiennej, aby ustawić kolor tekstu nagłówka <h3> wewnątrz karty.
Użyj tej samej zmiennej jako koloru tła elementu <button> karty.

Spróbuj swoich sił

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>