Trong hướng dẫn này, bạn sẽ học cách sử dụng các bộ chọn CSS3 để áp dụng các quy tắc CSS cho các phần tử HTML. Show Bộ chọn là gì?Bộ chọn CSS (selector) là một mẫu để khớp các phần tử trên trang web. Các quy tắc CSS được liên kết với bộ chọn đó sẽ được áp dụng cho các phần tử phù hợp với bộ chọn. Bộ chọn là một trong những khía cạnh quan trọng nhất của CSS vì chúng cho phép bạn nhắm mục tiêu các phần tử cụ thể trên trang web của mình theo nhiều cách khác nhau để chúng có thể được định dạng. Dưới đây là các loại bộ chọn có sẵn trong CSS3, chúng ta hãy xem xét kỹ hơn chúng. Bộ chọn phổ quátBộ chọn phổ quát, được biểu thị bằng dấu hoa thị (*), khớp với mọi phần tử trên trang. Bộ chọn phổ quát có thể bị bỏ qua nếu các điều kiện khác tồn tại trên phần tử. Bộ chọn này thường được sử dụng để loại bỏ lề và đệm mặc định khỏi các phần tử nhằm mục đích kiểm tra nhanh. Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào: * { margin: 0; padding: 0; }Các quy tắc CSS bên trong bộ chọn * sẽ được áp dụng cho mọi phần tử trong tài liệu HTML. Lưu ý: Không nên sử dụng bộ chọn phổ quát (*) quá thường xuyên trong môi trường sản xuất, vì bộ chọn này khớp với mọi phần tử trên trang web gây áp lực không cần thiết lên trình duyệt. Sử dụng bộ chọn phần tử hoặc bộ chọn lớp để thay thế. Bộ chọn phần tửBộ chọn phần tử khớp với tất cả các phần tử trong tài liệu HTML với tên phần tử tương ứng. Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào: p { color: blue; }Các quy tắc CSS bên trong bộ chọn p sẽ được áp dụng trên mọi phần tử <p> (hoặc đoạn văn) trong tài liệu và tô màu xanh lam cho nó, bất kể vị trí của chúng trong cây tài liệu. Bộ chọn IdBộ chọn Id được sử dụng để xác định các quy tắc kiểu cho một phần tử đơn lẻ hoặc duy nhất. Bộ chọn id được xác định bắt đầu bằng dấu thăng (#) ngay sau đó là giá trị id. #error { color: red; }Quy tắc CSS này hiển thị văn bản của một phần tử có thuộc tính id là error có màu đỏ. Lưu ý: Giá trị của thuộc tính id phải là duy nhất trong một tài liệu nhất định - nghĩa là không có hai phần tử nào trong tài liệu HTML của bạn có thể chia sẻ cùng một giá trị id. Bộ chọn lớpBộ chọn lớp có thể được sử dụng để chọn bất kỳ phần tử HTML nào có thuộc tính class. Tất cả các phần tử có lớp đó sẽ được định dạng theo quy tắc đã xác định. Bộ chọn lớp được định nghĩa bắt đầu bằng dấu chấm (.) ngay sau đó là tên lớp. .blue { color: blue; }Quy tắc CSS trên làm cho văn bản có màu xanh lam của mọi phần tử trong tài liệu có thuộc tính class là blue. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ: p.blue { color: blue; }Quy tắc CSS bên trong bộ chọn p.blue chỉ hiển thị văn bản bằng màu xanh lam cho những phần tử <p> có thuộc tính class là blue và không ảnh hưởng đến các đoạn văn bản khác. Bộ chọn con cháuBạn có thể sử dụng các bộ chọn này (descendant selector) khi bạn cần chọn một phần tử là con cháu của một phần tử khác, ví dụ: nếu bạn muốn chỉ nhắm mục tiêu những phần tử <a> nằm trong danh sách không có thứ tự, thay vì nhắm mục tiêu tất cả các phần tử <a>. Hãy xem nó hoạt động như thế nào: ul.menu li a { text-decoration: none; } h1 em { color: green; }Quy tắc CSS bên trong bộ chọn ul.menu li a chỉ áp dụng cho những phần tử <a> chứa bên trong phần tử <ul> có lớp .menu và không ảnh hưởng đến các phần tử <a> khác bên trong tài liệu. Tương tự, các quy tắc kiểu bên trong bộ chọn h1 em sẽ chỉ được áp dụng cho những phần tử <em> chứa bên trong phần tử <h1> và không ảnh hưởng đến các phần tử <em> khác . Bộ chọn conMột bộ chọn con (child selector) được sử dụng để chỉ chọn những phần tử là con trực tiếp của một phần tử nào đó. Một bộ chọn con được tạo thành từ hai hoặc nhiều bộ chọn được phân tách bằng một ký hiệu lớn hơn (>). Ví dụ: bạn có thể sử dụng bộ chọn này để chọn cấp đầu tiên của các phần tử danh sách bên trong danh sách lồng nhau có nhiều hơn một cấp. Hãy xem một ví dụ để hiểu cách nó hoạt động: ul > li { list-style: square; } ul > li ol { list-style: none; }Quy tắc kiểu bên trong bộ chọn ul > li chỉ áp dụng cho những phần tử <li> là con trực tiếp của các phần tử <ul> và không ảnh hưởng đến các phần tử danh sách khác. Bộ chọn anh chị em liền kềCác bộ chọn anh chị em liền kề (adjacent sibling selector) có thể được sử dụng để chọn các phần tử anh chị em (nghĩa là các phần tử ở cùng cấp). Bộ chọn này có cú pháp như: E1 + E2, trong đó E2 là đích của bộ chọn. Bộ chọn h1 + p trong ví dụ sau sẽ chỉ chọn các phần tử <p> nếu cả phần tử <h1> và phần tử <p> đều có chung gốc trong cây tài liệu và phần tử <h1> ngay trước phần tử <p>. Điều đó có nghĩa là chỉ những đoạn văn xuất hiện ngay sau mỗi phần tử <h1> mới được áp dụng các quy tắc CSS này. Hãy xem bộ chọn này thực sự hoạt động như thế nào: h1 + p { color: blue; font-size: 18px; } ul.task + p { color: #f0f; text-indent: 30px; }Bộ chọn anh chị emBộ chọn anh chị em tương tự như bộ chọn anh chị em liền kề (E1 + E2), nhưng nó ít nghiêm ngặt hơn. Một bộ chọn anh chị em được tạo thành từ hai bộ chọn đơn giản được phân tách bằng ký tự dấu ngã (∼). Nó có thể được viết như sau: E1 ∼ E2, trong đó E2 là đích của bộ chọn. Bộ chọn h1 ∼ p trong ví dụ bên dưới sẽ chọn tất cả các phần tử <p> có phần tử <h1> đứng trước, trong đó tất cả các phần tử <h1> và <p> có chung một gốc trong cây tài liệu. h1 ∼ p { color: blue; font-size: 18px; } ul.task ∼ p { color: #f0f; text-indent: 30px; }Các bộ chọn phức tạp hơn như bộ chọn thuộc tính, pseudo-class, pseudo-element. Chúng ta sẽ thảo luận chi tiết về các bộ chọn này trong các chương sắp tới. Gom nhóm bộ chọnThông thường, một số bộ chọn trong một stylesheet CSS chia sẻ các khai báo quy tắc CSS giống nhau. Bạn có thể nhóm chúng thành một danh sách được phân tách bằng dấu phẩy để thu nhỏ mã trong stylesheet CSS của mình. Nó cũng ngăn bạn lặp đi lặp lại các quy tắc CSS giống nhau. Hãy cùng xem: h1 { font-size: 36px; font-weight: normal; } h2 { font-size: 28px; font-weight: normal; } h3 { font-size: 22px; font-weight: normal; }Như bạn có thể thấy trong ví dụ trên, quy tắc CSS font-weight: normal; được chia sẻ bởi các bộ chọn h1, h2 và h3. Vì vậy nó có thể được nhóm trong một danh sách bằng dấu phẩy, như thế này: h1, h2, h3 { font-weight: normal; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
Vùng chọn trong CSS đóng vai trò rất quan trọng khi viết CSS, bởi vì nếu bạn sử dụng vùng chọn sai thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi hoặc thực thi không đúng chỗ. Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng chọn là kỹ thuật quan trọng đầu tiên khi bạn sử dụng CSS. Vùng chọn trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ cái gì từ thẻ <body> đi sâu vào các thẻ bên trong nó. Ở bài này mình sẽ nói qua các kiểu sử dụng vùng chọn cơ bản nhất vì bạn sẽ sử dụng nó thường xuyên nhất, ngoài ra còn có các kiểu sử dụng vùng chọn nâng cao khác mình sẽ nói ở gần cuối serie. Vùng chọn là gì?Trong CSS, vùng chọn nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ h1 thì vùng chọn của bạn sẽ là h1. Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML. Các loại vùng chọn cơ bảnVùng chọn dựa vào tên thẻKiểu vùng chọn này là đơn giản nhất, đó là nó sẽ chọn toàn bộ các phần tử trên tài liệu HTML dựa vào tên thẻ có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối style cho toàn bộ thẻ h1 trong website thì sẽ có đoạn CSS sau với vùng chọn h1. Dĩ nhiên với kiểu sử dụng vùng chọn này thì toàn bộ các thẻ HTML trong website được chọn trong CSS đều biến đổi theo, tức là bạn không thể sử dụng kiểu chọn tên thẻ để viết CSS cho một khu vực độc lập. Vùng chọn dựa vào IDVùng chọn dựa vào ID (tên định danh) nghĩa là bạn có thể chọn một phần tử cụ thể dựa vào giá trị của thuộc tính id trong thẻ HTML. Sở dĩ vùng chọn id được sử dụng để chọn một phần tử cụ thể là vì trên một trang tài liệu HTML thì mỗi phần tử phải mang một id riêng biệt không trùng nhau. Id được thiết lập dựa vào thuộc tính id trong thẻ HTML và bất cứ thẻ nào cũng có thể sử dụng id. Khi viết tên id vào CSS thì nó phải có dấu thăng (#tên-id) đặt trước tên id để phân biệt với các loại vùng chọn khác. Ví dụ: Rõ ràng bạn thấy ở ví dụ trên mình có hai thẻ h1 nhưng mình muốn viết CSS cho một thẻ h1 cụ thể nào đó thì sẽ đặt id riêng cho phần tử mà mình cần viết CSS thay vì sử dụng vùng chọn dựa theo tên thẻ. Ngoài ra còn có một cách viết vùng chọn theo id khác là viết kèm theo tên thẻ đang sử dụng id đó như h1#post-title, lưu ý là phải viết sát nhau. Hãy lưu ý rằng, một thẻ có thể sẽ chứa nhiều id khác nhau và mỗi tên id sẽ được cách nhau bởi khoảng trắng như thế này. [html]<h1 id="post-title sticky">Hello</h1>[/html] Vùng chọn dựa vào ClassClass (lớp) cũng rất được sử dụng phổ biến như id nhưng một điểm khác biệt của class là một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn id thì chỉ được sử dụng một lần duy nhất cho một phần tử. Class được khai báo trong một phần tử HTML bởi thuộc tính class như <h1 class="tên-class">. Khi khai báo vùng chọn class trong CSS, thì tên class phải được đặt sau dấu chấm (.tên-class). Ví dụ về cách sử dụng class linh hoạt: Cũng giống như id, class cũng có thể được viết kèm theo tên thẻ kiểu h1.sticky và phải viết liền nhau. Vùng chọn theo thứ cấpKiểu vùng chọn này bạn cũng sẽ sử dụng rất thường xuyên, đặc biệt là khi tiến hành viết CSS cho website đó là chọn phần tử theo thứ cấp. Nghĩa là với vùng chọn này, bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó. Ví dụ mình có một đoạn HTML thế này: [html] <ul id="menu"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> |