Trong bài số 14, các bạn đã tìm hiểu khái niệm về CSS. Để hiểu rõ hơn và phân biệt được sự khác nhau giữa thuộc tính id và class, trong bài này tôi sẽ hướng dẫn các bạn cách sử dụng thuộc tính class trong một số thẻ HTML cơ bản.
Thuộc tính class trong thẻ HTML được sử dụng để định kiểu cho các thẻ HTML có dùng chung định dạng. Có nhiều cách khai báo và sử dụng thuộc tính class trong thẻ HTML, tôi sẽ hướng dẫn các bạn sử dụng 02 cách đơn giản:
- Khai báo và sử dụng trong cùng 1 file
- Khai báo và sử dụng trên nhiều file khác nhau.
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>http://www.hoclaptrinhweb.net/</title>
<style>
span.ghichu {font-size:200%; font-style:italic; color:blue;}
span.quangcao {font-size:150%; font-style:blog; color:red;}
</style>
</head>
<body>
<h1>Học lập trình web tại: <span class="ghichu">hoclaptrinhweb.net</span></h1>
<p>Học lập trình căn bản tại <span class="quangcao">www.kythuatlaptrinh.xyz</span></p>
</body>
</html>
Kết quả:
 |
| Sử dụng thuộc tính class trong thẻ HTML |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>http://www.hoclaptrinhweb.net/</title>
<style>
div.thanhpho {
background-color:#0099CC;
color:#309;
margin:15px;
padding:10px;
}
</style>
</head>
<body>
<div class="thanhpho">
<h2>Hà Nội</h2>
<p>Hà Nội là thủ đô của nước Cộng hoà Xã hội chủ nghĩa Việt Nam.</p>
</div>
<div class="thanhpho">
<h2>TP. Hồ Chí Minh</h2>
<p>TP. Hồ Chí Minh là thành phố lớn nhất Việt Nam xét về quy mô dân số và mức độ đô thị hóa, và là một trong những trung tâm văn hóa, giáo dục quan trọng của cả nước.</p>
</div>
</body>
</html>
# Trong ví dụ trên, các bạn có thể thấy cách sử dụng khá giống với class (lớp) trong lập trình hướng đối tượng với phương châm: "viết một lần, sử dụng nhiều lần"
Kết quả:
 |
| Class có tên thanhpho được sử dụng ở hai vị trí khác nhau |
0 on: "[HTML] Bài 18: Sử dụng thuộc tính class trong thẻ HTML"