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 dáng cho một phần tử duy nhất trong khi lớp được sử dụng để áp dụng kiểu dáng 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 Ngôn ngữ đánh dấu siêu văn bản. 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 phong cách 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 cần thiết cho các thẻ HTML. id và class là hai loại bộ chọn
Các khu vực chính được bảo hiểm
1. Quy tắc CSS là gì
– Định nghĩa, ví dụ
2. Id là gì
– Định nghĩa, ví dụ
3. Lớp học là gì
– Định nghĩa, ví dụ
4. Sự khác biệt giữa id và lớp
– So sánh các điểm khác biệt chính
Điều khoản quan trọng
Lớp, Quy tắc CSS, ID
Quy tắc CSS là gì
CSS bao gồm một bộ quy tắc. Trình duyệt có thể giải thích các quy tắc này và áp dụng chúng cho các thành phần được chỉ định trong tài liệu. Quy tắc kiểu CSS bao gồm ba phần. Họ là bộ chọn, tài sản và giá trị. Tuyên bố đề 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
Thuộc tính – Một thuộc tính. Tất cả các thuộc tính HTML được chuyển thành 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 thuộc tính color
id là gì
Lập trình viên có thể xác định 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ể, cần 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
#tiêu đề1{
màu sắc. màu xanh da trời;
}
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à tiêu đề1 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 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. ký hiệu [dấu chấm] 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
tiêu đề1{
màu sắc. màu xanh da trời;
}
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à tiêu đề1 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 đó, dòng chữ Hello World 1 và Hello World 2 sẽ có 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 đã chỉ định
cú pháp
Cú pháp id là #id{ khai báo css; . Cú pháp lớp là. lớp { khai báo css;
Cách sử dụng
Hơn nữa, việc sử dụng id là áp dụng kiểu dáng cho một phần tử cụ thể. Việc sử dụng lớp là áp dụng kiểu dáng cho nhiều phần tử
Sự kết luận
Id và class là hai bộ chọn trong CSS cho phép áp dụng kiểu dáng cho các phần tử HTML. 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 dáng cho một phần tử duy nhất trong khi lớp được sử dụng để áp dụng kiểu dáng cho nhiều phần tử