Lớp so với ID
Trang tính kiểu xếp tầng (CSS) là ngôn ngữ mô tả giao diện và định dạng của tài liệu được viết bằng ngôn ngữ đánh dấu. CSS được sử dụng rộng rãi để tạo kiểu cho các trang web được viết bằng HTML. CSS cho phép chỉ định bộ chọn kiểu của riêng bạn ngoài việc áp dụng kiểu cho các phần tử HTML. Điều này được thực hiện bằng cách sử dụng bộ chọn ID và lớp. Khi chỉ định kiểu cho một phần tử duy nhất, bộ chọn ID sẽ được sử dụng. Khi chỉ định kiểu cho một nhóm phần tử, bộ chọn lớp sẽ được sử dụng.
Class là gì?
Trong CSS, bộ chọn Lớp có thể được sử dụng để áp dụng kiểu riêng của bạn cho một nhóm phần tử. Bộ chọn Lớp được sử dụng để áp dụng một kiểu cụ thể cho một tập hợp các phần tử có cùng lớp. Trong CSS, một bộ chọn lớp được xác định bằng một dấu dừng đầy đủ (.). Sau đây là ví dụ về bộ chọn lớp được định nghĩa trong CSS.
.my_class {
màu: xanh lam;
font-weight: bold;
}
HTML có thể tham chiếu đến lớp được định nghĩa trong CSS bằng cách sử dụng lớp thuộc tính như được hiển thị bên dưới.
Đây là định dạng của tôi
Đây là định dạng lại của tôi
Như đã trình bày ở trên, cùng một lớp có thể được sử dụng cho nhiều phần tử và một phần tử duy nhất có thể sử dụng nhiều lớp. Khi nhiều lớp được sử dụng trong cùng một phần tử, các lớp sẽ được chèn vào thuộc tính lớp được phân cách bằng khoảng trắng như hình dưới đây.
Đây là định dạng của tôi bằng cách sử dụng hai lớp
ID là gì?
Trong CSS, bộ chọn ID có thể được sử dụng để áp dụng kiểu riêng của bạn cho một phần tử duy nhất. Trong CSS, một bộ chọn ID được xác định bằng một hàm băm (). Sau đây là ví dụ về bộ chọn ID được xác định trong CSS.
my_ID {
màu: đỏ;
text-align: right;
}
HTML có thể tham chiếu đến bộ chọn ID được xác định trong CSS bằng cách sử dụng id thuộc tính như được hiển thị bên dưới.
Đây là biểu mẫu định dạng của tôi, công cụ chọn ID
ID là duy nhất. Do đó, mỗi phần tử chỉ có thể có một ID duy nhất và mỗi trang chỉ có thể có một phần tử duy nhất với ID cụ thể đó. ID có một đặc điểm quan trọng có thể được sử dụng với trình duyệt. Nếu URL của trang chứa giá trị băm (ví dụ: https://myweb.commy_id), trình duyệt sẽ cố gắng tự động định vị phần tử có ID “my_id” và cuộn trang web để hiển thị phần tử đó. Đây là một lý do tại sao trang phải có một phần tử duy nhất với ID cụ thể đó, để trình duyệt có thể xác định vị trí của phần tử đó.
Sự khác biệt giữa Class và ID là gì?
Mặc dù cả bộ chọn Lớp và bộ chọn ID đều có thể được sử dụng để áp dụng kiểu riêng của bạn cho các phần tử trong trang web, chúng có một số khác biệt quan trọng. Bộ chọn lớp có thể được sử dụng để áp dụng kiểu riêng của bạn cho một nhóm phần tử, trong khi bộ chọn ID được sử dụng để áp dụng một kiểu cho một phần tử duy nhất. Khi sử dụng ID, mỗi phần tử chỉ có thể có một ID duy nhất và mỗi trang chỉ có thể có một phần tử duy nhất với ID cụ thể đó, nhưng Lớp có thể được sử dụng cho nhiều phần tử và một phần tử duy nhất có thể sử dụng nhiều Lớp. Hơn nữa, ID có thể được sử dụng để cuộn trang tự động để hiển thị phần tử có ID đó, nhưng điều này không thể thực hiện được với bộ chọn lớp.
