Để 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.
Nội dung
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <title>Trí tuệ nhân tạo</title> </head> <body> <h1 id="tieu-de-bai-viet"> Vài nét về trí tuệ nhân tạo và ứng dụng của nó </h1> <p class="gioi-thieu"> Thế kỉ 21 với sự bùng nổ của cách mạng khoa học- công nghệ, nhiều thuật ngữ mới mẻ được ra đời trong đó có trí tuệ nhân tạo (AI). Vậy AI là gì, nó ảnh hưởng gì đến cuộc sống, nó có an toàn không và chúng ta có thể ứng dụng gì từ nó? Bài viết này sẽ giải đáp những thắc mắc cơ bản của bạn về AI một cách dễ hiểu nhất. </p> <section id="dinh-nghia"> <h2 class="tieu-de">Định nghĩa về trí tuệ nhân tạo - AI</h2> <p>Trí tuệ nhân tạo - AI, tiếng anh là Artificial Intelligence, có nghĩa là trí thông minh của máy tính được tạo ra bởi những lập trình của con người với mục tiêu giúp máy tính có được hành vi thông minh tự động hóa giống con người.</p> <p>Con người sử dụng các hệ thống machine learning - học máy để làm cho máy tính có khả năng mô phỏng trí tuệ con người trong những xử lí mà con người thường làm tốt hơn máy tính.</p> <p>Nói cách khác là chúng ta nghiên cứu nguyên lí hoạt động trí thông minh ở người, cải biến và áp dụng nó lên máy tính một cách phù hợp, khiến chúng có thể xử lí các yêu cầu từ người dùng đạt kết quả như con người hoặc hơn con người.</p> <p>Ví dụ: AI giúp máy tính biết suy nghĩ và lập luận, giao tiếp bình thường, nói được như con người, tự học và thích nghi...</p> <p>Tiêu chí để đánh giá AI của máy chính là cách chúng xử lý vấn đề dẫn đến kết quả tương đương với con người hay tốt hơn con người thì chúng sẽ được công nhận là có trí thông minh.</p> <p>Tuy nhiên, hiện nay, định nghĩa về AI chưa thực sự thống nhất, còn tồn tại một số quan điểm khác nhau về trí tuệ nhân tạo AI.</p> </section> <section id="quan-diem"> <h2 class="tieu-de">Một số quan điểm về AI</h2> <h3>Thứ nhất là ba hệ thống khác nhau về AI:</h3> <ul> <li>AI phân tích: dựa trên kết quả dữ liệu trong quá khứ để phân tích để thông báo các quyết định trong tương lai</li> <li>AI con người: có cả những yếu tố cảm xúc, nhận định, nhận thức như con người</li> <li>AI nhân cách hóa: có các đặc điểm của tất cả các loại trí tuệ nhận thức, cảm xúc và xã hội, có khả năng tự ý thức và tự nhận thức được trong các tương tác</li> </ul> <h3>Thứ hai là 2 trường phái về AI:</h3> <ul> <li>Strong AI: máy tính có trí thông minh và chương trình thông minh hơn con người</li> <li>Weak AI: chương trình máy tính mô phỏng hành vi thông minh của con người</li> </ul> <h3>Thứ ba là mô tả một vài định nghĩa khác về AI là:</h3> <ul> <li>Hành động giống con người</li> <li>Suy nghĩ giống con người</li> <li>Suy luận hợp lý</li> <li>Hành động hợp logic</li> </ul> </section> </body> </html> |
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.
|
1 2 3 |
p { color: red; } |
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ụ:
|
1 2 3 4 5 6 7 8 |
<!-- Phần tử h1 không có thuộc tính class --> <h1>Trí tuệ nhân tạo</h1> <!-- Phần tử h1 có thuộc tính class với 1 giá trị --> <h1 class="tieu-de">Trí tuệ nhân tạo</h1> <!-- Phần tử h1 có thuộc tính class với nhiều giá trị --> <h1 class="tieu-de canh-giua">Trí tuệ nhân tạo</h1> |
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.
|
1 2 3 |
.tieu-de { color: red; } |
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 “#”.
|
1 2 3 |
#tieu-de-bai-viet { color: red; } |
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.
|
1 2 3 |
* { color: red; } |
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:
|
1 2 3 4 5 |
<form> <input type="text"> <br> <br> <input type="number"> <br> <br> <input type="email"> <br> </form> |
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é.
|
1 2 3 |
input[type=text] { color: red; } |
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.
|
1 2 3 |
h1, h2, h3, h4, h5, h6 { color: red; } |
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ể:
|
1 2 3 |
h1 + p { color: red; } |
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ể:
|
1 2 3 |
.tieu-de ~ p { color: red; } |
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.
|
1 2 3 |
body > p { color: red; } |
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.
|
1 2 3 |
body p { color: red; } |
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.
|
1 2 3 |
a:visited { color: red; } |
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.
|
1 2 3 |
p::first-line { color: red; } |
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’:
|
1 2 3 |
#dinh-nghia p { color: red; } |
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’:
|
1 2 3 |
#dinh-nghia p:nth-child(odd) { color: red; } |
Các bạn có thể xem kết quả tại đây.
