💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 31 tháng 5 năm 2026
Sử dụng Class | Hướng dẫn và bài tập
📌
Kết luận
Dùng .tên-class để áp dụng cùng một phong cách cho nhiều phần tử
📝 Mã thực tế tại đây
<p class="highlight">Văn bản</p>
<style>.highlight { background-color: yellow; }</style>Khác biệt giữa Class và ID
| Selector | Cách viết | Đặc điểm |
|---|---|---|
| Class | .highlight | Có thể dùng cho nhiều phần tử |
| ID | #main | Chỉ dùng duy nhất 1 lần trên mỗi trang |
Tổng kết
- Áp dụng phong cách bằng Class (.tên)
- Dùng ID cho các mục đích của JavaScript
- Một phần tử có thể có nhiều Class cùng lúc
Hãy thử trong phần bài tập
Tạo class .highlight với nền màu vàng và áp dụng cho thẻ p nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Tạo class .highlight với nền vàng và áp dụng nó cho thẻ p.
Gợi ý khi gặp khó khăn
.highlight { background-color: yellow; }