Vurgu Renkleri ve Öne Çıkarma

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

Vurgu renkleri; düğmeler, bağlantılar, eylem çağrısı bölümleri veya vurgulanmış metin 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 durumları ve vurgular da bu değişkenleri kullanabilir; böylece temel içeriğe dikkat çekerken görsel olarak çekici ve uyumlu bir tema oluşturmak kolaylaşı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örevin:

Vurgu rengini ayarla için bir CSS değişkeni --accent-color kullan.
Vurgu rengini uygula sayfadaki tüm düğmelere.
Düğmelerin üzerine gelme durumunu değiştir ve birincil rengi kullan.
Vurgu rengini uygula tutarlılık için bağlantılara, vurgulanmış metne ve alt bilgi bağlantılarına.

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>