CSS (Cascading Style Sheet) hiện nay được áp dụng rất nhiều trong việc hỗ trợ thiết kế giao diện web, tuy nhiên sử dụng CSS thế nào cho hiệu quả thì không phải là điều ai ai cũng nắm rõ.
Xin được giới thiệu với các bạn series bài về việc áp dụng CSS trong thực tế thiết kế web. Series nhắm đến đối tượng các bạn mới bắt đầu con đường khám-và-phá CSS, qua series tôi muốn chuyển đến các bạn một số kinh nghiệm sử dụng tối ưu CSS.
Bài 2 : Chọn sao cho đúng?
Chọn gì?
CSS sử dụng các selector để chọn và lọc các phần tử (element) trên trang. Có khá nhiều bộ selector được định nghĩa nhằm hỗ trợ cho việc thiết kế đơn giản và gọn nhẹ. Mỗi bộ selector có thể được hiểu như một quy tắc hỗ trợ trình duyệt chọn các phần tử trên trang ứng với từng ngữ cảnh (context) trên trang ở thời điểm chạy thật (runtime). Vậy có bao nhiêu loại selector, hãy cùng tôi điểm qua một lượt nhé 🙂
- Tag selector : Chọn phần tử trên trang theo tên thẻ
- Class selector : Chọn phần tử trên trang theo tên lớp
- ID selector : Chọn phần tử trên trang theo ID
- Attribute selector : Chọn phần tử trên trang với một thuộc tính cụ thể
- Pseudo-class selector : Chọn phần tử trên trang dựa trên lớp giả
Sơ bộ là thế, tất nhiên bạn có thể kết hợp các selector với nhau để tạo nên một bộ selector chính xác hơn. Giờ ta đi vào phần chính nhé, ngâm cứu từng tên một!
Đoạn mã HTML chuẩn
Xuyên suốt cả bài viết này, tôi chỉ sử dụng duy nhất một đoạn mã HTML, tuy nhiên tôi sẽ sử dụng những bộ selector khác nhau để thực hiện việc chọn và định dạng thể hiện các phần tử trên trang. Sau đây là đoạn mã HTML chuẩn:
| Đoạn mã 1 : Đoạn mã chuẩn |
| <style> /* Nội dung thẻ <style> sẽ thay đổi theo từng ví dụ, ở các ví dụ sau, tôi xin chỉ trích dẫn phần nội dung của thẻ <style> */ </style> <div id=”hello”>Xin chào <span id=”good” class=”awesome”>các độc giả <span id=”hi” class=”great”>của</span> <a id=”sticky” class=”valuable” href=”http://tapchilaptrinh.wordpress.com/”>Tạp chí lập trình</a> và toàn thể <span id=”cool” class=”cute”>các <a href=”#” class=”link” target=”_blank”>bạn</a> đang</span> đọc <i class=”silly”>bài viết</i> <b class=”cute”>này</b> </span> <div id=”happy” class=”funny”> <span class=”silly”>Đây là bài hướng dẫn về các <b class=”great”>selector</b> trong CSS</span> </div> </div> |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Các selector chuẩn của CSS
Tag Selector
Tag Selector cho phép bạn chọn một tập hợp các thẻ trên trang. Hãy xem qua ví dụ sau.
| Đoạn mã 2 : Sử dụng Tag Selector trong CSS |
| b { color: green; } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Ở đây ta sử dụng Tag Selector để chọn tất cả những thẻ <b> trên trang. Như bạn có thể thấy, các thẻ <b> đều được định dạng với đoạn mã CSS khiến chúng đổi màu chữ sang xanh lá cây.
Cú pháp của selector này là:
tên-thẻ
{
/*CSS*/
}
Bạn cũng có thể chọn tất cả các thẻ trên trang với dạng đăc biệt của Tag Selector, thay vì tên thẻ ta thay bằng dấu sao ( * ), cụ thể như sau:
| Đoạn mã 3 : Sử dụng Tag Selector (và trường hợp đặc biệt) trong CSS |
| * { color: orange; } b { color: green; } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Thật thú vị phải không, chỉ với một selector ta có thể định dạng cho tất cả các thẻ trên trang 🙂
Class Selector
Class Selector cũng cho phép bạn chọn một tập hợp các phần tử trên trang nhưng với tiêu chí khác, thay vì tất cả phải cùng một kiểu thẻ, ở đây ta có thể chọn các phần tử có chung thuộc tính class. Đi vào minh họa nhé 🙂
| Đoạn mã 4 : Sử dụng Class Selector trong CSS |
| .cute { color: red; } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Tất cả các phần tử với class là “cute” đều được đoạn mã CSS định dạng cho hiển thị với màu chữ đỏ, bất kẻ là chúng nằm trong loại thẻ nào.
Cú pháp của selector này là:
.tên-class
{
/*CSS*/
}
ID Selector
Trái với 2 selector trên, ta có thể chọn một lúc nhiều phần tử trên trang dựa trên một quy tắc xác định, với ID Selector bạn chỉ có thể chọn một và chỉ một phần tử trên trang có ID được nêu ra mà thôi.
| Đoạn mã 5 : Sử dụng ID Selector trong CSS |
| #good { color: orange; } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Phần tử được đặt ID với giá trị good được ID Selector chọn để định dạng với chữ màu cam.
Cú pháp của selector này là:
#id-của-phần-tử
{
/*CSS*/
}
Attribute Selector
Attribute Selector cho phép bạn chọn bất kỳ thẻ nào trên trang, dựa trên các thuộc tính của thẻ. Cùng nhòm qua đoạn mã CSS nhé.
| Đoạn mã 6 : Sử dụng Attribute Selector trong CSS |
| [target] { color: violet; } [id=sticky] { color:red; } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Như bạn thấy, để chọn các thẻ trong trang có đặt thuộc tính target (bất kể giá trị của target là gì) ta chỉ cần sử dụng selector [target], khi đó thẻ tương ứng sẽ được chọn và hiển thị với màu tím. Thực ra trên là một biến thể (có thể gọi là trường hợp đặc biệt) của selector tổng quát ngay bên dưới, selector [id=sticky] sẽ chọn các phần tử có thuộc tính id với giá trị ‘sticky’ (tất nhiên việc chọn id ở đây là một trường hợp đặc biệt, bạn hoàn toàn có thể chọn các thuộc tính khác) và định nghĩa cách hiển thị cho nó. Thật tiện lợi khi bạn có thể chọn các đối tượng trên trang khi biết rõ các thuộc tính của chúng, không quan tâm tới chúng là loại thẻ gì, class gì, id ra sao…
Cú pháp của selector này là:
[thuộc-tính=giá-trị]
{
/*CSS*/
}
Cú pháp của selector này trong phiên bản rút gọn là:
[thuộc-tính]
{
/*CSS*/
}
Pseudo-Class Selector
Pseudo-Class Selector (selector dựa trên lớp giả) thường được sử dụng để chọn các phần tử trên trang ứng theo một quy ước dựng sẵn, nghe có vẻ lùm xùm. Thôi cứ nhảy vào thực hành rồi ta quay lại mớ lý thuyết khô khan phức tạp sau.
| Đoạn mã 7 : Sử dụng Pseudo-Class Selector trong CSS |
| :link { color: red; } :visited { color: orange; } :first-letter { color: green; } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Trước hết là lớp giả :link, selector này chọn tất cả các liên kết trên trang, vậy là nó sẽ chọn 2 liên kết “Tạp chí lập trình” và “bạn” khiến chúng có màu đỏ. Ô! Thế tại sao liên kết “bạn” lại có màu cam?! À đó là vì tôi đã cố ý nhấn vào liên kết đó trước, việc đó khiến liên kết trở thành dạng “đã viếng thăm” và theo selector :visited, nó sẽ được định dạng hiển thị màu cam.
Thêm một ví dụ khác sử dụng lớp giả, selector :first-letter giúp bạn chọn các ký tự đầu tiên của mỗi đoạn (thẻ <div> hoặc thẻ <p>), cụ thể ở ví dụ trên, các ký tự “X” (của chữ Xin, của đoạn trên) và ký tự “Đ” (của chữ Đây, của đoạn dưới) được chọn và hiển thị với màu xanh lá cây (mách nhỏ bạn nhé, lớp giả này rất hữu dụng trong việc tạo hiệu ứng Drop-Cap :P).
Cú pháp của selector này là:
:tên-lớp-giả
{
/*CSS*/
}
Do lớp giả là dựng sẵn nên chỉ có một số lượng giới hạn các lớp giả, hãy nhòm qua bảng dưới với danh sách các lớp giả của CSS.
| Lớp giả | Mô tả |
| :link | Các liên kết chưa viếng thăm |
| :visited | Các liên kết đã viếng thăm |
| :active | Các liên kết đang được kích hoạt |
| :hover | Các đối tượng chuột đang di chuyển trên |
| :focus | Các đối tượng đang nhận tiêu điểm của con trỏ |
| :first-letter | Chữ cái đầu tiên của đoạn |
| :first-line | Dòng đầu tiên của đoạn |
| :first-child | Phần tử con đầu tiên |
| :before | Phía trước (xem thêm ví dụ bên dưới) |
| :after | Phía sau (xem thêm ví dụ bên dưới) |
Hai lớp giả :before và :after hỗ trợ bạn định dạng phần nội dung trước và sau của đối tượng được chọn, khi sử dụng phải kết hợp với thuộc tính content trong CSS, ví dụ:
| Đoạn mã 8 : Sử dụng Pseudo-Class :before và :after |
| :before { content: ‘*’; } :after { content: ‘=’; } |
 * |
Bạn có thể thấy, ngay trước mỗi thẻ, việc dùng :before sẽ khiến trình duyệt chèn thêm dấu sao ( * ) vào phía trước và ngay sau mỗi thẻ thì sẽ được chèn dấu bằng ( = ).
Kết hợp!
Ở trên tôi đã giới thiệu sơ qua một lượt về các selector cơ bản, tuy nhiên trong thực tế, để đạt được hiểu quả tối đa trong việc sử dụng CSS, ta cần kết hợp các selector với nhau. Lại đi vào minh họa cụ thể nhé 🙂
| Đoạn mã 9 : Sử dụng kết hợp các selector trong CSS |
| /* 9.1 */ div span #cool, div b { color:red; } /* 9.2 */ span>.cute:hover { color: orange } |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
| Xin chào các độc giả của Tạp chí lập trình và toàn thể các bạn đang đọc bài viết này Đây là bài hướng dẫn về các selector trong CSS |
Ở đoạn mã số 9, tôi xin được tách nhỏ ra 2 đoạn mã con là 9.1, 9.2. Mỗi đoạn mã minh họa một cách kết hợp CSS để hỗ trợ chọn các phần tử trên trang cho hợp lý và thuận tiện.
Ở đoạn 9.1, chúng ta chọn phần tử có id là ‘cool’ nằm trong thẻ <span> mà thẻ <span> đó phải nằm trong thẻ <div>. Ngoài ra, đoạn 9.1 còn chọn cả các thẻ <b> nằm trong thẻ <div>. Tất cả chúng đều được định dạng hiển thị với màu đỏ. Việc viết các selector cạnh nhau, phân tách bởi dấu cách ( ) sẽ khiến trình duyệt chọn các phần tử phân cấp dạng cha-con. Dấu phẩy (,) có thể được sử dụng để phân tách nhiều bộ selector khi chúng có chung một định dạng CSS.
Ở đoạn 9.2, việc kết hợp cũng tương tự như 9.1 nhưng hãy để ý việc sử dụng lớp giả, trên ví dụ khi ta đưa chuột lên chữ “này” nó sẽ đổi từ đỏ sang cam. Ngoài ra, hãy để ý tới dấu lớn hơn (>), dấu lớn hơn ở đây hướng dẫn cho trình duyệt hiểu chỉ chọn những thẻ có class là cute là thẻ con trực tiếp của thẻ span mà thôi.
Đôi lời kết
Cho dù tôi đã cố gắng lồng ghép các ví dụ vào cho nội dung đỡ khô khan, nhưng để đảm bảo rằng bạn nắm được cách sử dụng các selector trong CSS một các đầy đủ nhất, hãy thử tự vọc xem sao nhé. Hãy đón chờ thêm các bài khác thuộc series “CSS – Áp dụng trong thực tiễn” nhé 🙂
Nguyễn Trí Trung – FIS.PFS Developer
trungnt22@fpt.com.vn
facebook.com/trungnguyentri
