Home » CSS » [CSS Tutorial] Bài 8: Class và id

[CSS Tutorial] Bài 8: Class và id

This entry is part 8 of 9 in the series CSS

Trong các bài trước, chúng ta đã tìm hiểu về các thuộc tính CSS áp dụng cho các thẻ HTML như h1, h2, p,….

Tuy nhiên, việc áp dụng này là áp dung cho tất cả các thẻ HTML cùng loại. Giả sử muốn áp dụng color: blue cho thẻ p thứ nhất và áp dụng color:red cho thẻ p thứ hai là không thể được.

Do đó, classid ra đời giúp bạn có thể áp dụng CSS cho bất kì phần tử nào mình muốn.

class là gì?

Class dịch theo nghĩa tiếng Việt có nghĩa là lớp. Trong CSS, class dùng để xác định một nhóm nhiều phần tử.

Để hiểu rõ hơn, ta tìm hiểu  ví dụ sau.

Đầu tiên, tao trang HTML có nội dung như phía dưới.

Ta thấy, ta sử dụng 4 thẻ <li></li> với 2 class là redtext bluetext. Trong đó, redtext sẽ định dạng chữ có màu đỏ và bluetext sẽ định dạng chữ có màu xanh.

Khi đó, CSS cần viết như sau:

Nhận xét: để chỉnh định một class trong CSS, ta dùng kí tự dấu chấm “.” ngay trước tên class.

id là gì?

id cũng dùng để định danh phần tử html nhưng chỉ dùng để định danh một phần tử duy nhất.

Ví dụ: Tạo trang HTML như sau:

Khi đó, trong CSS để định dạng ta dùng dấu “#” ngay trước tên id.

class và id khác nhau như thế nào?

class được sử dụng nhiều lần còn id duy nhất. Đối với các thành phần như logo, header thường xuất hiện một lần duy nhất nên ta dùng id.

Ngoài ra, class không phân biệt chữ in hoa và in thường nhưng id lại phân biệt in hoa và in thường.

Ví dụ: id= “RedText” sẽ khác với id= “redtext” nhưng class= “RedText” với class= “redtext” là một.

 

Source code demo class Source code demo id

 

Series Navigation<< [CSS Tutorial] Bài 7: Link[CSS Tutorial] Bài 9: div và span >>
Share
Share
Free WordPress Themes - Download High-quality Templates