21. Class Trong HTML

Trong HTML, “class” là một thuộc tính được sử dụng để xác định một hoặc nhiều tên lớp cho một phần tử HTML. Điều này giúp bạn tạo ra các nhóm phần tử có cùng kiểu dáng hoặc định dạng, từ đó bạn có thể áp dụng các quy tắc CSS hoặc xử lý bằng JavaScript cho những phần tử này.

Dưới đây là một ví dụ cụ thể về cách sử dụng thuộc tính “class” trong HTML:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
    
    .bold-text {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p class="highlight">Đây là một đoạn văn bản được làm nổi bật.</p>
  <p class="bold-text">Đây là một đoạn văn bản được làm đậm.</p>
  <p>Đây là một đoạn văn bản thông thường.</p>
</body>
</html>

Trong ví dụ này:

Chúng ta đã định nghĩa hai tên lớp trong phần <style> của tài liệu. Một tên lớp là “highlight”, và một tên lớp khác là “bold-text”.
Các phần tử <p> đầu tiên và thứ hai có thuộc tính “class” được đặt thành “highlight” và “bold-text” tương ứng. Như vậy, chúng ta đã gắn nhãn những phần tử này với các lớp chúng ta đã định nghĩa trước đó.
Các quy tắc CSS đã được áp dụng cho các tên lớp. Đoạn văn bản được gắn nhãn với lớp “highlight” có màu nền vàng, còn đoạn văn bản gắn nhãn với lớp “bold-text” được làm đậm.

Bằng cách sử dụng lớp và CSS, bạn có thể kiểm soát phong cách và định dạng của các phần tử HTML một cách linh hoạt và dễ dàng. Trên đây là giới thiệu về Class trong HTML

Leave a Comment Cancel Reply