Bài 19: Sử dụng thuộc tính class trong HTML
Sử dụng class cho các phần tử Block
Thuộc tính class của thẻ HTML kết hợp với định kiểu (style) có thể định dạng “giống nhau” cho các thẻ <div> :
Hà Nội
Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.
Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.
Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.
Hồ Chí Minh
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, đồng thời cũng là đầu tàu kinh tế, 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.
Hiện nay, thành phố Hồ Chí Minh là thành phố trực thuộc Trung ương cùng với thủ đô Hà Nội là đô thị loại đặc biệt của Việt Nam.
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body><div class=“cities”>
<h2>Hà Nội</h2>
<p>Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.</p>
<p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p>
<p>Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.</p>
</div>
<div class=“cities”>
<h2>Hồ Chí Minh</h2>
<p>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, đồng thời cũng là đầu tàu kinh tế, 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>
<p>Hiện nay, thành phố Hồ Chí Minh là thành phố trực thuộc Trung ương cùng với thủ đô Hà Nội là đô thị loại đặc biệt của Việt Nam.</p>
</div>
</body>
</html>
Sử dụng class cho các phần tử Inline
Thuộc tính class trong HTML có thể định kiểu giống nhau cho các thẻ <span>:
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {font-size:120%;color:red;}
</style>
</head>
<body><h1>My <span class=“note”>Important</span> Heading</h1>
<p>This is some <span class=“note”>important</span> text.</p></body>
</html>
