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
-
Những stt cảm động viết cho người yêu cũ
2 ngày 1 -
Cách đổi font chữ Zalo trên điện thoại
2 ngày -
Code Skibidi Tower Defense mới nhất và cách đổi code lấy thưởng
Hôm qua -
Huyền Thoại Hải Tặc - Hải Tặc Đại Chiến
-
Hướng dẫn đổi ID Facebook, thay địa chỉ Facebook mới
2 ngày -
Chào tháng 6: Câu nói hay nhất về tháng 6, stt tháng 6 tràn ngập yêu thương
Hôm qua 2 -
Cách khôi phục bài viết đã ẩn trên Facebook bằng điện thoại, máy tính
Hôm qua 1 -
Top 10+ trang web tốt nhất để tải phụ đề cho phim
2 ngày -
Chuyển từ cơ số 2 sang cơ số 16
Hôm qua -
Top 9 phần mềm giả lập PC trên Android
Hôm qua