HTML CĂN BẢN
HTML5
CANVAS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT

Phân biệt ID và Class trong HTML

Trong bài này mình sẽ hướng dẫn cách sử dụng ID và class trong HTML, đây là hai thuộc tính rất quan trọng, nó giúp chúng ta kết hợp với CSS một cách dễ dàng.

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiên, với hai thuộc tính ID và Class thì 100% các thẻ đều có thể sử dụng. ID giống như mã số chứng minh của các bạn, còn class giống như giới tính của các bạn vậy đó. Chi tiết thế nào thì chúng ta cùng tìm hiểu ngay nhé.

1. ID trong HTML là gì?

ID trong HTML là một chuỗi xác định và duy nhất, dùng để gắn cho một thẻ HTML nào đó. Trong một file HTML thì ID là duy nhất, nghĩa là bạn không thể đặt 1 ID cho 2 thẻ HTML.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Việc đặt tên ID nên tuân theo quy tắc sau:

  • Tên đặt tiếng Anh và không dấu, không có khoảng trắng, không có ký tự đặc biệt.
  • Đặt tên có ý nghĩa, giúp nhìn vào ID là ta biết được thẻ đó có công dụng là gì.

Ví dụ: Mình tạo một hộp thoại hiển thị mã giảm giá, và mình sẽ dùng một thẻ div để bao quanh toàn bộ hộp thoại đó. Sau đó mình cũng không quên đặt ID cho nó là "discount_wrapper".

<div id="discount_wrapper">

</div>

Lúc này, nếu bạn muốn sử dụng CSS để chỉnh cho thẻ này thì sử dụng cú pháp sau:

Demo RUN
#discount_wrapper{
    background:red;
    height: 300px
}

Tóm lại, muốn sử dụng CSS để truy vấn đến ID thì sử dụng cú pháp #ten_id.

2. Class trong HTML là gì?

Nếu ID là duy nhất trong một file tài liệu HTML thì class thì lại khác, nó được dùng để thiết lập một lớp các đối tượng có chung một đặc điểm. Vì vậy, bạn có thể gắn một class cho nhiều thẻ HTML khác nhau.

Việc đặt tên cho class cũng nên tuân thủ theo quy tắc mà mình đã hướng dẫn trong phần 1 nhé.

Ví dụ: Mình muốn hiển thị danh sách bài viết, và mỗi bài viết mình sẽ gọi nó là một block. Như vậy, nếu có 100 bài thì mình sẽ cần đến 100 blocks. Nếu chúng ta sử dụng ID để đặt cho 100 blocks đó thì rất khó. Vì vậy, ta sẽ đặt một class cho 100 blocks, và ta chỉ cần viết CSS cho class đó là 100 block kia sẽ được áp dụng CSS ngay.

<div class="post">
    Post 1
</div>
<div class="post">
    Post 2
</div>
<div class="post">
    Post 3
</div>
<div class="post">
    Post 4
</div>
<div class="post">
    Post 5
</div>
<div class="post">
    Post 6
</div>

Trong CSS mình sẽ viết như sau:

Demo RUN
.post{
    background:red;
    height: 100px;
    margin: 20px;
}

Như vậy, chúng ta sử dụng dấu . cho class và dấu # cho ID.

3. Khi nào sử dụng ID và khi nào sử dụng class?

Đây là câu hỏi mà rất nhiều bạn đã hỏi mình. Để trả lời thì bạn phải xem lại hai khái niệm mà mình đã trình bày ở trên.

  • ID là duy nhất trong một tập tài liệu HTML. Vì vậy, bạn nên đặt nó nếu cấu trúc trang web chỉ tồn tại một vị trí mà thôi, tức CSS không có tính kế thừa.
  • Class thì khác, có thể gắn class cho nhiều thẻ HTML khác nhau. Vì vậy, bạn nên sử dụng trong trường hợp muốn các thẻ HTML khác nhau có thể kế thừa CSS của nhau.

Qua bày này mình đã hướng dẫn xong cách sử dụng ID và class trong HTML. Đây là vấn đề khá quan trọng, nó là tiền đề để các bạn học những bài tiếp theo đấy nhé. Hãy xem thật kỹ, nếu có thắc mắc gì thì hãy bình luận để mình giải đáp.

Bình luận

Cùng chuyên mục:

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ html ...

Thẻ select trong HTML

Thẻ select trong HTML

Cách sử dụng thẻ html ...

Thẻ input trong HTML

Thẻ input trong HTML

Cách sử dụng thẻ html ...

Thẻ textarea trong HTML

Thẻ textarea trong HTML

Cách sử dụng thẻ html ...

Thẻ button trong HTML

Thẻ button trong HTML

Cách sử dụng thẻ html ...

Thẻ option trong HTML

Thẻ option trong HTML

Cách sử dụng thẻ html ...

Thẻ optgroup trong HTML

Thẻ optgroup trong HTML

Cách sử dụng thẻ html ...

Thẻ fieldset trong HTML

Thẻ fieldset trong HTML

Cách sử dụng thẻ html ...

Top