ألوان التمييز والإبراز

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 14 من 35.

تساعد ألوان التمييز (Accent colors) العناصر المهمة على البروز، مثل الأزرار، والروابط، وأقسام الحث على اتخاذ إجراء، أو النصوص المميزة. يمكنك تعريفها كمتغيرات CSS (--primary-color، و --accent-color، و --highlight-color) واستخدامها بشكل متسق في جميع أنحاء موقعك. كما يمكن لحالات التمرير (Hover states) والتمييزات استخدام هذه المتغيرات أيضاً، مما يسهل إنشاء سمة جذابة بصرياً ومتماسكة مع جذب الانتباه إلى المحتوى الرئيسي.

أنشئ متغير CSS للون التمييز الخاص بك:

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

استخدم لون التمييز (accent color) للعناصر التفاعلية المهمة مثل الأزرار:

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

تمييز عناصر التنقل النشطة باستخدام لون التمييز (accent color):

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

التحدي

سهل

مهمتك:

قم بتعيين لون التمييز (accent color) باستخدام متغير CSS --accent-color.
قم بتطبيق لون التمييز على جميع الأزرار في الصفحة.
قم بتغيير حالة التمرير (hover state) للأزرار إلى اللون الأساسي.
قم بتطبيق لون التمييز على الروابط، والنصوص المميزة، وروابط التذييل لضمان الاتساق.

ورقة مرجعية

تساعد ألوان التمييز العناصر المهمة على البروز. قم بتعريفها كمتغيرات CSS واستخدمها باستمرار في جميع أنحاء موقعك.

أنشئ متغير 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);
}

جرّب بنفسك

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