Loại HTML

Phân loại HTML (đặt lớp) để chúng ta có thể định nghĩa樣式 CSS cho lớp của phần tử.

Đặt cùng một樣式 cho các lớp giống nhau hoặc đặt các樣式 khác nhau cho các lớp khác nhau.

Mô hình

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London là thủ đô của Anh. 
Nó là thành phố đông dân nhất ở Vương quốc Anh, 
với khu vực đô thị hơn 13 triệu cư dân.
</p>
</div> 
</body>
</html>

Thử ngay

Các phần tử cục bộ phân loại

Thẻ <div> của HTML làCác phần tử cục bộNó có thể được sử dụng làm khay cho các thẻ HTML khác.

Đặt lớp cho thẻ <div> để chúng ta có thể đặt lớp giống nhau cho các thẻ <div> giống nhau:

Mô hình

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London là thủ đô của Anh. 
Nó là thành phố đông dân nhất ở Vương quốc Anh, 
với khu vực đô thị có hơn 13 triệu cư dân.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của khu vực Tokyo lớn,</p>
và là khu vực đô thị đông dân nhất trên thế giới.</p>
</div>
</body>
</html>

Thử ngay

Phân loại yếu tố nội bộ

Yếu tố <span> của HTML là yếu tố nội bộ, có thể được sử dụng làm容器的 văn bản.

Cài đặt lớp của yếu tố <span>, có thể thiết lập cùng một phong cách cho các yếu tố <span> tương tự.

Mô hình

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {màu:red;}
</style>
</head>
<body>
<h1>My <span class="red">Quan trọng</span> Tiêu đề</h1>
</body>
</html>

Thử ngay