Vurgu Renkleri ve Öne Çıkarma

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

Vurgu renkleri; düğmeler, bağlantılar, harekete geçirici mesaj bölümleri veya vurgulanan metinler gibi önemli öğelerin öne çıkmasına yardımcı olur. Bunları CSS değişkenleri (--primary-color, --accent-color, --highlight-color) olarak tanımlayabilir ve sitenizin genelinde tutarlı bir şekilde kullanabilirsiniz. Üzerine gelme (hover) durumları ve öne çıkarmalar da bu değişkenleri kullanabilir; bu da ana içeriğe dikkat çekerken görsel olarak çekici ve uyumlu bir tema oluşturmayı kolaylaştırır.

Vurgu renginiz için bir CSS değişkeni oluşturun:

:root {
  --accent-color: #ff6b6b;
}

Düğmeler gibi önemli etkileşimli öğeler için vurgu rengini kullanın:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

Vurgu rengini kullanarak aktif gezinti öğelerini vurgulayın:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

Görev

Kolay

Göreviniz:

--accent-color CSS değişkenini kullanarak vurgu rengini ayarlayın.
Vurgu rengini sayfadaki tüm düğmelere uygulayın.
Düğmelerin üzerine gelme (hover) durumunu ana renge değiştirin.
Tutarlılık için vurgu rengini bağlantılara, vurgulanan metne ve alt bilgi bağlantılarına uygulayın.

Kopya kağıdı

Vurgu renkleri, önemli öğelerin öne çıkmasına yardımcı olur. Bunları CSS değişkenleri olarak tanımlayın ve siteniz genelinde tutarlı bir şekilde kullanın.

Vurgu renginiz için bir CSS değişkeni oluşturun:

:root {
  --accent-color: #ff6b6b;
}

Düğmeler için vurgu rengini kullanın:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

Aktif navigasyon öğelerini vurgulayın:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

Kendin dene

<!DOCTYPE html>
<html>
<head>
  <title>Accent Colors & Highlighting</title>
  <style>
    :root {
      --primary-color: #1e90ff;
      --text-color: #222;
      --bg-color: #f9f9f9;
      
    }

    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 2rem;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .card {
      background-color: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card h2 {
      margin-top: 0;
      color: var(--primary-color);
    }

    .card button {
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .highlight {
      color: white;
      padding: 0 4px;
      border-radius: 3px;
    }

    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }

    footer a {
      margin: 0 0.5rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Summer Music Festival</h1>
    <p>Experience <span class="highlight">unforgettable</span> music and vibes all summer long!</p>
  </header>

  <main>
    <div class="card">
      <h2>Rock Stage</h2>
      <p>Join the rock legends for an unforgettable night of music! <a href="#">More info</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>Jazz Stage</h2>
      <p>Relax with smooth jazz performances under the open sky. <a href="#">Schedule</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>EDM Stage</h2>
      <p>Dance all night with top DJs spinning the hottest tracks. <a href="#">Lineup</a></p>
      <button>Learn More</button>
    </div>
  </main>

  <footer>
    <p>Follow us on <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</body>
</html>