Học HTML, Tất Cả Bài Viết, Tự Học Online

Thuộc Tính ID và Class trong HTML Là Gì? Học HTML Online


Trong HTML thuộc tính id & thuộc tính class được sử dụng để đặt tên (phân loại) các phần tử, mục đích là để tiện cho việc quản lý, định dạng các phần tử sau này. Thuộc tính id và class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML. Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện một số tác vụ nhất định cho phần tử có tên lớp đó. Trong CSS, để chọn phần tử có lớp đặc biệt, ta thêm dấu chấm (.) và sau đó điền tên lớp.

Ví dụ:

– Trang web của tôi có 100 phần tử, trong đó có 50 phần tử tôi muốn thiết lập chữ màu đỏ. Nếu dựa vào phương pháp thông thường thì chúng ta phải đến lần lượt 50 phần tử rồi thiết lập cho nó thuộc tính style với giá trị color:red

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Cách sử dụng thuộc tính class 01</p>
    <p style="color:red">Cách sử dụng thuộc tính class 02</p>
    <p>Cách sử dụng thuộc tính class 03</p>
    <p style="color:red">Cách sử dụng thuộc tính class 04</p>
    <p style="color:red">Cách sử dụng thuộc tính class 05</p>
    <p>Cách sử dụng thuộc tính class 06</p>
    <p>Cách sử dụng thuộc tính class 07</p>
    <p style="color:red">Cách sử dụng thuộc tính class 08</p>
    <p>Cách sử dụng thuộc tính class 09</p>
    <p style="color:red">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

– Tuy nhiên, nếu sau này chúng ta muốn sửa lại thành một màu khác, chẳng lẽ chúng ta phải đi đến 50 phần tử đó để chỉnh lại !? Chưa kể đến ví dụ trên chỉ có 50 phần tử, còn trường hợp hàng trăm, hàng nghìn phần tử thì sao !?

– Từ đây, thuộc tính id & thuộc tính class được sử dụng để quản lý những trường hợp như thế này, chúng ta chỉ cần phân loại các phần tử một lần duy nhất. Sau đó, nếu muốn định dạng cho phần tử thì chỉ cần định dạng cho một phần tử, các phần tử còn lại sẽ được áp dụng theo.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hello{color:red;}
    </style>
</head>
<body>
    <p>Cách sử dụng thuộc tính class 01</p>
    <p class="hello">Cách sử dụng thuộc tính class 02</p>
    <p>Cách sử dụng thuộc tính class 03</p>
    <p class="hello">Cách sử dụng thuộc tính class 04</p>
    <p class="hello">Cách sử dụng thuộc tính class 05</p>
    <p>Cách sử dụng thuộc tính class 06</p>
    <p>Cách sử dụng thuộc tính class 07</p>
    <p class="hello">Cách sử dụng thuộc tính class 08</p>
    <p>Cách sử dụng thuộc tính class 09</p>
    <p class="hello">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

Thuộc Tính ID Là Gì?

– Thuộc tính id dùng để đặt tên cho phần tử, tên này phải là duy nhất, không có trường hợp tên id của các phần tử bị trùng nhau (nếu so sánh một phần tử trong trang web giống như một người công dân Việt Nam thì tên id cũng giống như số CMND, nó dùng để xác định danh tính của phần tử)

– Để khai báo id cho một phần tử thì chúng ta đặt thuộc tính id vào bên trong thẻ mở của phần tử đó với cú pháp id=”tên id”. Sau khi đã khai báo, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên id của nó với cú pháp #tên id

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        #step{color:red;}
    </style>
</head>
<body>
    <p>Chức năng của thuộc tính id</p>
    <p id="step">Cách sử dụng thuộc tính id</p>
    <p>Tầm quan trọng của thuộc tính id</p>
</body>
</html>

Thuộc Tính Class Là Gì?

– Thật ra thì chức năng của thuộc tính class cũng gần giống với thuộc tính id, đó chính là dùng để đặt tên cho phần tử. Tuy nhiên, việc đặt tên class khác với tên id ở chỗ là với cùng một tên class thì chúng ta có thể dùng để đặt cho nhiều phần tử khác nhau (nếu so sánh một phần tử trong trang web giống như một người công dân Việt Nam thì tên class cũng giống như một cái biệt danh, mà biệt danh thì có thể dùng để đặt cho nhiều người khác nhau)

– Để khai báo class cho một phần tử thì chúng ta đặt thuộc tính class vào bên trong thẻ mở của phần tử với cú pháp class=”tên class”. Sau khi đã khai báo class, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên class của nó với cú pháp .tên class

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hello{color:red;}
    </style>
</head>
<body>
    <p>Chức năng của thuộc tính class</p>
    <p class="hello">Tầm quan trọng của thuộc tính class</p>
    <p>Cách sử dụng thuộc tính class</p>
    <p class="hello">Tìm hiểu cách đặt tên cho class</p>
    <p class="hello">Thuộc tính class là gì</p>
</body>
</html>

– Lưu ý: Một người có thể có nhiều cái biệt danh thì phần tử cũng tương tự như vậy, một phần tử có thể có nhiều tên class (nhớ thêm một dấu “khoảng trắng” nằm ngăn cách giữa các tên class)

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem Ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .nguyen{color:blue;}
        .thanh{font-size:30px;}
        .nhan{background-color:yellow;}
    </style>
</head>
<body>
    <p class="nguyen">Tài liệu học Lập Trình Web 01</p>
    <p class="nguyen thanh">Tài liệu học Lập Trình Web 02</p>
    <p class="nguyen thanh nhan">Tài liệu học Lập Trình Web 03</p>
</body>
</html>

– Phần tử <p> thứ nhất có 1 class là: nguyen

– Phần tử <p> thứ hai có 2 class là: nguyen, thanh

– Phần tử <p> thứ ba có 3 class là: nguyen, thanh, nhan

Quy tắc đặt tên id và tên class

– Quy tắc đặt tên id và tên class hoàn toàn giống nhau, chúng chỉ được phép chứa các ký tự như sau:

  • Các ký tự là chữ cái viết thường: [a . . z]
  • Các ký tự là chữ cái viết hoa: [A . . Z]
  • Các ký tự là chữ số: [0 . . 9]
  • Dấu gạch dưới: _
  • Dấu gạch nối: –

– Lưu ý: Tên id và tên class tuyệt đối không được chứa các ký tự đặc biệt (ví dụ như ! @ # $ % ^ &) và cũng không được bắt đầu bằng một ký tự là chữ số [0 . . 9]

– Dưới đây là một số ví dụ về việc đặt tên id và tên class:

Đúng:

  • H
  • Hoan
  • hoan
  • HoanTN
  • hoantn20
  • _hoan_tn
  • Hoan-TN

Sai:

  • 20hoan (sai vì bắt đầu bằng chữ số)
  • hoan^^ (sai vì có chứa các ký tự đặc biệt)

– Lưu ý: Tên id và tên class có phân biệt chữ in hoa và chữ thường, ví dụ như hoantn và HoanTN là hai cái tên hoàn toàn khác nhau.

Điểm khác nhau giữa “thuộc tính id” và “thuộc tính class”

– Dưới đây là tóm tắt một số điểm khác nhau giữa thuộc tính id & thuộc tính class.

Thuộc tính id:

  • – Một phần tử chỉ nên nhận một id.
  • – Một tên id chỉ có thể dùng để đặt cho một phần tử duy nhất.
  • – Khi muốn chọn một phần tử dựa theo id thì ta dùng cú pháp #tên id

Thuộc tính class:

  • – Một phần tử có thể nhận một hoặc nhiều class.
  • – Một tên class có thể dùng để đặt cho nhiều phần tử khác nhau.
  • – Khi muốn chọn một phần tử dựa theo class thì ta dùng cú pháp .tên class

– Lưu ý: Bởi vì “thuộc tính id” & “thuộc tính class” là hai thuộc tính riêng biệt, cho nên với cùng một cái tên thì chúng ta vẫn có thể dùng nó để đặt cho id & class.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        #hello{background-color:yellow;}
        .hello{font-size:40px;}
    </style>
</head>
<body>
    <p id="hello" class="hello">Tài liệu học Lập Trình Web</p>
</body>
</html>

Tổng Kết:

Qua bài viết này chúng ta đã biết được thuộc tính id và class là gì? Tác dụng cũng như cách sử dụng của 2 thuộc tính này.

Nếu bạn có những góp ý hay thắc mắc về bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML ^^.

About HoanTN

Cố gắng hơn nữa ....
View all posts by HoanTN →

Leave a Reply

Your email address will not be published. Required fields are marked *