Thiết Kế Web

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

Trong CSS có hai trường phái (Nói vậy nó Sang) là Id và Class. Tuy chức năng của hai bạn này như nhau, nhưng giữa chúng có sự khác biệt rất rõ nét. Và nếu như chúng ta biết sử …

Trong CSS có hai trường phái (Nói vậy nó Sang) là Id và Class. Tuy chức năng của hai bạn này như nhau, nhưng giữa chúng có sự khác biệt rất rõ nét. Và nếu như chúng ta biết sử dụng chúng một cạch hợp lý thì vậy layout sẽ đặt đến trình độ cao và chuyên nghiệp hơn. Đặc biệt nó rất tốt cho việc đánh giá website sau này.

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 đó. 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ụ: khung viền (wrapper), menu chính (main menu),…).

1.3. Cách dùng id

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

Ví dụ:

2. Class

Bâ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úng trong 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 trong mộ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 class nào đó.

Ví dụ:

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ùng một class trong cùng một trang như thế nào.

153-css.gif

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 ta 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 file CSS chúng ta đặt dấu “.” trước tên của đối tượng mà chúng ta đặt là class.

Qua bài viết này hy vọng các bạn sẽ biết cách phân biệt giữa id và class để có thể sử dụng hợp lý trong layout website. Chúc các bạn thành công !

Thẻ:, ,
comments powered by Disqus
Powered by HTH Company