Cách sử dụng ID và CLASS trong CSS.


Class và id là hai thành phần vô cùng quan trọng trong css. Nó giúp cho việc định dạng một hoặc một tập hợp các thẻ html có chung những thuộc tính như màu sắc, kích thước hay cỡ chữ... trở nên nhanh hơn và hiệu quả hơn. Việc sử dụng class và id trong css còn giúp cho việc quản lý code css trở nên dễ dàng hơn.

Phân biệt class và id trong css

- Về cơ bản class và id đều là các thuộc tính trong thẻ html  nhưng sự khác biệt là ở chỗ. Đối với id  trong một trang html thì chỉ được xuất hiện duy nhất một lần và chỉ duy nhất một làn.Trong một trang html không bao giờ được phép có 2 thẻ id trùng tên. Trong khi đó Class thì lại được gán cho mọi đối tượng có cùng lớp (class), các đối tượng có cùng class sẽ chịu sự điều khiển của CSS cho Class đó.
- Trong bài viết này ta sẽ tìm hiểu tại sao và những nơi nào thì dùng ID hay Class.
- Trước tiên ta hãy xem qua cách sử dụng hai thẻ ID và Class trong một đoạn

<div id="container">
Cách sử dụng id
</div>

<div class="module">
Cách sử dụng class1
</div>
<div class="module">
Cách sử dụng class2
</div>
- Qua hai đoạn HTML chúng ta có thể dễ dàng nhận thấy ID được sử dụng cho các thành phần mang tính tuyệt đối và duy nhất trong toàn bộ trang web

- Còn với Class sẽ được gán cho các thành phần sẽ lặp lại nhiều lần. Việc gán class cho nhiều thành phần của trang web thì bạn chỉ việc khai báo style trên file CSS cho các thành phần này một lần duy nhất.

Chúng ta hãy xem cách khai báo thuộc tính cho ID và Class trong file CSS
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

.module{
font-size: small;
color: #008080;
font-weight: bold;
}
- Đến bây giờ ta đã có thể nắm bắt được về cơ bản của các thành phần trong một website, cách thể hiện chúng bằng ngôn ngữ HTML và điều khiển chúng theo ý muốn bằng CSS. Trong toàn bộ các bài viết này các bạn hãy đọc kỹ, hiểu và thử trực tiếp ngay trên một trang HTML mà bạn tạo ra. Chỉ khi nắm chắc những yếu tố cơ bản thì việc sử dụng css sẽ tiện dụng hơn rất nhiều
>