Sự khác nhau giữa Class và ID

Anonim

Lớp và ID

Cascading Style Sheets (CSS) là ngôn ngữ mô tả giao diện và định dạng 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 các trang web được viết bằng HTML. CSS cho phép chỉ định các bộ chọn kiểu của riêng bạn ngoài việc áp dụng các kiểu cho các phần tử HTML. Điều này được thực hiện bằng ID và trình chọn lớp. Khi chỉ định một phong cách cho một phần tử độc nhất, bộ chọn ID được sử dụng. Khi chỉ định một kiểu cho một nhóm các phần tử, bộ chọn lớp được sử dụng.

Lớp học là gì?

Trong CSS, bộ chọn lớp có thể được sử dụng để áp dụng phong cách riêng của bạn cho một nhóm các phần tử. Bộ chọn Lớp được sử dụng để áp dụng một phong cách cụ thể cho một bộ các phần tử với cùng một lớp. Trong CSS, một bộ chọn lớp được xác định bằng dấu chấm hết (.). Sau đây là ví dụ về một bộ chọn lớp được định nghĩa trong CSS.

. my_class {

màu sắc: màu xanh lam;

font-weight: đậm;

}

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ư thể hiện dưới đây.

Đây là định dạng của tôi

Đây là định dạng 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ử 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 được chèn vào thuộc tính lớp được phân cách bởi một không gian như thể hiện dưới đây.

Đây là định dạng của tôi sử dụng hai lớp

ID là gì?

Trong CSS, bộ chọn ID có thể được sử dụng để áp dụng phong cách 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 băm (#). Sau đây là ví dụ về bộ chọn ID được định nghĩa trong CSS.

#my_ID {

màu sắc: đỏ;

text-align: phải;

}

HTML có thể tham chiếu đến bộ chọn ID được định nghĩa bằng CSS bằng cách sử dụng id thuộc tính như thể hiện dưới đây.

Đây là mẫu định dạng của tôi, ID chọn ID

là duy nhất. Do đó mỗi phần tử chỉ có thể có một ID và mỗi trang chỉ có thể có một phần tử duy nhất có ID cụ thể đó. ID có một đặc tính quan trọng có thể được sử dụng với một trình duyệt. Nếu URL trang chứa một giá trị băm (ví dụ: // myweb. Com # my_id), trình duyệt sẽ cố gắng tự động xác định vị trí phần tử với id "my_id" và cuộn trang web để hiển thị phần tử đó. Đây là một lý do tại sao trang nên có một phần tử với ID cụ thể đó để trình duyệt có thể xác định được phần tử đó.

Sự khác biệt giữa Lớp và ID là gì?

Mặc dù cả bộ chọn Lớp và bộ chọn ID có thể được sử dụng để áp dụng phong cách riêng của bạn cho các phần tử trong một trang web nhưng 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 phong cách riêng của bạn cho một nhóm các phần tử, trong khi bộ chọn ID được sử dụng để áp dụng một phong cách cho một phần tử độc nhất. Khi sử dụng ID, mỗi phần tử chỉ có một ID 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 này có thể được sử dụng cho nhiều phần tử và một phần tử có thể sử dụng nhiều Lớp học.Hơn nữa, ID có thể được sử dụng để tự động cuộn trang để hiển thị phần tử có ID đó, nhưng điều này là không thể với trình chọn lớp.