Tìm hiểu sự khác nhau giữa thuộc tính ID và Class CSS

Bạn đang tìm hiểu về HTML thì bạn không thể không quan tấm đến việc sử dụng các thuộc tính. Khi làm web với HTML, việc sử dụng thuộc tính ID và Class CSS là việc hầu như thường xuyên. Để hiểu rõ hơn về tác dụng và chức năng, cũng như sự khác nhau của ID và Class CSS, hãy cùng Mẫu Website 24h tìm hiểu qua bài viết dưới đây.

Tìm hiểu về ID và Class CSS

Thuộc tính ID

ID hay còn gọi là Index (chỉ số): Được dùng để xác định đối tượng duy nhất nào đó. Trong một trang HTML của bạn, mỗi đối tượng sẽ có một ID nhất định, nếu có 2 đối tượng trở lên có cùng một ID trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML.

Do mỗi trang HTML, mỗi đối tưởng chỉ có một ID duy nhất, chính vì thế ID được dùng cho các đối tượng mang tính duy nhất trong một trang (ví dụ: khung viền (wrapper), menu chính (main menu),…).

Trong file CSS, ta sẽ dùng dấu “#” trước tên đối tượng mà chúng ta đặt là ID.

Thuộc tính Class

Class hay còn được gọi là lớp dùng để chỉ một lớp các đối tượng có chung thuộc tính. Những đối tượng có cùng một class sẽ có tính thừa kế lẫn nhau, chính vì thế trong một trang HTML, bạn có thể có rất nhiều đối tượng có thể có chung một class.

Do tính chất của class đã nêu trên, qua đó cho thấy rằng, nếu chúng ta muốn nhiều đối tượng có chung một thuộc tính nào đó (ví dụ như: color, border, background,…) thì chúng ta nên gộp chúng vào chung một class.

Trong một file CSS chúng ta đặt dấu ‘.” trước tên của đối tượng mà chúng ta đặt là class.

Quy tắc đặt tên id và class CSS

Nhìn chung, quy tắc đặt tên ID và Class CSS hoàn toàn giống nhau, tên của chúng chỉ được phép chứa những ký tự sau đây:

• Các ký tự là chữ cái viết thường: [a . . z]
• Các ký tự là chữ cái viết hoa: [A . . Z]
• Các ký tự là chữ số: [0 . . 9]
• Dấu gạch dưới: _
• Dấu gạch nối: –

Lưu ý: Tên id và tên class tuyệt đối không được chứa những ký tự đặc biệt (ví dụ như ! @ # $ % ^ &) và cũng không được bắt đầu bằng một ký tự là chữ số [0 . . 9]

Điểm khác nhau giữa ID và Class CSS

– Lưu ý: Thuộc tính ID và Class là 2 thuộc tính riêng biệt, vậy nên với cùng một tên thì chúng ta có thể dùng đặt tên cho ID và Class CSS

Lời kết

Trên đây là những chia sẻ của mình về thuộc tính ID và Class CSS. Hi vọng với những kiến thức Mẫu website 24h đã chia sẻ có thể giúp bạn phân biệt được hai thuộc tính này và biết cách sử dụng chúng một cách phù hợp khi thiết kế web với HTML. Cảm ơn bạn đã theo dõi đến cuối bài viết, mọi thắc mắc hãy liên hệ với chúng tôi – Dịch vụ thiết kế website hàng đầu Việt Nam. Chúc các bạn thành công!