XML: Bài 5.2. Bộ chọn trong CSS

Trong bài học thứ hai này, Bộ chọn trong CSS, bạn sẽ học cách:

• Xác định các bộ chọn đơn giản trong CSS.
• Cách sử dụng bộ chọn phổ dụng trong CSS.
• Mô tả bộ chọn ID.

5.2.1. Bộ chọn đơn

Bộ chọn đơn bao gồm tên phần tử theo sau là một hoặc nhiều khai báo thuộc tính. Các khai báo thuộc tính giống nhau có thể được gán cho nhiều phần tử bằng cách tách tên phần tử bằng dấu phẩy. Bộ chọn đơn phù hợp với mọi lần xuất hiện của phần tử trong tài liệu.

/* Bộ chọn đơn */
CD { color: black }
/* Phần tử đơn, khai báo nhiều thuộc tính */
CD { color: white; background-color: blue }
/* Nhiều phần tử, khai báo nhiều thuộc tính */
CD, Name, Title { color: white; background-color: blue }

Một bộ chọn phổ quát bao gồm một dấu ngoặc xoắn theo sau là các khai báo thuộc tính. Nó được sử dụng khi bạn muốn gán các quy tắc kiểu giống nhau cho tất cả các phần tử trong tài liệu. Một bộ chọn phổ quát khớp với tất cả các phần tử trong một tài liệu. Đoạn mã sau đây hiển thị nội dung của tất cả các phần tử trong tài liệu bằng màu xanh lam.

*{color: blue}

5.2.2. Bộ chọn phổ quát

Bộ chọn ID bao gồm ký hiệu băm (#), ngay sau đó là giá trị của thuộc tính, sau đó là khai báo thuộc tính. Nó được sử dụng để xác định kiểu cho các phần tử duy nhất trong một tài liệu. Ví dụ: nếu bạn muốn dữ liệu của một phần tử duy nhất ở một kiểu khác, bạn sẽ xác định một bộ chọn ID cho nó. Phần tử duy nhất là phần tử có một trong các thuộc tính của nó được đặt tên là id như trong hình 5.5.

Hình 5.5: Bộ chọn ID

#attribute_value { property_declarations }

#1001 { color : blue }