Yerel Değişkenler

Coddy'nin HTML Journey'sinin Practical Frontend 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ş olabilirsiniz. Bunun nedeni :root seçicisinin global olmasıdır — burada tanımlanan değişkenler (daha önce belirttiğimiz gibi) tüm HTML sayfası için geçerlidir.

Ancak bazen, yalnızca sayfanın belirli bölümlerini etkileyen değişkenler istersiniz. Örneğin, birçok ürün kartı olan bir çevrimiçi mağaza oluşturduğunuzu hayal edin. Diğer öğeleri etkilemeden yalnızca bu kartları stillendirmek için bir .card sınıfı içinde değişkenler oluşturabilirsiniz.

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

Bu şekilde, değişken yalnızca .card öğeleri içinde çalışarak belirli alanlar üzerinde size daha fazla kontrol sağlar.

Görev

Kolay

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

.card sınıfı içinde, --card-accent adında 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 (text color) ayarlamak için kullanın.
Aynı değişkeni, kartın <button> öğesinin arka plan rengi (background color) olarak kullanın.

Kopya kağıdı

CSS değişkenleri sadece global olarak :root içinde değil, belirli seçiciler içinde yerel olarak da tanımlanabilir. Yerel değişkenler yalnızca o seçicinin kapsamındaki öğelere uygulanır.

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

Bu, yalnızca .card öğelerinin içinde çalışan bir --card-color değişkeni oluşturarak belirli bileşenlerin stillendirilmesi üzerinde daha hedefli bir kontrol sağlar.

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>