Một trong những khái niệm quan trọng nhất trong CSS là bộ chọn CSS. Bộ chọn CSS cho phép bạn tạo kiểu các thành phần HTML cụ thể trên trang web của mình theo cách khác
Nếu bạn muốn tạo các yếu tố tuyệt vời, thì bạn cần hiểu bộ chọn CSS và bạn có thể làm gì với chúng
Trước tiên, bạn phải học các bộ chọn CSS cơ bản trước khi chuyển sang các bộ chọn nâng cao
Đến cuối hướng dẫn này, bạn sẽ có thể sử dụng bộ chọn CSS để tạo các phần tử đáng kinh ngạc
Bộ chọn CSS là gì?
Phần đầu tiên của quy tắc CSS là bộ chọn CSS. Bộ chọn CSS là một tập hợp các phần tử và các thuật ngữ khác cho trình duyệt biết phần tử HTML nào sẽ áp dụng các giá trị thuộc tính CSS cho
Bộ chọn CSS được chia thành hai loại,
#id-name {
property: value;
}
#id-name {
property: value;
}
Bộ chọn cơ bản là phổ biến nhất và được sử dụng để tạo kiểu cho các thành phần cụ thể trên trang web
Trong danh mục cơ bản, chúng tôi có các bộ chọn như
- bộ chọn loại
- Bộ chọn id CSS
- Bộ chọn lớp CSS
- Bộ chọn phổ quát
Trong bộ chọn nâng cao, chúng tôi có những điều sau đây
- bộ chọn kết hợp
- Bộ chọn lớp giả
- Phần tử giả CSS
Bộ chọn CSS cơ bản
Để hiểu rõ hơn về bộ chọn CSS, chúng ta cần bắt đầu với những cái cơ bản. Điều này tạo thành nền tảng của những gì chúng ta sẽ tìm hiểu sau trong bài viết này
Hãy xem xét các bộ chọn cơ bản
Bộ chọn loại CSS
Bộ chọn loại CSS áp dụng cho các phần tử HTML dựa trên tên của chúng. Ví dụ về các bộ chọn như vậy là
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Xem ví dụ bên dưới
/* selecting all h6 elements */
h6 {
color: red;
font: bond;
}
/* selecting all p elements */
p {
text-align: center;
background-color: blue;
}
Trong ví dụ trên, chúng tôi đã chọn và áp dụng các kiểu cho tất cả các phần tử của các loại
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Mã trở nên rõ ràng và đơn giản khi bạn áp dụng các kiểu bằng cách chọn một phần tử duy nhất để đại diện cho tất cả các phần tử tương tự khác
Bộ chọn id CSS
Bộ chọn id áp dụng cho các phần tử HTML khớp với id của bộ chọn
Mỗi phần tử có một id duy nhất. Do đó, các kiểu được áp dụng cho các phần tử được chọn khác nhau giữa các phần tử này với phần tử khác
Cú pháp cho bộ chọn id là
#id-name {
property: value;
}
Hãy xem ví dụ dưới đây
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Trong đoạn mã trên, chúng tôi đã chọn hai phần tử HTML khác nhau và áp dụng các kiểu khác nhau cho chúng. Chẳng hạn như id
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Bộ chọn lớp CSS
Bộ chọn lớp CSS áp dụng các kiểu cho tất cả các phần tử HTML có cùng tên lớp
Ký tự
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Bộ chọn này rất hữu ích trong việc tạo kiểu cho nhiều phần tử yêu cầu cùng một kiểu
Ví dụ về bộ chọn Lớp
#id-name {
property: value;
}
Trong đoạn mã trên, chúng tôi đã chọn và tạo kiểu cho tất cả các thành phần có tên lớp
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#id-name {
property: value;
}
Bộ chọn chung CSS
Như tên gợi ý, bộ chọn này áp dụng cho tất cả các phần tử HTML. Mọi phần tử, từ đầu trang đến chân trang, tuân theo kiểu được chỉ định bởi bộ chọn chung
Bộ chọn phổ được biểu thị bằng dấu hoa thị [
#id-name {
property: value;
}
Dưới đây là một ví dụ để minh họa một bộ chọn phổ quát
#id-name {
property: value;
}
Mã ở trên loại bỏ các số 0 của
#id-name {
property: value;
}
#id-name {
property: value;
}
#id-name {
property: value;
}
#id-name {
property: value;
}
Bộ chọn CSS được nhóm như thế nào?🤔
Đôi khi chúng tôi muốn nhóm các phần tử khác nhau để áp dụng các kiểu tương tự cho chúng. Điều này giúp tiết kiệm thời gian và làm cho mã của bạn rõ ràng và dễ hiểu đối với các nhà phát triển khác
Tuy nhiên, đây có thể là một thách thức nếu bạn không biết cách thực hiện
Trong phần này, chúng ta sẽ xem xét cách nhóm các bộ chọn CSS
Đoạn mã dưới đây sẽ là tài liệu tham khảo của chúng tôi
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Trong đoạn mã trên, chúng tôi đã đưa ra ba yếu tố khác nhau,
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#id-name {
property: value;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Để tránh điều này, chúng ta có thể nhóm các bộ chọn bằng ký tự [
#id-name {
property: value;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Trong đoạn mã trên, chúng tôi đã tạo các kiểu cho các phần tử khác nhau một lần vì chúng có cùng định nghĩa
Chúng ta cũng có thể thêm các định nghĩa khác nhau cho từng thành phần mặc dù đã nhóm chúng lại với nhau
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Tôi hy vọng các bộ chọn cơ bản rõ ràng 🥳. Hãy chuyển sang bộ chọn nâng cao
Bộ chọn CSS nâng cao
Để có thêm kiến thức về bộ chọn CSS, chúng ta cần tìm hiểu sâu hơn về
#id-name {
property: value;
}
Bộ chọn CSS nâng cao cho phép chúng tôi thực hiện nhiều hơn những gì bộ chọn cơ bản làm. Chúng cũng cho phép chúng tôi vượt ra khỏi ranh giới của CSS
Hãy xem xét một số bộ chọn CSS nâng cao
bộ chọn kết hợp
Kết hợp là một thuật ngữ được sử dụng để mô tả mối quan hệ giữa các bộ chọn. Bộ chọn kết hợp hợp nhất hai bộ chọn CSS
Có bốn loại bộ chọn kết hợp CSS
đó là
- Bộ chọn hậu duệ
- bộ chọn con
- Bộ chọn anh chị em liền kề
- Bộ chọn anh chị em chung
Bộ chọn hậu duệ
Trong bộ chọn hậu duệ, tất cả các phần tử thuộc một phần tử cụ thể được khớp với nhau
Cú pháp cho bộ chọn hậu duệ như dưới đây
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Hãy xem ví dụ dưới đây
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#id-name {
property: value;
}
Đoạn mã trên chọn tất cả các phần tử
#id-name {
property: value;
}
#id-name {
property: value;
}
Bộ chọn kết hợp con
Bộ chọn kết hợp con xuất hiện ở giữa hai bộ chọn. Nó chỉ chọn các phần tử con trực tiếp của phần tử được chỉ định
Chúng tôi sử dụng ký tự
#id-name {
property: value;
}
Hãy xem ví dụ dưới đây
#id-name {
property: value;
}
Tạo kiểu cho mã HTML ở trên
#id-name {
property: value;
}
Trong đoạn mã trên, phần tử [
#id-name {
property: value;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#id-name {
property: value;
}
Bộ chọn anh chị em liền kề
Bộ chọn anh chị em liền kề chọn một phần tử ngay sau phần tử khác
Chúng được biểu thị bằng ký tự dấu cộng [
#id-name {
property: value;
}
Dưới đây là một ví dụ để chứng minh bộ chọn anh chị em liền kề
#id-name {
property: value;
}
Bất kỳ phần tử
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Bộ chọn kết hợp anh chị em chung
Bộ chọn kết hợp anh chị em chung chọn phần tử
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Thí dụ
#id-name {
property: value;
}
Trong ví dụ trên, tất cả các phần tử
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
bộ chọn giả
Bộ chọn giả được chia thành hai loại
- Bộ chọn lớp giả. Chúng được sử dụng để xác định trạng thái của một phần tử
Ví dụ, chúng có thể được sử dụng để
- Tạo kiểu cho phần tử khi người dùng di chuột qua phần tử đó
- Phong cách khác nhau của các liên kết được truy cập và không được truy cập
- Phần tử giả CSS. Tạo kiểu cho một phần cụ thể của một phần tử
Chúng có thể được sử dụng để
- Tạo kiểu cho chữ cái hoặc dòng đầu tiên của phần tử
- Chèn nội dung vào trước hoặc sau nội dung của phần tử
Ví dụ về bộ chọn lớp Pseudo
#id-name {
property: value;
}
Khi người dùng di chuột qua liên kết, màu của nó sẽ chuyển sang màu hồng nóng. Các liên kết
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Ví dụ về phần tử giả CSS
#id-name {
property: value;
}
Hãy tạo kiểu cho mã HTML ở trên
#id-name {
property: value;
}
Bức thư đầu tiên, tôi. e.
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
Dòng đầu tiên trong câu trên sẽ có màu đỏ
Gói [lại
Xin chúc mừng. 🥳. Giờ đây, bạn có thể áp dụng kiến thức về bộ chọn CSS để tạo kiểu cho các trang web của mình theo những cách khác nhau tùy theo sở thích của bạn