Rule CSS Cơ Bản

Để làm chủ được CSS, trước hết chúng ta cần hiểu được cấu trúc của một rule CSS. Tiếp đến là sử dụng thuần thục selector.

Cấu trúc một rule CSS cơ bản

Chúng ta bắt đầu bằng cách phân tích một rule CSS. Các bạn cùng mình xem hình ảnh bên dưới:

Một rule CSS gồm:

  • Selector
  • Khai báo các thuộc tính
    • Các dòng khai báo này được bao lại bởi một cặp ngoặc nhọn
    • Các thuộc tính được khai báo theo cú pháp: “tên thuộc tính: giá trị”. Giữa tên thuộc tính và giá trị được phân cách bởi dấu hai chấm
    • Mỗi dòng khai báo thuộc tính sẽ được kết thúc bằng một dấu chấm phẩy

Selector

CSS sử dụng các selector để tìm kiếm các phần tử HTML mà bạn muốn định kiểu. Để hình dung rõ hơn, các bạn trước hết xem qua khái niệm HTML DOM. Các trình duyệt web sẽ xem một tài liệu HTML của chúng ta giống một cấu trúc dữ liệu dạng cây. Các phần tử HTML của chúng ta lúc này tương đương với các node trên cây DOM.

Vậy khi chúng ta muốn thay đổi style của một node nào đó. Chúng ta phải đưa được một chỉ dẫn cụ thể, để trình duyệt web có thể tìm được node đó trên cây DOM. Chỉ dẫn này được gọi là ‘selector’.

Một cách thực tế hơn. Ví dụ bạn và ‘gấu’ muốn cột một dải vải hồng lên ‘Cây Tình Yêu’ ở thành phố Đà Lạt.

Việc đầu tiên 2 bạn làm sẽ phải làm là chọn một chỗ để đính dải vải lên. Khi bạn đã ưng ý rồi, việc tiếp theo là mô tả được vị trí cho người còn lại. Lúc này, bạn sẽ phải tìm cách mô tả sao cho đơn giản và chính xác nhất. Ví dụ:

  • Cái cành trống trơn, chưa có ai cột
  • Từ cành lớn nhất, có cái cành con mới mọc bên tay phải
  • Cái cành có cái tổ chim

Những chỉ dẫn trên trong CSS được gọi là selector.

Biểu diễn trực quan tài liệu HTML

Để chuẩn bị tìm hiểu chi tiết hơn về selector. Mình có một  tài liệu HTML và một biểu dạng cây biểu diễn trực quan cấu trúc tài liệu HTML này.

Các bạn có thể xem, tài liệu HTML của chúng ta khi chưa được thêm CSS vào. Để đơn giản hóa tránh tạo quá nhiều file. Trong các ví dụ về selector bên dưới. Mình sẽ sử dụng internal CSS trong mỗi file. Các bạn có thể sử dụng chức năng ‘view source’ để theo dõi.

Và tới hiện tại, chúng ta chỉ mới bắt đầu với CSS. Nên mình cũng chỉ sử dụng 1 thuộc tính đơn giản để đổi màu chữ.  Chúng ta sẽ tập trung và ‘selector’ trước đã nhé.

Selector cơ bản

Chúng ta sẽ khởi động với những selectors cơ bản nhất nhé.

Element name

Dựa vào tên các phần tử HTML. Ví dụ: h1, h2, h3, … p, ul, li.

Với ví dụ này, khi duyệt qua tài liệu HTML. Trình duyệt web sẽ tìm các mẫu đúng với selector. Trong trường hợp này là phần tử p. Vậy các phần tử p đều bị áp rule này. Các bạn có thể xem kết quả tại đây.

Class name

Thuộc tính class là một ‘global attribute’. Do đó, tất cả các tags HTML đều có thuộc tính này. Thông thường, người ta sẽ sử dụng thuộc tính class để đánh dấu các phần tử HTML. Việc đánh dấu này giúp cho CSS và JavaScript có thể dễ dàng tìm kiếm phần tử này hơn.

Một phần tử HTML không nhất thiết phải sử dụng thuộc tính class. Khi sử dụng thuộc tính class, nó có thể có 1 hay nhiều giá trị, các giá trị này được ngăn cách với nhau bằng một khoảng trắng. Ví dụ:

Ta có thể sử dụng tên của class làm selector. Để chỉ dẫn cho trình duyệt biết, đây là tên một class. CSS quy ước, khi sử dụng tên class làm selector, chúng ta sẽ thêm dấu chấm “.” vào trước tên class.

Với ví dụ này, bất kỳ phần tử nào có thuộc tính class có giá trị “tieu-de” sẽ bị áp rule này. Các bạn có thể xem kết quả tại đây.

ID name

Bên cạnh class, chúng ta có thuộc tính id cũng là một “global attribute”. Id cũng tương tự class, dùng để đánh dấu các phần tử HTML, giúp cho CSS và JavaScript dễ dàng xác định phần tử hơn. Điểm khác biệt duy nhất giữa id là tính duy nhất của nó. Chúng ta quy ước, trên cùng 1 tài liệu, sẽ không có 2 phần tử có thuộc tính id trùng nhau.

Và khi sử dụng id làm selector, CSS quy ước tên của selector này sẽ được bắt đầu bằng đấu thăng “#”.

Với ví dụ này, phần tử nào có thuộc tính id với giá trị “tieu-de-bai-viet” sẽ bị áp rule này. Các bạn có thể xem kết quả tại đây.

Universal

Trong CSS, chúng ta cũng được phép sử dụng ký tự ‘*’ (dấu sao, dấu hoa thị, asterisk…) để đại diện cho ‘tất cả’. Trong trường hợp muốn đồng bộ tất cả các phần tử của tài liệu HTML. Chúng ta có thể sử dụng selector này.

Với ví dụ này, rõ ràng tất cả các phần tử của chúng ta đều bị áp dụng. Các bạn có thể xem kết quả tại đây.

Attribute selectors

Trong thực tế, có những lúc chúng ta cần định dạng cho một vài phần tử thông qua thuộc tính của nó. Các bạn có nhớ phần tử Form không? Trong phần tử form chúng ta có các phần tử input. Chúng ta sẽ cần định dạng các phần tử này theo từng biến thể. Dựa vào các thuộc tính như type, name… chúng ta cũng có thể chỉ định được chúng một cách dễ dàng.

Trong ví dụ này, mình có 1 form gồm 3 phần tử input:

Bây giờ mình sẽ sử dụng thuộc tính type, quy định những text input có màu chữ là màu đỏ nhé.

Các bạn có thể xem kết quả tại đây.

Selector theo nhóm

Ngoài việc dử dụng đơn lẻ các selector, chúng ta có thể quy định 1 rule cho nhiều selectors 1 lần. Để làm vậy, chúng ta chỉ cần liệt kê các selectors phía trước rule. Các selectors được ngăn cách với nhau bằng một dấu phẩy.

Chúng ta có thể sử dụng rất nhiều selectors cho một rule. Các bạn có thể xem kết quả tại đây.

Combinators

Các selectors này được dùng để xác định vị trí tương quan giữa các phần tử.

Adjacent sibling selectors

Tìm kiếm 2 phần tử là anh em liền kề. Cú pháp của selector này phần_tử_anh + phần_tử_em. Ví dụ cụ thể:

Với selector này, trình duyệt sẽ tìm những phần tử p đi liền phía sau 1 phần tử h1. Các bạn có thể xem kết quả tại đây.

General sibling selectors

Cũng với mục đích tìm các phần tử anh em. Nhưng kết quả của selector này không phân biệt thứ tự như adjacent sibling selector. Cú pháp của selector này phần_tử_anh ~ phần_tử_anh_em. Ví dụ cụ thể:

Với selector này, trình duyệt sẽ tìm những phần tử p là anh em với phần tử có class ‘tieu-de’. Các bạn có thể xem kết quả tại đây.

Child selectors

Tất cả các phần tử con. Cú pháp của selector này là phần_tử_chả > phần_tử_con. Trong ví dụ, mình sẽ tìm tất cả các phần tử p là con của phần tử body.

Các bạn có thể xem kết quả tại đây.

Descendant selectors

Tất cả các phần tử hậu duệ (con, cháu, chắt …). Cú pháp của selector này là phần_tử_chả  phần_tử_hậu_duệ (ở giữa là 1 dấu khoảng trắng). Trong ví dụ, mình sẽ tìm tất cả các phần tử p là hậu duệ (nằm trong) của phần tử body.

Các bạn có thể xem kết quả tại đây.

Pseudo

Chúng ta có thể hiểu ‘Pseudo’ trong trường hợp này nói đến những đối tượng không phải là một phần tử HTML. Chúng nhắm đến tính chất của các phần tử HTML.

Pseudo classes

Được dùng để chỉ trạng thái của một phần tử HTML. Danh sách các pseudo classes.

Mục đích chính khi sử dụng các pseudo classes nhằm tăng trải nghiệm của người dùng. Trong ví dụ bên dưới, mình sẽ đổi màu các liên kết người dùng đã từng truy cập thành màu đỏ.

Pseudo classes thường đi kèm với 1 selector chỉ định phần tử, nó nối với selector phía trước bằng một dấu hai chấm.

Các bạn có thể xem kết quả tại đây.

Pseudo elements

Được dùng để chỉ một phần của phần tử HTML. Danh sách các pseudo elements.

Chúng ta thường sử dụng pseudo elements trong các trường hợp không muốn làm phức tạp hoặc phá vỡ cấu trúc sẵn có của tài liệu HTML.

Tương tự pseudo classes. Chúng ta thường sử dụng pseudo elements nối tiếp 1 selector chỉ định phần tử.  Nó được nối với selector chỉ định phần tử bằng hai dấu hai chấm.

Với đoạn CSS này, chỉ một phần (dòng đầu tiên) của phần tử p đổi thành màu đỏ. Các bạn có thể xem kết quả tại đây. Nếu tất cả thẻ p đều đỏ, bạn có thể thu nhỏ cửa sổ trình duyệt web lại để thấy rõ hơn.

Kết hợp các selectors

Phía trên, mình đã giới thiệu với các bạn những selectors cơ bản. Chia chúng ra thành các nhóm nhỏ để các bạn dễ hiệu và dễ nhớ.

Nhưng trong thực tế, các tài liệu HTML của chúng ta rất lớn và phức tạp. Nhu cầu sử dụng CSS để định style cho các phần tử rất phức tạp (đôi lúc cần định style cho từng dấu chấm, dấu phẩy). Do đó, chúng ta phải kết hợp các selectors cơ bản, thành các selectors phức tạp hơn. Để chọn được chính xác các phần tử HTML.

Ví dụ 1: Chúng ta sẽ kết hợp giữa selector ‘id name’ và ‘Child selectors’ để tìm tất cả các thẻ p là con của section có id là ‘dinh-nghia’:

Các bạn có thể xem kết quả tại đây.

Ví dụ 2: Chúng ta sẽ chọn các đoạn văn bản có số thứ tự lẻ của section có id là ‘dinh-nghia’:

Các bạn có thể xem kết quả tại đây.