Sự khác nhau giữa Class và ID trong CSS
ID và Class trong CSS là hai thẻ được sử dụng nhiều để khi Style dễ dàng hơn. Tuy nhiên nếu bạn là một người mới học thiết kế website sẽ rất dễ bị nhầm lẫn khi sử dụng. Bài viết này sẽ giúp bạn phân biệt sự khác nhau giữa Class và ID trong CSS.
Mục lục
Thuộc tính ID
ID Selector dùng để khai báo cho một phần tử HTML duy nhất và không sử dụng lần nào nữa trên website. Chẳng hạn như một trang web chỉ có một Header, một Footer. Lúc này chúng ta sẽ sử dụng ID cho chúng.
Khi viết trong CSS sẽ đặt dấu “#” ở phía trước.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
#header {
max-height: 100px;
}
#footer {
background: #ddd;
}
</head>
<body>
<div id="header">Phần Header</div>
<div id="main">Phần nội dung</div>
<div id="footer">Phần Footer</div>
</body>
</html>Thuộc tính CLASS
CLASS Selector dùng để khai báo cho nhiều phần tử có thể dùng chung một class. Có nghĩa là bạn có thể dùng một class nhiều lần trên website.
Khi dùng class bạn sẽ dùng dấu “.” ở phía trước
<!DOCTYPE html>
<html>
<head>
.content {
font-size: 15px;
font-family: Arial, san-serif;
}
</head>
<body>
<div class="content">Phần Header</div>
<div class="content">Phần nội dung</div>
<div class="content">Phần Footer</div>
</body>
</html>Kết luận: Thẻ ID và CLASS trong HTML và CSS rất quan trọng. Hiểu một cách đơn giản là ID dùng cho một phần tử duy nhất, còn với CLASS thì có thể sử dụng cho nhiều phần tử khác nhau. Trên đây SONGMAWEB đã giải thích khá rõ ràng sự khác biệt về 2 thuộc tính này. Chúc bạn học thiết kế web nhanh chóng!
