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>

Xem ví dụ 1

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>

Xem ví dụ 2

Có thể bạn sẽ thích…

Bình luận

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *