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

Sự khác biệt giữa id và class trong CSS – Sự Khác BiệT GiữA

Tóm Tắt

NộI Dung

Các 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 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ệ 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 phong cách và làm cho các trang web dễ trình bày hơn. Các quy tắc CSS áp dụng cho các yếu tố HTML. Ngoài ra, các bộ chọn CSS giúp tìm các phần tử và áp dụng kiểu được yêu cầu 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à class
– So sánh sự 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ể diễn giải các quy tắc này và áp dụng chúng cho các yếu tố được chỉ định trong tài liệu. Một quy tắc kiểu CSS bao gồm ba phần. Họ là người lựa 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 niềng răng xoăn như sau.

bộ chọn {property: value; }

Bộ chọn – Giúp xác định các yếu tố để áp dụng phong cách

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 có thể được gán cho màu thuộc tính.

Id là gì

Lập trình viên có thể định nghĩa một quy tắc kiểu dựa trên id của các phần tử. Tất cả các yếu tố có cùng id sẽ được áp dụng với kiểu được 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 tuyên bố như sau.

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

# tiêu đề1 {

màu: xanh;

}

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 được 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ể định nghĩa các quy tắc kiểu dựa trên lớp của phần tử. Tất cả các yếu tố có cùng một 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. biểu tượng (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.

.header1 {

màu: xanh;

}

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 được 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 yếu tố. Do đó, bộ chọn lớp được sử dụng cho nhiều yếu tố.

Định nghĩa

id là một bộ chọn trong CSS định kiểu phần tử với id được chỉ định trong khi lớp là bộ chọn trong CSS định kiểu các phần tử được 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 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 dáng cho một yếu tố cụ thể. Việc sử dụng lớp là áp dụng kiểu dáng cho nhiều yếu 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 dáng cho các thành phần 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 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ử.

Tài liệu tham khảo: