Làm rõ thuật ngữ (Id) và (Class) trong CSS

Cũng có khá nhiều bạn hỏi tôi về việc làm sao để phân biệt được id và class. Khi nào dùng id, khi nào dùng class trong HTML và CSS. Trong bài viết này tôi xin giải thích kỹ hơn về hai thuật ngữ này và cách dùng chúng trong quá trình viết mã HTML.
Nội dung trích xuất từ tài liệu:
Làm rõ thuật ngữ (Id) và (Class) trong CSS Làm rõ thuật ngữ (Id) và (Class) trong CSSCũng có khá nhiều bạn hỏi tôi về việc làm sao để phân biệt được id và class.Khi nào dùng id, khi nào dùng class trong HTML và CSS. Trong bài vi ết nàytôi xin giải thích kỹ hơn về hai thuật ngữ này và cách dùng chúng trong quátrình viết mã HTML.1. Id.Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id1.1 Id là gì?id hay là index(chỉ số) được dùng để xác định một đối t ượng duy nhất nào đó.Do đó trong m ột trang HTML của bạn mỗi đối t ượng chỉ có duy nhất một id,nếu có 2 đối t ượng trở lên có id gi ống nhau trong cùng một trang thì điều đó cónghĩa là trang đó của bạn không validate HTML.1.2 Id dùng khi nào?.Do mỗi trang HTML mỗi đối t ượng chỉ có thể có duy nhất một id chính vì vậyid được dùng cho những đối tượng nào mang tính duy nhất trong trang (ví dụ:khung viền (wrapper), menu chính (main menu),...).1.3. Cách dùng id. Nội dung thông tin... Trong file CSS chúng ta sẽ dùng dấu # trước tên đối tượng mà chúng ta đặtlà id.2. ClassBây giờ chúng ta tiếp tục đi tìm hiểu về thuật ngữ class v à cách sử dụng chúngtrong quá trình viết mã HTML.2.1 Class là gì?class hay còn gọi là lớp dùng để chỉ một lớp các đối t ượng có chung các thuộctính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậytrong một trang HTML của bạn có thể có rất nhiều các đối t ượng có thể thuộcmột class nào đó. Ví dụ sau đây sẽ minh chứng cho các bạn về tính thừa kế v àviệc định nghĩa nhiều đối t ượng cùng thuộc một class nào đó.Giả sử rằng chúng ta có một trang HTML nh ư sau: Nội dung thông tin... Nội dung thông tin 2... Giả sử rằng chúng ta định nghĩa các thuộc tính của class=info nh ư sau:.info { margin: 5px 10px; padding: 10px; border: 1px solid #F0F0F0;}Bây giờ bạn muốn định nghĩa cho thẻ div nằm trong phần author có m àu nền làmàu đen và chữ là màu trắng thì ta chỉ cần định nghĩa thêm hai thuộc tính nàycòn thẻđã thừa kế các thuộc tính margin, padding, border của class ở tr ên. Phần địnhnghĩa thêm như saudiv.author .info { background-color: #000000; color: #FFFFFF;}Khi đó đối tượng trong phần author sẽ bao gồm các thuộctính sau.div.author .info { margin: 5px 10px; padding: 10px; border: 1px solid #F0F0F0; background-color: #000000; color: #FFFFFF;}Qua ví dụ trên chúng ta c ũng thấy được việc sử dụng nhiều đối t ượng thuộccùng một class trong c ùng một trang như thế nào.2.1 Dùng class khi nào?Do tính chất của class đã trình bày ở trên có thể suy ra rằng nế u khi nào chúngta muốn nhiều đối t ượng dùng chung một số thuộc tính nào đó (vd: color,background, border,...) thì chúng ta nên g ộp chúng vào chung một class.2.3 Cách dùng class.Trong HTML chúng ta dùng như sau: Nội dung thông tin... Nội dung thông tin... Dòng n ổi bậtTrong file CSS chúng ta đặt dấu . trước tên của đối tượng mà chúng ta đặt làclass.