HTML Thuộc tính id

Sử dụng thuộc tính id


Các idthuộc tính chỉ định một id duy nhất cho một phần tử HTML (giá trị phải là duy nhất trong tài liệu HTML).

Giá trị id có thể được sử dụng bởi CSS và JavaScript để thực hiện các tác vụ nhất định cho phần tử với giá trị id cụ thể.

Trong CSS, để chọn một phần tử có id cụ thể, hãy viết ký tự băm (#), theo sau là id của phần tử:

Thí dụ
Sử dụng CSS để định kiểu một phần tử với id "myHeader":

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>
Kết quả:

Tiêu đề của tôi

Mẹo: Thuộc tính id có thể được sử dụng trên bất kỳ thành phần HTML nào .

Lưu ý: Giá trị id phân biệt chữ hoa chữ thường.

Lưu ý: Giá trị id phải chứa ít nhất một ký tự và không được chứa khoảng trắng (dấu cách, tab, v.v.).

Sự khác biệt giữa Class và ID
Một phần tử HTML chỉ có thể có một id duy nhất thuộc về một phần tử đó, trong khi một tên lớp có thể được sử dụng bởi nhiều phần tử:

Thí dụ
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>