Phân biệt thẻ ID và CLASS trong CSS

https://mahaveersingh.files.wordpress.com/2010/06/classes-ids3.jpg

Phân biệt thẻ ID và CLASS trong CSS

Trong CSS việc phân biệt giữa id và class thường gây nhầm lẫn cho các bạn mới học, hai thuộc tính này có sự khác biệt rõ rệt. Bài viết phân biệt thuộc tính id và class giúp bạn biết cách nhận biết sự khác nhau của hai thẻ này.

Phân biệt thẻ ID và CLASS trong CSS

Thuộc tính ID trong HTML

Thuộc tính id trong css chỉ được sử dụng để định dạng cho một đối tượng riêng và duy nhất. Ví dụ sinh viên khi vào trường học cần có một thẻ sinh viên, thẻ này không thể trùng với các thẻ khác, id cũng vậy.

Thuộc tính id được dùng để định dạng nội dung bằng css được bắt đầu bằng dấu "#"

Chú ý: Id không được viết quá dài, không dùng ký tự đặc biệt như @, %, ^... và không được bắt đầu bằng con số.

Cấu trúc thuộc tính id

Viết trong HTML

Bạn có thể đặt id trong các tag như h1, h2, h3, h4, h5, h6, div, button, textarea...

<tag id="vidu"></tag>

Viết trong css

#vidu {thuộc tính: giá trị}

Ví dụ thuoc tinh id

<html>
   <head>
       <title> Bài ví dụ </title>
   </head>
<style>
*{margin:0; padding:0}
h1.mot {background: red; color: #fff}
a.hai{background: green; color: red}
div.ba {background: black; color: #fff}
</style>
<body>
   <h1 id="mot">Thuộc tính id trong thẻ h1</h1>
   <a id="hai">Thuộc tính id trong thẻ a</a>
   <div id="ba">Thuộc tính id trong thẻ div</div>
</body>
</html>

Thuộc tính Class trong HTML

Thuộc tính class được dùng chung cho nhóm đối tượng, các thành phần giống nhau trong html. Ví dụ về thuộc tính class rất nhiều như trong một lớp học thầy giáo sẽ nhóm các bạn có cùng tên giống nhau lại với nhau, hoặc có chiều cao bằng nhau...Việc nhóm các thành phần giống nhau sẽ thuận tiện cho việc chỉnh sửa css sau này.

Giống như id bạn cũng không được đặt chữ số, ký tự đặc biệt và cũng không nên viết quá dài.

Cấu trúc thuộc tính clas

- Viết trong html

<tag class="vidu"><tag>

- Viết trong css

.vidu {thuộc tính: giá trị}

Ví dụ nhiều thẻ tag cho một class

<html>
   <head>
       <title> Bài ví dụ </title>
   </head>
<style>
*{margin:0; padding:0}
h1.vidu {background: red; color: #fff}
a.vidu {background: green; color: red}
div.vidu {background: black; color: #fff}
</style>
<body>
   <h1 class="vidu">Thuộc tính class trong thẻ h1</h1>
   <a class="vidu">Thuộc tính class trong thẻ a</a>
   <div class="vidu">Thuộc tính class trong thẻ div</div>
</body>
</html>