WebVN Cộng đồng web Việt Nam
Class là gì?
Class là một thuộc tính trong HTML và hầu hết các thẻ HTML đều hỗ trợ thuộc tính class.
Vậy, class dùng để làm gì? Như bạn đã được làm quen với class trong bài “CSS trong HTML“, class được sử dụng cho việc lên giao diện cho website. Bạn sẽ hiểu thêm về class thông qua những ví dụ bên dưới.
Dùng class trong các thẻ block
Thuộc tính class có thể sử dụng trong thẻ <div> để lên các khối giao diện giống nhau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <style> div.cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>Luân Đôn là thủ đô của Anh, đồng thời là vùng đô thị lớn nhất UK và cũng là khu vực đô thị rộng thứ hai về diện tích trong Liên minh Châu Âu (EU). </p> <p>Luân Đôn do đế chế La Mã đặt nền móng đầu tiên với bề dày lịch sử hơn 2.000 năm và tên gọi thời đầu là Londinium (Luân Đôn La Mã).</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris là thành phố thủ đô của nước Pháp, cũng là một trong ba thành phố phát triển kinh tế nhanh nhất thế giới cùng Luân Đôn và New York và cũng là một trung tâm hành chính của vùng Île-de-France. </p> <p>Nằm ở phía bắc nước Pháp, khu vực trung tâm của châu Âu, Paris được xây dựng hai bên bờ sông Seine với tâm là đảo Île de la Cité. Đây cũng là nơi hợp lưu của sông Seine và sông Marne.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo là thủ đô và một trong 47 tỉnh của Nhật Bản, thủ đô Tōkyō nằm ở phía đông của đảo chính Honshū. Trong tiếng Nhật, Tokyo có nghĩa là "Kinh đô ở phía đông".</p> <p>Không chỉ là một đô thị riêng lẻ mà ngày nay Tokyo là trung tâm của Vùng thủ đô Tōkyō. Trung tâm hành chính của Tokyo đặt ở khu Shinjuku.</p> </div> </body> </html> |
Dùng class trong các thẻ inline
Thuộc tính class có thể sử dụng trong thẻ <span> để trang trí chữ cho đoạn văn bản:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <style> span.note {font-size:120%;color:red;} </style> </head> <body> <h1>Đây là đề mục <span class="note">quan trọng</span> trong trang</h1> <p>Đây là phần nội dung <span class="note">quan trọng</span> trong trang.</p> </body> </html> |
