Thuộc tính class trong HTML
Class trong HTML là gì? Cách dùng thẻ class trong HTML như thế nào? Hãy cùng Quantrimang.com tìm hiểu nhé!
Thuộc tính class trong HTML
Thuộc tính clas trong HTML được dùng để xác định một hoặc nhiều tên class cho thành phần HTML. Tên class có thể được dùng bởi CSS và JavaScript để thực hiện một số nhiệm vụ cho thành phần HTML. Bạn có thể dùng class này trong CSS với một class cụ thể, viết ký tự dấu chấm (.), theo sau là tên của class để chọn các phần tử.
- Một thuộc tính class có thể được xác định trong thẻ <style> hoặc trong một file riêng bằng ký tự (.).
- Trong một tài liệu HTML, bạn có thể dùng chung tên thuộc tính class cho các nhân tố khác nhau.
Ví dụ dùng CSS để tạo kiểu cho tất cả các phần tử có tên lớp là “thành phố”
<style>
.thành phố {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="thành phố">Hà Nội</h2>
<p>Hà Nội là thủ đô của Việt Nam.</p>
<h2 class="thành phố">Paris</h2>
<p>Paris là thủ đô của Pháp.</p>
<h2 class="thành phố">Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản.</p>
Kết quả hiển thị sẽ như dưới đây.
Thuộc tính class áp dụng cho nhiều phần tử
Lưu ý:
- Thuộc tính
class
có thể dùng với bất kì phần tử HTML nào. - Tên lớp có phân biệt giữa chữ viết hoa và viết thường.
Dùng thuộc tính class trong JavaScript
JavaScript có thể truy cập các phần tử có tên lớp nhất định bằng getElementsByClassName()
Ví dụ khi người dùng click vào một nút, ẩn tất cả các phần tử có tên lớp là “thành phố”.
<script>
function myFunction() {
var x = document.getElementsByClassName("thành phố");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Sử dụng nhiều lớp trong HTML
Các phần tử HTML có thể dùng nhiều tên lớp, mỗi tên lớp cách nhau một khoảng trắng. Ví dụ có thể tạo kiểu cho phần tử bằng lớp “thành phố” và lớp “lớn”.
<h2 class="thành phố lớn">London</h2>
<h2 class="thành phố">Paris</h2>
<h2 class="thành phố">Tokyo</h2>
Cùng một lớp nhưng thẻ khác nhau
Các thẻ khác nhau như <h2>
hay <p>
có thể dùng cùng một tên lớp (và có kiểu cách giống nhau).
<h2 class="thành phố">Hà Nội</h2>
<p class="thành phố">Hà Nội là thủ đô của Việt Nam.</p>
Tóm lại những điều cần ghi nhớ về class HTML:
- Class là một thuộc tính chỉ định một hoặc nhiều tên class cho một thành phần HTML.
- Thuộc tính class có thể được dùng trên thành phần HTML bất kỳ.
- Tên class có thể được dùng bởi CSS và JavaScript để triển khai những tác vụ nhất định cho các thành phần bằng tên class cụ thể.
Bài trước: Phần tử khối và nội dòng trong HTML
Bài sau: Thuộc tính id trong HTML
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

- Tạ Thị Hải YếnThích · Phản hồi · 2 · 13/07/20

Cũ vẫn chất
-
eSIM là gì? Đây là tất cả mọi thứ bạn cần biết!
Hôm qua -
Công thức tính số số hạng, công thức tính tổng số số hạng
Hôm qua 2 -
Cách mua hàng trên TikTok Shop đầy đủ nhất
Hôm qua 1 -
Cách xóa bộ nhớ đệm Telegram điện thoại, máy tính
Hôm qua -
Xịn sò hay xịn xò là đúng chính tả? Có đến 90% người dùng bị sai
Hôm qua -
20 phần mềm giả lập Android tốt nhất cho Windows 2025
Hôm qua 13 -
11 trang web xem video giống YouTube
Hôm qua 2 -
5 phần mềm xem video miễn phí tốt nhất trên máy tính
Hôm qua 1 -
Hướng dẫn cài Google Chrome trên hệ điều hành Ubuntu
Hôm qua -
Hướng dẫn vào Deep Web cho người mới
Hôm qua