Sử dụng attribute class
Attribute class thường được sử dụng để trỏ đến tên class trong style sheet. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác các element có tên class cụ thể.
Trong ví dụ sau, chúng ta có ba element <div> có attribute class với giá trị là "city". Tất cả ba element <div> sẽ được style như nhau theo class .city trong thẻ <style>:
<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>Luân Đôn</h2> <p>Luân Đôn là thủ đô của Anh</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris là thủ đô của Pháp.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản.</p> </div> </body> </html>Trong ví dụ sau, chúng ta có hai element <span> có attribute class với giá trị là "note". Tất cả hai element <span> sẽ được style như nhau theo class .note trong thẻ <style>:
<!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>Đây là tiêu đề <span class="note">quan trọng</span>.</h1> <p>Đoạn văn với một số văn bản <span class="note">quan trọng</span>.</p> </body> </html>
Cú pháp của class
Để tạo một class; viết một ký tự dấu chấm (.), theo sau là tên class. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}.
Ví dụ
<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class="city">Luân Đôn</h2> <p>Luân Đôn là thủ đô của nước Anh.</p> <h2 class="city">Paris</h2> <p>Paris là thủ đô của Pháp.</p> <h2 class="city">Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản.</p> </body> </html>Sử dụng nhiều class
Các HTML element có thể thuộc nhiều hơn một class.
Để xác định nhiều class, hãy tách tên lớp bằng một khoảng trắng, ví dụ: <div class = "city main">. Element sẽ được style theo tất cả các class được chỉ định.
Trong ví dụ sau, <h2> element đầu tiên thuộc về cả class city lẫn class main, và sẽ nhận các kiểu CSS từ cả hai lớp.
Ví dụ
<h2 class="city main">Luân Đôn</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2>Các element khác nhau có thể chia sẻ cùng một class
Các HTML element khác nhau có thể trỏ đến cùng một tên class. Trong ví dụ sau, cả <h2> và <p> đều trỏ đến class "city" và sẽ chia sẻ cùng một style:
<h2 class="city">Paris</h2> <p class="city">Paris là thủ đô của Pháp</p>
Sử dụng attribute class trong Javascript
Tên class cũng có thể được JavaScript sử dụng để thực hiện các tác vụ nhất định cho các element cụ thể.
JavaScript có thể truy cập các element có tên class cụ thể bằng phương thức getElementsByClassName ().
Ví dụ
<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script>