Bắt đầu CSS
CSS dựa trên các quy tắc khớp mẫu để xác định kiểu nào áp dụng cho phần tử nào trong tài liệu. Các mẫu này được gọi là bộ chọn và chúng bao gồm các tên thẻ (ví dụ: p để khớp các thẻ đoạn) với các mẫu rất phức tạp khớp với các phần rất cụ thể của tài liệu (ví dụ: p # myid> b.highlight sẽ khớp với bất kỳ thẻ b nào một lớp nổi bật là con của đoạn văn có id myid).
Bộ chọn CSS là một phần của cuộc gọi kiểu CSS xác định phần nào của trang web sẽ được tạo kiểu. Bộ chọn có chứa một hoặc nhiều thuộc tính xác định cách HTML được chọn sẽ được tạo kiểu.
Bộ chọn CSS
Có một số loại bộ chọn khác nhau:
- loại bộ chọn — khớp với một phần tử cụ thể
- bộ chọn lớp — so khớp các phần tử với một lớp cụ thể
- Bộ chọn ID — khớp với phần tử có ID cụ thể
- bộ chọn con cháu — kết hợp các phần tử là hậu duệ của một phần tử cụ thể
- bộ chọn con — các phần tử phù hợp là phần tử con của phần tử cụ thể
- bộ chọn chung — khớp với bất kỳ phần tử nào
- các bộ chọn anh chị em liền kề — các phần tử phù hợp ngay trước một phần tử cụ thể
- bộ chọn thuộc tính — so khớp các phần tử với một thuộc tính hoặc giá trị thuộc tính cụ thể
- bộ chọn lớp giả — các phần tử phù hợp với một lớp giả cụ thể
- bộ chọn phần tử giả — các phần tử phù hợp với các thuộc tính phần tử giả cụ thể
Định dạng CSS Styles và CSS Selectors
Định dạng của kiểu CSS trông như sau:
selector {style property: style; }
Tách nhiều bộ chọn có cùng kiểu với dấu phẩy. Điều này được gọi là nhóm chọn. Ví dụ:
selector1 , selector2 {style property: style; }
Bộ chọn nhóm là một cơ chế viết tắt để giữ cho kiểu CSS của bạn nhỏ gọn.
Các nhóm trên sẽ có tác dụng tương tự như:
selector1 {style property: style; }
selector2 {style property: style; }
Luôn kiểm tra bộ chọn CSS của bạn
Không phải tất cả các trình duyệt đều hỗ trợ tất cả các bộ chọn CSS. Vì vậy, hãy chắc chắn kiểm tra bộ chọn của bạn trong bao nhiêu trình duyệt trên nhiều hệ điều hành nhất có thể. Nhưng nếu bạn đang sử dụng bộ chọn CSS 1 hoặc CSS2, bạn sẽ ổn.