12. ID và Class trong HTML

 


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 đó.

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 nên đặt 1 ID cho 2 thẻ HTML.

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

  • Tên đặt 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".

1
2
3
<style>
    #discount_wrapper{
        background:yellow;
        height: 30px
    }
</style>

<div id="discount_wrapper"> div1</div>
<div>div2</div>

Kết quả chỉ có div có id="discount_wrapper" mới có hiệu ứng css 




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ó 10 bài thì mình sẽ cần đến 10 div. Nếu chúng ta sử dụng ID để đặt cho 10 div đó thì lâu . Vì vậy, ta sẽ đặt 1 class cho 10 div, và ta chỉ cần viết CSS cho class đó là 10 div kia sẽ được áp dụng CSS ngay.

<style>
  .post1{
      background:yellow;
      height: 30px
  }
  .post2{
      background:grey;
      height: 30px
  }
</style>

<div class="post1">div 1</div>
<div class="post2">div 2</div>
<div class="post1">div 3</div>
<div class="post2">div 4</div>



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.















Nhận xét