Cách phân biệt giữa class và ID trong CSS -Khi so sánh giữa class và ID trong CSS, sự khác biệt là class CSS áp dụng một kiểu cho nhiều phần tử. Mặt khác, ID áp dụng một style cho một phần tử duy nhất. ID cũng đặc biệt ở chỗ bạn có thể sử dụng một URL đặc biệt để liên kết trực tiếp đến một phần tử và nó được JavaScript sử dụng.
Cách phân biệt giữa class và ID trong CSS – Trong CSS, selectors được sử dụng để nhắm mục tiêu một phần tử cụ thể hoặc nhiều phần tử trên trang web. Khi một phần tử đã được nhắm mục tiêu, một kiểu hoặc tập hợp các kiểu có thể được áp dụng cho phần tử.
Có một loạt các selectors có sẵn. Hai trong số phổ biến nhất được sử dụng là class và ID. Cả hai đều được sử dụng để nhắm mục tiêu các yếu tố mà một kiểu sẽ được áp dụng.
Cách phân biệt giữa class và ID trong CSS, sự giống nhau và khác nhau
Về cơ bản ID và Class là giống nhau,Cách phân biệt giữa class và ID trong CSS đều được dùng là khai báo trong CSS – sự khác biệt nằm ở chỗ, khi khai báo id cho một thẻ nào đó thì tên id đó không được dùng lại nữa – tức là bạn không được khai báo tên đó cho thẻ khác, trong khi đó class thì khai báo một lớp các thẻ và chúng sẽ có cùng chung thuộc tính trong CSS.
Ví dụ:
- Về khai báo sử dụng id:
|
1 |
<div id="wp"></div> |
- Về khai báo sử dụng class:
|
1 |
<h2 class="title"></h2> |
Khi khai báo trong CSS, thì id sẽ bắt đầu bằng dấu thăng ( # ) còn class là dấu chấm ( . )
Ví dụ:
- Về id:
|
1 |
#wp{width: 960px; height: auto; margin:0 auto;} |
- Về class:
|
1 |
.title {font-size: 30px; color: #690000;} |
Những đối tượng như wrapper thì chỉ sử dụng một lần trong trang nên ta khai báo là id, trong khi đó những thẻ tiêu đề cho bài viết lặp lại nhiều lần trong trang web và có cùng thuộc tính css (chẳng hạn cùng cỡ chữ 30px và đều có màu đỏ mận) thì ta sử dụng class, Mình hay gọi là nhúng Css trực tiếp vô code
PS: chú ý là đừng đặt tên class và id bắt đầu là một số, chằng hạn id="56x", class="37y" vì một số trình duyệt web không hỗ trợ kiểu đặt tên này.
Cách phân biệt giữa class và ID
ID là duy nhất
Selectors id cho phép bạn xác định các quy tắc kiểu áp dụng cho một phần tử duy nhất trên trang web. Mỗi trang web chỉ có thể có một phần tử với một thuộc tính ID duy nhất. Điều này có nghĩa là selectors ID không bao giờ có thể được sử dụng để tạo kiểu cho nhiều phần tử.
Selectors class không phải là duy nhất
Selectors class cho phép bạn xác định các quy tắc kiểu áp dụng cho bất kỳ phần tử nào có thuộc tính class bằng một giá trị nhất định.
Như chúng ta đã thảo luận trước đó, selectors ID chỉ có thể được sử dụng để tạo kiểu cho một phần tử. Điều này là do ID chỉ có thể được sử dụng một lần trên một trang web. Mặt khác, các class có thể được sử dụng trên nhiều phần tử. Vì vậy, nếu bạn áp dụng một kiểu bằng cách sử dụng selectors lớp, bất kỳ phần tử nào chia sẻ class đó sẽ tuân theo các kiểu bạn xác định.
kết luận Cách phân biệt giữa class và ID trong CSS
Khi bạn đang làm việc với CSS, không có lý do cụ thể nào buộc bạn phải sử dụng ID trên một lớp. Tuy nhiên, cách tốt nhất là chỉ sử dụng ID nếu bạn muốn một kiểu áp dụng cho một phần tử trên trang web và sử dụng các class nếu bạn muốn một kiểu áp dụng cho nhiều phần tử.
Trong hướng dẫn này, chúng tôi đã thảo luận, với tham chiếu đến các ví dụ, khái niệm cơ bản về ID CSS và selectors lớp, đồng thời chúng tôi đã so sánh và đối chiếu hai loại. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng CSS ID và selectors class như một nhà phát triển chuyên nghiệp!
