Nhóm chọn phần

Nhóm selector

Giả sử bạn muốn phần tử h2 và đoạn văn đều có màu xám. Để đạt được mục đích này, cách dễ dàng nhất là sử dụng tuyên bố sau:

h2, p {color:gray;}

Đặt các selector h2 và p ở bên trái của quy tắc, sau đó phân cách bằng dấu phẩy, bạn đã định nghĩa một quy tắc. Stylе (color:gray;) ở bên phải của quy tắc sẽ áp dụng cho các phần tử được các selector này tham chiếu. Dấu phẩy cho biết trình duyệt rằng quy tắc chứa hai selector khác nhau. Nếu không có dấu phẩy này, ý nghĩa của quy tắc sẽ hoàn toàn khác. Xem thêm selector con cháu.

Có thể nhóm nhiều selector lại với nhau mà không có bất kỳ giới hạn nào.

Ví dụ, nếu bạn muốn hiển thị nhiều yếu tố với màu xám, bạn có thể sử dụng quy tắc tương tự như sau:

body, h2, p, table, th, td, pre, strong, em {màu: xám;}

Lưu ý:Bằng cách nhóm, người tạo có thể "nén" một số loại樣式 lại với nhau, từ đó có thể tạo ra bảng樣式 ngắn gọn hơn.

Dưới đây là hai nhóm quy tắc có thể đạt được kết quả tương tự, nhưng có thể dễ dàng thấy rằng cách viết nào dễ dàng hơn:

/* không nhóm */
h1 {màu: xanh dương;}
h2 {màu: xanh dương;}
h3 {màu: xanh dương;}
h4 {màu: xanh dương;}
h5 {màu: xanh dương;}
h6 {màu: xanh dương;}
/* nhóm */
h1, h2, h3, h4, h5, h6 {màu: xanh dương;}

Thử ngay

Phân nhóm cung cấp một số lựa chọn thú vị. Ví dụ, tất cả các nhóm quy tắc trong ví dụ dưới đây đều tương đương, mỗi nhóm chỉ hiển thị một cách khác nhau để nhóm chọn器和 nhóm宣言:

/* group 1 */
h1 {màu: bạc; nền: trắng;}
h2 {màu: bạc; nền: xám;}
h3 {màu: trắng; nền: xám;}
h4 {màu: bạc; nền: trắng;}
b {màu: xám; nền: trắng;}
/* group 2 */
h1, h2, h4 {màu: bạc;}
h2, h3 {nền: xám;}
h1, h4, b {nền: trắng;}
h3 {màu: trắng;}
b {màu: xám;}
/* group 3 */
h1, h4 {màu: bạc; nền: trắng;}
h2 {màu: bạc;}
h3 {màu: trắng;}
h2, h3 {nền: xám;}
b {màu: xám; nền: trắng;}

thử trực tiếp:

Lưu ý, trong nhóm 3 đã sử dụng “nhóm khai báo”. Sau này chúng ta sẽ giới thiệu về “nhóm khai báo”.

Chọn lọc toàn cục

CSS2 đã giới thiệu một chọn lọc mới đơn giản - chọn lọc toàn cục (universal selector), được biểu thị bằng một dấu sao (*). Chọn lọc này có thể khớp với bất kỳ yếu tố nào, như một dấu phẩy phổ thông.

Ví dụ, quy tắc sau sẽ làm cho tất cả các yếu tố trong tài liệu đều có màu đỏ:

* {color:red;}

Thử ngay

Khai báo này tương đương với việc liệt kê một nhóm chọn lọc cho tất cả các yếu tố trong tài liệu. Sử dụng chọn lọc toàn cục, chỉ cần nhấn một phím (chỉ một dấu sao) là có thể chỉ định giá trị thuộc tính color là red cho tất cả các yếu tố trong tài liệu.

Nhóm khai báo

Chúng ta có thể nhóm các chọn lọc và nhóm các khai báo.

Giả sử bạn muốn tất cả các yếu tố h1 đều có nền màu đỏ và hiển thị văn bản màu xanh lam bằng font Verdana cao 28 pixel, bạn có thể viết định dạng sau:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Nhưng phương pháp này không hiệu quả lắm. Đặc biệt là khi tạo danh sách như vậy cho một yếu tố có nhiều định dạng, điều này rất phiền phức. Ngược lại, chúng ta có thể nhóm các khai báo lại với nhau:

h1 {font: 28px Verdana; color: white; background: black;}

Điều này hoàn toàn tương đương với 3 dòng định dạng trước đó.

Lưu ý, để nhóm các khai báo, bạn nhất thiết phải sử dụng dấu chấm phẩy ở cuối mỗi khai báo, điều này rất quan trọng. Trình duyệt sẽ bỏ qua các ký tự trắng trong bảng định dạng. Chỉ cần thêm dấu chấm phẩy, bạn có thể tự do sử dụng định dạng sau:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Thử ngay

Như vậy, cách viết này có phải dễ đọc hơn không.

Nhưng, nếu bỏ qua dấu chấm phẩy thứ hai, người đại diện người dùng sẽ giải thích bảng định dạng như sau:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Thử ngay

Vì vì background không phải là giá trị hợp lệ đối với color, và vì chỉ có thể chỉ định một từ khóa cho color, nên người đại diện người dùng sẽ hoàn toàn bỏ qua phần khai báo color này (bao gồm cả phần background: black). Điều này làm cho tiêu đề h1 chỉ hiển thị màu xanh lam, không có nền màu đỏ, nhưng có khả năng là tiêu đề h1 sẽ không có màu xanh lam. Ngược lại, các tiêu đề này chỉ hiển thị màu mặc định (thường là màu đen), và không có màu nền. Khai báo font: 28px Verdana vẫn hoạt động bình thường, vì nó thực sự kết thúc bằng một dấu chấm phẩy.

Như nhóm chọn phần, nhóm khai báo cũng là một phương pháp tiện lợi để rút gọn bảng樣式, làm cho nó rõ ràng và dễ bảo trì hơn.

Lưu ý:Thói quen thêm dấu chấm phẩy sau khai báo cuối cùng trong quy tắc là một thói quen tốt. Khi thêm một khai báo mới vào quy tắc, bạn sẽ không phải lo lắng về việc quên thêm dấu chấm phẩy.

Kết hợp nhóm chọn phần và nhóm khai báo

Chúng ta có thể kết hợp nhóm chọn phần và nhóm khai báo trong một quy tắc để định dạng phong cách phức tạp với ít câu lệnh.

Bài quy tắc này sẽ định dạng phong cách tất cả các tiêu đề thành một phong cách phức tạp:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Thử ngay

Bài quy tắc này sẽ định dạng phong cách tất cả các tiêu đề thành văn bản màu xám với nền màu trắng, có canh cách trong 10 pixel và có viền bên ngoài màu đen cứng, văn bản phông chữ là Verdana.