Yerel Değişkenler

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 4 / 35.

Değişkenleri tanımlamak için sık sık :root kullandığımızı fark etmiş olabilirsin. Bunun nedeni, :root öğesinin genel olmasıdır: burada tanımlanan değişkenler tüm HTML sayfası için geçerlidir (daha önce bahsettiğimiz gibi).

Ancak bazen, sayfanın yalnızca belirli bölümlerini etkileyen değişkenler istersin. Örneğin, çok sayıda ürün kartı içeren bir çevrimiçi mağaza oluşturduğunu düşün. Diğer öğeleri etkilemeden yalnızca bu kartlara stil vermek için .card sınıfının içinde değişkenler oluşturabilirsin.

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

Bu şekilde, değişken yalnızca .card öğelerinin içinde çalışır ve belirli alanlar üzerinde daha fazla kontrol sahibi olmanı sağlar.

Görev

Kolay

Sana birkaç ürün kartı içeren bir çevrimiçi mağaza sayfası veriliyor. Görevin:

.card sınıfının içinde --card-accent adında bir yerel CSS değişkeni oluştur ve değerini coral olarak ayarla.
Bu değişkeni, kartın içindeki <h3> başlığının metin rengini ayarlamak için kullan.
Aynı değişkeni kartın <button> öğesinin arka plan rengi olarak kullan.

Kendin dene

<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>