PDA

Xem phiên bản đầy đủ : Toàn quốc Tìm hiểu sự khác nhau giữa thuộc tính ID và Class CSS



webbox
06-11-2023, 03:45 PM
Tìm hiểu về ID và Class CSS
ID và Class CSS là hai thuộc tính quan trọng trong CSS. Cả hai đều được sử dụng để xác định các phần tử trong HTML và áp dụng các kiểu CSS cho chúng. Tuy nhiên, chúng có những điểm khác nhau quan trọng mà bạn cần phải biết để sử dụng chúng hiệu quả.
Thuộc tính ID
Thuộc tính ID được sử dụng để xác định duy nhất một phần tử trong HTML. Mỗi phần tử chỉ có thể có một thuộc tính ID duy nhất và không được trùng lặp trong cùng một trang web. Vì vậy, khi bạn sử dụng thuộc tính ID trong CSS, nó sẽ áp dụng cho phần tử đó duy nhất và không ảnh hưởng đến các phần tử khác.
Ví dụ: Nếu bạn muốn thiết lập kiểu cho phần tử <header> của trang web của mình, bạn có thể sử dụng thuộc tính ID để xác định phần tử này là duy nhất trên trang web của bạn:
Sau đó, bạn có thể sử dụng thuộc tính ID này trong CSS để áp dụng kiểu cho phần tử này:

<header id="masthead">
...
</header>
Sau đó, bạn có thể sử dụng thuộc tính ID này trong CSS để áp dụng kiểu cho phần tử này:

1 #masthead {
2 background-color: black;
3 color: white;
4 }
Thuộc tính Class
Thuộc tính Class được sử dụng để xác định một nhóm các phần tử trong HTML có chung một thuộc tính. Khác với thuộc tính ID, mỗi phần tử có thể có nhiều thuộc tính Class và cũng có thể được sử dụng chung bởi các phần tử khác. Khi bạn sử dụng thuộc tính Class trong CSS, nó sẽ áp dụng cho tất cả các phần tử có chung thuộc tính Class đó.
Ví dụ: Nếu bạn muốn thiết lập kiểu cho tất cả các liên kết trên trang web của mình, bạn có thể sử dụng thuộc tính Class để xác định tất cả các phần tử <a> là một nhóm:
1 <a class="link" href="#">Link 1</a>
2 <a class="link" href="#">Link 2</a>
3 <a class="link" href="#">Link 3</a>
Sau đó, bạn có thể sử dụng thuộc tính Class này trong CSS để áp dụng kiểu cho tất cả các phần tử này:
1 .link {
2 color: blue;
3 text-decoration: none;
4 }

https://www.webbox.vn/tin-tuc/id-va-class-css/