Class và ID

Class và ID

  8:12 AM    Người

---

CSS dùng để định dạng một thành phần HTML nào đó, nhưng nếu trong một trang web thành phần HTML đó sẽ có những định dạng khác nhau thì sẽ như thế nào trên trình duyệt.
Ví dụ:
Định dạng cho H1{color:blue; font-size: 12px}
như vậy tất cả các H1 đều có chữ màu blue và cỡ chữ 12. Nhưng trong một số đoạn lại muốn H1 có màu red và yellow.
Class và ID dùng để giải quyết vấn đề này.

Cách sử dụng Class

Đặt tên Class: ".{:}
Ví dụ:
.Vidu{color:green; font-size:25px}
Thẻ Heading 1 không sử dụng Class

Thẻ Heading 1 (không sử dụng class)

Thẻ Heading 1 sử dụng Class (<h1 class="vidu"> Thẻ Heading 1 sử dụng class <h1>)

Thẻ Heading 1 sử dụng class

Cách sử dụng ID

Đặt tên ID: "<#Tên ID>{:}
Ví dụ:
#ViduID{color:red; font-size:25px}
Thẻ Heading 1 sử dụng ID(<h1 id="viduID"> Thẻ Heading 1 sử dụng ID <h1>)

Thẻ Heading 1 sử dụng ID

Khác nhau giữa Class và ID

• ID là duy nhất, còn Class có nhiều
• Có thể sử dụng nhiều class cho một thành phần, còn ID thì chỉ có dùng 1