HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
p br pre
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP 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.

test php

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.

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.

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

Bài viết này được đăng tại [free tuts .net]

  • 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.

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộ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ẻ title 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ẻ base trong 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ẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

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

Thẻ noscript trong HTML

Thẻ noscript trong HTML

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

Top