NỘI DUNG BÀI VIẾT

• Giới thiệu
• Phân biệt class và id trong HTML
• Dùng thuộc tính id trong JavaScript
• Đánh dấu trang bằng ID và Link
• Kết luận

Trong HTML, thuộc tính id trong HTML được dùng để xác định một id duy nhất cho một phần tử HTML [giá trị phải là duy nhất trong file HTML]. Giá trị id có thể được dùng trong CSS hoặc JavaScript để thực hiện một tác vụ nhất định cho phần tử duy nhất với giá trị id đó.

Trong CSS, để chọn phần tử có id nào đó, dùng kí tự thăng [

 /* Tạo kiểu cách cho thuộc tính id "tiêuđề" */
 #tiêuđề {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
 }
 
 /* Tạo kiểu cách cho tất cả phần tử bằng lớp "thànhphố" */
 .thànhphố {
  background-color: tomato;
  color: white;
  padding: 10px;
 }

 
 
 
Thành phố của tôi
 
 
 
Hà Nội
 
Hà Nội là thủ đô của Việt Nam.
 
 
Paris
 
Paris là thủ đô của Pháp.

  


 
 
Tokyo
 
Tokyo là thủ đô của Nhật Bản.

Ví dụ dùng CSS để tạo kiểu cách cho phần tử với id “tiêu đề”

 #tiêuđề {
   background-color: lightblue;
   color: black;
   padding: 40px;
   text-align: center;
 }
 
 
Đây là tiêu đề

Lưu ý:

• Thuộc tính id có thể dùng với bất kì phần tử HTML nào.
• Giá trị id có phân biệt chữ thường và chữ hoa.
• Giá trị id phải chứa ít nhất 1 kí tự và không chứa khoảng trắng.

Phần tử HTML chỉ có thể có một id duy nhất thuộc về phần tử đó, trong khi 

 /* Tạo kiểu cách cho thuộc tính id "tiêuđề" */
 #tiêuđề {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
 }
 
 /* Tạo kiểu cách cho tất cả phần tử bằng lớp "thànhphố" */
 .thànhphố {
  background-color: tomato;
  color: white;
  padding: 10px;
 }

 
 
 
Thành phố của tôi
 
 
 
Hà Nội
 
Hà Nội là thủ đô của Việt Nam.
 
 
Paris
 
Paris là thủ đô của Pháp.

  


 
 
Tokyo
 
Tokyo là thủ đô của Nhật Bản.

 /* Tạo kiểu cách cho thuộc tính id "tiêuđề" */
 #tiêuđề {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
 }
 
 /* Tạo kiểu cách cho tất cả phần tử bằng lớp "thànhphố" */
 .thànhphố {
  background-color: tomato;
  color: white;
  padding: 10px;
 }

 
 
 
Thành phố của tôi
 
 
 
Hà Nội
 
Hà Nội là thủ đô của Việt Nam.
 
 
Paris
 
Paris là thủ đô của Pháp.
 
 
Tokyo
 
Tokyo là thủ đô của Nhật Bản.

Đi tới Chương 4

Hoặc gắn đường dẫn vào dấu trang này từ một trang khác.

Đi tới Chương 4

Qua đây là một số chia sẻ về thuộc tính id trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.