Các Sự khác biệt chính giữa id và lớp trong CSS là id được sử dụng để áp dụng kiểu cho một phần tử duy nhất trong khi lớp được sử dụng để áp dụng kiểu cho nhiều phần tử.

Có nhiều công nghệ khác nhau trong phát triển web. Các ngôn ngữ chính để phát triển trang web là HTML, CSS và JavaScript. HTML là viết tắt của Hyper Text Markup Language. Nó giúp phát triển cấu trúc của trang web. JavaScript giúp làm cho trang web năng động hơn. CSS là viết tắt của Cascading Style Sheets. Nó giúp thêm kiểu và làm cho các trang web dễ nhìn hơn. Các quy tắc CSS áp dụng cho các phần tử HTML. Ngoài ra, bộ chọn CSS giúp tìm các phần tử và áp dụng kiểu bắt buộc cho các thẻ HTML. id và class là hai loại bộ chọn.

Lớp, Quy tắc CSS, ID

Quy tắc CSS là gì

CSS bao gồm một tập hợp các quy tắc. Trình duyệt có thể diễn giải các quy tắc này và áp dụng chúng cho các phần tử được chỉ định trong tài liệu. Quy tắc kiểu CSS bao gồm ba phần. Chúng là bộ chọn, thuộc tính và giá trị. Khai báo đề cập đến sự kết hợp của tài sản và giá trị. Chúng xuất hiện bên trong một cặp dấu ngoặc nhọn như sau.

bộ chọn {thuộc tính: giá trị; }

Bộ chọn - Giúp xác định phần tử để áp dụng kiểu

Bất động sản - Một thuộc tính. Tất cả các thuộc tính HTML được chuyển đổi thành các thuộc tính CSS. Một số ví dụ là màu sắc, căn chỉnh văn bản, đường viền, v.v.

Giá trị - Giá trị là những gì được gán cho tài sản. Ví dụ: màu xanh lam có thể được gán cho màu thuộc tính.

Id là gì

Lập trình viên có thể xác định một quy tắc kiểu dựa trên id của các phần tử. Tất cả các phần tử có cùng id sẽ được áp dụng với kiểu đã xác định. Để chọn một phần tử có id cụ thể, phải có ký hiệu # (băm) theo sau là id của phần tử.

Giả sử rằng tệp HTML chứa một câu lệnh như sau.

Tệp CSS chứa đoạn mã sau.

# header1 {

màu sắc: xanh lam;

}

Khi trình duyệt diễn giải câu lệnh HTML, nó sẽ kiểm tra id của phần tử h1, là header1 trong tệp CSS. Sau đó, nó áp dụng quy tắc CSS đã xác định cho phần tử h1. Do đó, dòng chữ Hello World sẽ xuất hiện với màu xanh lam.

Id là duy nhất trong trang. Do đó, bộ chọn id được sử dụng cho một phần tử duy nhất.

Lớp học là gì

Tương tự như id, lập trình viên có thể xác định các quy tắc kiểu dựa trên lớp của phần tử. Tất cả các phần tử có cùng lớp sẽ được áp dụng với một kiểu xác định. Để chọn một phần tử với một lớp cụ thể, cần có một. (dấu chấm) ký hiệu theo sau là tên của lớp.

Giả sử rằng tệp HTML chứa các câu lệnh sau.

Tệp CSS chứa đoạn mã sau.

.header1 {

màu sắc: xanh lam;

}

Khi trình duyệt diễn giải câu lệnh HTML, nó sẽ kiểm tra lớp của phần tử h1, là header1 trong tệp CSS. Sau đó, nó áp dụng quy tắc CSS đã xác định cho tất cả các phần tử h1. Do đó, văn bản Hello World 1 và Hello World 2 sẽ xuất hiện với màu xanh lam.

Có thể sử dụng cùng một lớp trên nhiều phần tử. Do đó, bộ chọn lớp được sử dụng cho nhiều phần tử.

Sự khác biệt giữa id và lớp trong CSS

Sự định nghĩa

id là một bộ chọn trong CSS để tạo kiểu cho phần tử với một id được chỉ định trong khi lớp là một bộ chọn trong CSS tạo kiểu cho các phần tử đã chọn với một lớp được chỉ định.

Cú pháp

Cú pháp id là #id {khai báo css; }. Cú pháp của lớp là khai báo.class {css; }

Sử dụng

Hơn nữa, việc sử dụng id là áp dụng kiểu cho một phần tử cụ thể. Cách sử dụng của lớp là áp dụng kiểu cho nhiều phần tử.

Phần kết luận

Id và class là hai bộ chọn trong CSS cho phép áp dụng kiểu cho các phần tử HTML. Sự khác biệt chính giữa id và class trong CSS là id được sử dụng để áp dụng kiểu cho một phần tử duy nhất trong khi lớp được sử dụng để áp dụng kiểu cho nhiều phần tử.

Thẩm quyền giải quyết:

1. “Bộ chọn và cú pháp CSS.” Hướng dẫn sử dụng web trực tuyến của W3Schools, có sẵn tại đây.

Hình ảnh lịch sự:

1. “CSS.3” của Nikotaf - Tác phẩm riêng (CC BY-SA 4.0) qua Commons Wikimedia