CSS Değişkenlerini Kullanma

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 2 / 35.

Özel özellikler olarak da adlandırılan CSS değişkenleri, değerleri bir ad altında kaydetmenize ve bunları CSS'iniz boyunca yeniden kullanmanıza olanak tanır.
Değişkenler, şu sözdizimi kullanılarak bir seçici içinde bildirilir (değişkenin sayfanın her yerinde çalışması için genellikle :root kullanılır, buna global denir):

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

Bir değişkende saklanan değeri kullanmak için var() fonksiyonunu kullanın:

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

Görev

Kolay

Sinemada oynayan birkaç filmi gösteren bir web sayfanız var. Her filmin bir Buy Ticket düğmesi bulunmaktadır.

Göreviniz:

:root seçicisi içinde --main-color adında bir CSS değişkeni oluşturun ve değerini seagreen olarak ayarlayın.
Sayfadaki tüm <button> öğelerinin arka plan rengini ayarlamak için bu değişkeni kullanın.

Kopya kağıdı

CSS değişkenleri (özel özellikler), değerleri bir ad altında kaydetmenize ve bunları CSS'iniz boyunca yeniden kullanmanıza olanak tanır.

Değişkenler, --variable-name sözdizimi kullanılarak bir seçici içinde bildirilir. Değişkenleri global yapmak için :root kullanın:

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

Bir değişkeni kullanmak için var() fonksiyonunu kullanın:

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

Kendin dene

<html>
<head>
    <title>How to declare a variable</title>
    <style>
        :root {
            --bg-color: #4c87f5;
             /* Write CSS rules here */
             
          }
        body {
            font-family: Arial, sans-serif;
            background: var(--bg-color);
            padding: 20px;
          }
        .movie {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
          }
        .movie h2 {
            margin: 0 0 10px;
          }
        .movie p {
            margin: 0 0 10px;
          }
        button {
            color: black;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
             /* Write CSS rules here */
            
          }
    </style>
</head>
<body>
    <h1>Today's Movies</h1>
    <div class="movie">
      <h2>Ocean Whispers</h2>
      <p>A sailor discovers a hidden island and the secrets of the sea.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Midnight Chase</h2>
      <p>A detective races against the clock to stop a mysterious heist.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Starlight Bakery</h2>
      <p>A warm comedy about friendship and following your dreams.</p>
      <button>Buy Ticket</button>
</div>
</body>
</html>