Biến cục bộ

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

Có thể bạn đã nhận thấy chúng ta thường dùng :root để khai báo biến. Đó là vì :root có phạm vi toàn cục: các biến được định nghĩa ở đây áp dụng cho toàn bộ trang HTML, như mình đã đề cập trước đó.

Nhưng đôi khi, bạn muốn các biến chỉ ảnh hưởng đến một số phần nhất định trên trang. Ví dụ, hãy tưởng tượng bạn đang xây dựng một cửa hàng trực tuyến với nhiều thẻ sản phẩm. Bạn có thể tạo biến bên trong lớp .card để tạo kiểu riêng cho những thẻ đó mà không ảnh hưởng đến các phần tử khác.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

Như vậy, biến chỉ hoạt động bên trong các phần tử .card, giúp bạn kiểm soát tốt hơn từng khu vực cụ thể.

Thử thách

Dễ

Bạn được cung cấp một trang cửa hàng trực tuyến có một số thẻ sản phẩm. Nhiệm vụ của bạn:

Bên trong lớp .card, hãy tạo một biến CSS cục bộ có tên --card-accent và đặt giá trị của nó thành coral.
Dùng biến này để đặt màu chữ của tiêu đề <h3> bên trong thẻ.
Dùng cùng biến đó làm màu nền cho <button> của thẻ.

Tự làm thử

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>