Khi so sánh lớp CSS với ID, điểm khác biệt là lớp CSS áp dụng một kiểu cho nhiều thành phần. Mặt khác, ID áp dụng một kiểu cho một phần tử duy nhất. ID còn đặc biệt ở chỗ bạn có thể sử dụng một URL đặc biệt để liên kết trực tiếp đến một phần tử và nó được JavaScript sử dụng.
Trong CSS, bộ chọn được sử dụng để nhắm mục tiêu một phần tử hoặc phạm vi phần tử cụ thể trên trang web. Khi một phần tử đã được nhắm mục tiêu, một kiểu hoặc tập hợp các kiểu có thể được áp dụng cho phần tử đó.
Có rất nhiều bộ chọn có sẵn. Hai trong số những cái được sử dụng phổ biến nhất là class và ID . Cả hai đều được sử dụng để nhắm mục tiêu các phần tử cần áp dụng kiểu.
Lớp CSS và Bộ chọn ID
Sự khác biệt giữa class là gì và ID bộ chọn? Đây là câu hỏi được đặt ra bởi nhiều nhà phát triển mới làm quen với CSS và là câu hỏi mà chúng tôi sẽ trả lời trong hướng dẫn này.
Khi đọc xong hướng dẫn này, bạn sẽ biết sự khác biệt giữa hai bộ chọn này. Bạn sẽ có thông tin cần thiết để đưa ra quyết định sáng suốt về việc nên sử dụng bộ chọn nào trong mã của mình. Hãy bắt đầu.
Bộ chọn CSS
Khi thiết kế một trang web, bạn sẽ muốn áp dụng một số phong cách nhất định cho các thành phần cụ thể trên trang. Ví dụ:bạn có thể muốn đặt màu văn bản của tất cả các thẻ
thành màu xanh lá cây hoặc thay đổi kích thước phông chữ của tiêu đề.
Bộ chọn cho phép bạn nhắm mục tiêu các phần tử cụ thể trên trang web mà bạn có thể áp dụng kiểu. Trong CSS, có rất nhiều bộ chọn, chẳng hạn như bộ chọn phổ quát, bộ chọn con, bộ chọn con và bộ chọn nhóm. Nếu bạn muốn tìm hiểu thêm về bộ chọn CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về bộ chọn CSS.
Hai bộ chọn, class và id , được sử dụng để áp dụng kiểu cho các phần tử dựa trên lớp và ID tương ứng được gán cho phần tử HTML. Tuy nhiên, những bộ chọn này thường bị nhầm lẫn, vì vậy hãy khám phá cách hoạt động của từng bộ chọn.
Bộ chọn ID là duy nhất
Bộ chọn id cho phép bạn xác định các quy tắc kiểu áp dụng cho một đơn phần tử trên trang web. Mỗi trang web chỉ có thể có một thành phần với một thuộc tính ID duy nhất. Điều này có nghĩa là bộ chọn ID không bao giờ có thể được sử dụng để tạo kiểu cho nhiều phần tử.
Bộ chọn ID được xác định bằng dấu băm. Ngay sau chúng là giá trị ID mà bạn muốn áp dụng một bộ quy tắc kiểu. Dưới đây là ví dụ về hoạt động của bộ chọn ID:
<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
color: white;
background-color: orange;
} Kiểu này áp dụng cho phần tử
trong tài liệu HTML của chúng tôi có ID betaBanner . Kiểu sẽ đặt màu nền của phần tử thành màu cam và màu của văn bản trong phần tử thành màu trắng.
Bộ chọn lớp không phải là duy nhất
Bộ chọn lớp cho phép bạn xác định các quy tắc kiểu áp dụng cho bất kỳ phần tử nào với một thuộc tính lớp bằng một giá trị nhất định.
Như chúng ta đã thảo luận trước đó, bộ chọn ID chỉ có thể được sử dụng để tạo kiểu cho một phần tử. Điều này là do ID chỉ có thể được sử dụng một lần trên một trang web. Mặt khác, các lớp có thể được sử dụng trên nhiều phần tử. Vì vậy, nếu bạn áp dụng một kiểu bằng cách sử dụng bộ chọn lớp, thì bất kỳ phần tử nào chia sẻ lớp đó sẽ tuân theo các kiểu bạn xác định.
Bộ chọn lớp được xác định bằng dấu chấm, theo sau là giá trị của lớp mà bạn muốn áp dụng một tập hợp kiểu. Đây là một ví dụ về hoạt động của bộ chọn lớp:
<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
background-color: orange;
} Kiểu này đặt màu nền của thẻ
của chúng tôi thành màu cam. Ngoài ra, kiểu này đặt màu nền của thẻ
Ngoài ra, một thành phần web có thể chia sẻ nhiều lớp khác nhau. Vì vậy, nếu chúng ta muốn áp dụng một lớp có tên large với thẻ
<html> <div class="orangeBackground large">This is a banner.</div>
Trong mã này, mọi quy tắc kiểu được xác định cho orangeBackground và large các lớp được áp dụng cho phần tử web của chúng tôi. Mặt khác, với ID, chúng tôi không thể lặp lại hành vi này vì mỗi phần tử chỉ có thể có một ID.
ID có chức năng trình duyệt duy nhất
Cho đến nay, chúng ta đã thảo luận về thực tế là ID chỉ có thể áp dụng kiểu cho một thành phần. Không giống như các lớp có thể áp dụng kiểu cho nhiều phần tử. Đây không phải là sự khác biệt duy nhất giữa bộ chọn lớp và ID.
Trong trình duyệt, các lớp không có chức năng đặc biệt. Mục đích chính của chúng là cho phép bạn áp dụng kiểu cho nhiều thành phần trên trang web. Mặt khác, ID có thể được trình duyệt sử dụng để điều hướng đến một phần nhất định của trang web.
Nếu bạn chỉ định ID cho một phần tử, bạn có thể sử dụng một URL đặc biệt để liên kết trực tiếp đến phần tử đó. Hành vi này hoạt động vì ID là duy nhất trên một trang web.
Giả sử chúng tôi muốn gửi một liên kết đến trang web của chúng tôi để tự động cuộn người dùng đến tiêu đề. Chúng ta có thể làm như vậy bằng cách sử dụng mã này:
<h3 id="section3">Section Three</h3>
Trong mã này, chúng tôi đã gán ID cho thẻ
chứa văn bản Section Three . Bây giờ, chúng tôi có thể gửi cho người dùng một liên kết trực tiếp để cuộn họ đến phần tử đó trên trang web. Điều này được thực hiện bằng cách sử dụng URL sau:
https://domain.com/index.html#section3
Khi người dùng điều hướng đến URL này, (trong đó domain.com là URL trang web của bạn), họ sẽ cuộn đến tiêu đề có ID section3 . Hành vi này không áp dụng cho các lớp học.
ID được JavaScript sử dụng
Nếu bạn có bất kỳ kinh nghiệm sử dụng JavaScript nào, bạn sẽ biết rằng ID thường được sử dụng trong ngôn ngữ lập trình đó. Hàm getElementById cho phép bạn chọn một thành phần trên trang web. Nó dựa trên thực tế là chỉ một phần tử có thể chia sẻ cùng một ID.
Mặt khác, các lớp có thể phản ánh nhiều thành phần trên một trang web. Chúng sẽ không hữu ích nếu bạn muốn làm việc với một phần tử cụ thể trong JavaScript.
Bạn có thể sử dụng cả bộ chọn lớp ID và CSS
Không có quy tắc nào trong HTML ngăn cản bạn gán cả ID và lớp cho một phần tử.
"Nghề nghiệp đã bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi tham gia chương trình đào tạo. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với các giá trị và mục tiêu trong cuộc sống của mình!"
Venus, Kỹ sư phần mềm tại Rockbot
Tìm trận đấu Bootcamp của bạn
Giả sử bạn muốn áp dụng các kiểu được liên kết với một lớp có tên là backgroundOrange vào thẻ
<div class="backgroundOrange" id="customDiv"></div>
Thẻ
backgroundOrange . Ngoài ra, nó cũng sẽ sử dụng các kiểu được áp dụng cho customDiv ID bằng bộ chọn ID. Kết luận
Khi bạn làm việc với CSS, không có lý do cụ thể nào buộc bạn phải sử dụng ID cho một lớp. Tuy nhiên, cách tốt nhất là chỉ sử dụng ID nếu bạn muốn một kiểu áp dụng cho một thành phần trên trang web và sử dụng các lớp nếu bạn muốn một kiểu áp dụng cho nhiều thành phần.
Trong hướng dẫn này, chúng ta đã thảo luận, tham khảo các ví dụ, những kiến thức cơ bản về CSS ID và bộ chọn lớp, đồng thời chúng ta đã so sánh và đối chiếu cả hai. Bây giờ bạn đã sẵn sàng bắt đầu sử dụng CSS ID và bộ chọn lớp như một nhà phát triển chuyên nghiệp!