צבעי הדגשה והבלטה

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 14 מתוך 35.

צבעי הדגשה עוזרים לאלמנטים חשובים לבלוט, כמו כפתורים, קישורים, מקטעי הנעה לפעולה או טקסט מודגש. אפשר להגדיר אותם כמשתני CSS (--primary-color, --accent-color, --highlight-color) ולהשתמש בהם באופן עקבי ברחבי האתר. אפשר להשתמש במשתנים האלה גם במצבי ריחוף ובהדגשות, וכך ליצור בקלות ערכת נושא מושכת מבחינה חזותית ואחידה, תוך הפניית תשומת הלב לתוכן מרכזי.

צרו משתנה CSS עבור צבע ההדגשה שלכם:

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

השתמשו בצבע ההדגשה עבור רכיבים אינטראקטיביים חשובים כמו לחצנים:

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

הדגימו פריטי ניווט פעילים באמצעות צבע ההדגשה:

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

אתגר

קל

המשימה שלך:

הגדר את צבע ההדגשה באמצעות משתנה CSS --accent-color.
החל את צבע ההדגשה על כל הכפתורים בדף.
שנה את מצב הריחוף של הכפתורים לצבע הראשי.
החל את צבע ההדגשה על קישורים, טקסט מודגש וקישורי הכותרת התחתונה, לשמירה על אחידות.

נסו בעצמכם

<!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>