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

Để đăng nhập nhiều tài khoản Gmail cần phải cài đặt hỗ trợ hoặc dùng nhiều trình duyệt khác nhau. Tuy nhiên, tính năng mới của Google Mail giúp người dùng có thể vào nhiều tài khoản Gmail trên trình duyệt duy nhất. 1. Id Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id 1.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 đó.
Nội dung trích xuất từ tài liệu:
Phân biệt ID và Class trong CSS Phân biệt ID và Class trong CSSĐể đăng nhập nhiều tài khoản Gmail cần phải cài đặt hỗ trợ hoặc dùng nhiều trìnhduyệt khác nhau. Tuy nhiên, tính năng mới của Google Mail giúp người dùng cóthể vào nhiều tài khoản Gmail trên trình duyệt duy nhất.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ậy idđược dùng cho những đối tượng nào mang tính duy nhất trong trang (ví dụ: khungviền (wrapper), menu chính (main menu),...).css trong thiết kế web1.3. Cách dùng idNộ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 đặt là id2. 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ộc tí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ậy trongmột trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một classnào đó. Ví dụ sau đây sẽ minh chứng cho các bạn về tính thừa kế và việc địnhnghĩ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ày cònthẻđã thừa kế các thuộc tính margin, padding, border của class ở trên. Phần định nghĩathêm như sau:div.author .info {background-color: #000000;color: #FFFFFF;}Khi đó đối tượngtrong phần author sẽ bao gồm các thuộc tí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ộc cùngmột class trong cùng một trang như thế nào.2.2 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úng tamuố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 classTrong 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.Chúc các bạn thành công.Nguồn tin cssYeah.com