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ına uygulanır (daha önce bahsettiğimiz gibi).

Ancak bazen sayfanın yalnızca belirli kısımlarını etkileyen değişkenler istersin. Örneğin, çok sayıda ürün kartı içeren bir çevrim içi mağaza oluşturduğunu düşün. Diğer öğeleri etkilemeden yalnızca bu kartları biçimlendirmek 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ızı sağlar.

Görev

Kolay

Size birkaç ürün kartı içeren bir çevrim içi mağaza sayfası veriliyor. Göreviniz:

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

GEREKLİ ÇIKTI BİÇİMİ: [Çevrilmiş içeriğiniz burada]

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>