Màu nhấn và làm nổi bật

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 14 trên 35.

Màu nhấn giúp các thành phần quan trọng nổi bật hơn, chẳng hạn như nút, liên kết, phần kêu gọi hành động hoặc văn bản được làm nổi bật. Bạn có thể định nghĩa chúng dưới dạng biến CSS (--primary-color, --accent-color, --highlight-color) và sử dụng nhất quán trên toàn bộ trang web. Trạng thái khi di chuột và các phần được làm nổi bật cũng có thể dùng những biến này, giúp bạn dễ dàng tạo giao diện bắt mắt, đồng bộ và thu hút sự chú ý vào nội dung chính.

Tạo một biến CSS cho màu nhấn của bạn:

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

Dùng màu nhấn cho các thành phần tương tác quan trọng như nút:

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

Dùng màu nhấn để làm nổi bật các mục điều hướng đang hoạt động:

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

Thử thách

Dễ

Nhiệm vụ của bạn:

Đặt màu nhấn bằng biến CSS --accent-color.
Áp dụng màu nhấn cho tất cả các nút trên trang.
Đổi trạng thái khi di chuột qua của các nút thành màu chính.
Áp dụng màu nhấn cho liên kết, văn bản được tô sáng và liên kết ở chân trang để tạo sự nhất quán.

Tự làm thử

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