A A A

CSS: Sự khác biệt giữa ID và CLASS

CSS: Sự khác biệt giữa ID và CLASS

Trong lĩnh vực Webdesign nói chung và Wordpress design nói riêng. Hiểu được khái niệm ID và Class cả là vấn đề nếu không phân biệt được giữa chúng, có rất nhiều các bài viết trên blogs và vô số các câu hỏi được đặt ra về vấn đề này và trên nhiều diễn đàn đã xảy cuộc chiến nảy lửa giữa các thành viên vẫn không thống nhất được câu trả lời.

Và… trong bài viết này tui cố gắng đưa ra được sự khác biệt đó rõ ràng trong quá trình bận rộn với CSS và XHTML, hy vọng giúp bạn một phần nào đó để hiểu rõ về chúng.

Sự khác biệt này không phải nằm trong CSS mà là trong HTML và trong DOM.

Khái niệm:

Trước tiên là khái niệm ID và class:

  • ID = Xác định một đối tượng (ID=Identification) và chỉ một đối tượng duy nhất. (W3C định nghĩa ID là “duy nhất xác định một đối tượng “)
  • Class = Có nhiều đối tượng trong một lớp

ID = A person’s Identification (ID) is unique to one person. (The W3C defines class ID as “a unique identifier to an element”)

Class = There are many people in a class.

Trong CSS:

  • ID được ký hiệu bằng dấu thăng “#” trước tên đối tượng và
  • Class được ký hiệu bằng dấu chấm “.” trước tên đối tượng.

Ví dụ

Quá nhiều đối với khái niệm, bây giờ ta làm rõ 2 thuật ngữ đó bằng ví dụ sau:

Ví dụ cách dùng ID:

IDs trong CSS tương tự như class nhưng sử dụng để xác định đối tượng trong một trường hợp đặc biệt. Dưới đây là ví dụ cho thuật ngữ ID:

Xem đoạn mã CSS[1]:

p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }

Đoạn mã HTML[1]:

<p id="ExampleID1">Đây là đoạn trích với tên đối tượng ID là "exampleID1" và định nghĩa mầu nền bằng color mầu trắng</p>

<p id="ExampleID2">Đây là đoạn trích với tên đối tượng ID là "exampleID2" và định nghĩa chữ bằng text transform chuyển chữ thường sang viết hoa. </p>

Kết quả hiển thị trên browser [1]:

Đây là đoạn trích với tên đối tượng ID là “exampleID1″ và định nghĩa mầu nền bằng color mầu trắng

Đây là đoạn trích với tên đối tượng ID là “exampleID2″ và định nghĩa chữ bằng text transform chuyển chữ thường sang viết hoa.

Ví dụ cách dùng CLASS:

Sử dụng class đơn giản hơn. Ta thử xem ví dụ sau:

Mã CSS[2a]:

p.first{ color: blue; }
p.second{ color: red; }

Đoạn mã HTML[2]:

<html>
<body>
<p>Đây là đoạn trích viết bình thường .</p>

<p class="first">Đây là đoạn trích sử dụng class p.first trong CSS code!</p>
<p class="second">Đây là đoạn trích sử dụng class p.second CSS code!</p>
...

Kết quả hiển thị trên browser [2]:

Đây là đoạn trích viết bình thường .

Đây là đoạn trích sử dụng class p.first trong CSS code!

Đây là đoạn trích sử dụng class p.second trong CSS code!

Do tính chất của class đã trình bày ở trên, ta có thể gộp nhiều đối tượng cho chúng dùng chung một số thuộc tính, theo ví dụ ta gộp chúng vào chung một class <p> với thuộc tính: color, font-size,…Vẫn sử dụng đoạn mã HTML [2],

nhưng CSS với đoạn mã sau [2b]:

p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }

Bây giờ so sánh 2 kết quả hiển thị trên browser với đoạn mã CSS [2a] & [2b] thấy được sự khác nhau của chúng.

Đây là đoạn trích viết bình thường .

Đây là đoạn trích sử dụng class p.first trong CSS code!

Đây là đoạn trích sử dụng class p.second trong CSS code!

Hy vọng bạn có thể hiểu được sự khác nhau giữa ID và class trong CSS và HTML, cũng không tránh được sơ suất trong soạn bài, mong đóng góp ý kiến của bạn.

Chúc bạn thành công!

LEAVE A REPLY | VIẾT LỜI BÌNH