Chào mừng các bạn đã trở lại với Series HTML & CSS căn bản!
Trong bài giảng trước, chúng ta đã tìm hiểu được CSS là gì, cũng như vai trò và vị trí của CSS trong 1 trang HTML. Trong bài giảng này, chúng ta sẽ tiếp tục tìm hiểu về CSS, ở một mức độ chuyên sâu hơn một chút, đó chính là cấu trúc trong cú pháp của CSS!
TÓM TẮT NỘI DUNG
Cú pháp của CSS
Cú pháp của CSS thể hiện rõ ràng và đầy đủ nhất ở dạng External CSS và Internal CSS. Chính vì vậy, ta có thể xem cú pháp của External CSS và Internal CSS là đại diện cho cú pháp của CSS.
Cấu tạo của 1 file/đoạn mã CSS bao gồm thành phần cơ bản nào?
Rule (quy tắc)
Nếu 1 trang/văn bản HTML được cấu tạo từ các phần tử HTML, thì 1 file/đoạn mã CSS sẽ được cấu tạo từ các “Rule” hay “CSS Rule” (quy tắc), trong đó mỗi rule sẽ mang chức năng quy định về định dạng màu sắc, hình dạng, phong cách… của các element (phần tử) trong 1 trang HTML. Ở dạng External CSS, các rule được tách biệt nhau bởi “xuống hàng” hoặc “khoảng trắng”.
| Mô hình các CSS Rule được viết theo dạng xuống hàng | Mô hình các CSS Rule được viết chung 1 hàng |
rule-1
|
rule-1 rule-2 rule-3 rule-4 ... rule-n |
Khá đơn giản đúng không nào? Tiếp theo chúng ta sẽ đi chi tiết vào cú pháp của 1 Rule trong CSS.
Cú pháp của 1 CSS Rule bao gồm những gì?
Cú pháp của 1 Rule trong CSS bao gồm 3 thành phần chính: Selector, Property và Property Value được thể hiện như sau:
| Mô hình cú pháp | Ví dụ |
selector { property-n: property-n
Trong đa số các trường hợp, một rule CSS được viết theo dạng xuống hàng, trong đó selector sẽ nằm riêng một hàng, property và property value tương ứng sẽ nằm riêng một hàng. |
p { |
selector { property-1: property-value-1; property-2: property-value-2; ... property-n: property-n }
Trong một số trường hợp khác, người lập trình có thể đặt tất cả các thành phần của 1 CSS Rule trên cùng 1 hàng, nhằm tiết kiệm không gian và dung lượng của file. |
p {font-size: 15px; margin-bottom: 5px} .a1 {background-color: red; color: white} #z1 {border-radius: 5px; border: 1px solid red;} |
Và sau đây, chúng ta sẽ cùng tìm hiểu nguyên lý và ý nghĩa của từng thành phần.
Selector (bộ chọn)
Vai trò chủ đạo của CSS chính là cung cấp cho HTML, hay nói đúng hơn là các element (phần tử) HTML những định dạng về màu sắc, hình dạng, phong cách… Có những lúc 1 Rule trong CSS được dùng để định dạng cho toàn bộ nội dung của 1 trang HTML, nhưng có những lúc, 1 Rule trong CSS được dùng để định dạng cho một hay vài phần tử trong trang HTML đó. Vậy làm cách nào để lập trình viên có thể xác định được element (phần tử) mà mình muốn định dạng khi viết các đoạn mã CSS? Câu trả lời cũng chính là vai trò của Selector (bộ chọn).
Nhiệm vụ của selector (bộ chọn) trong 1 Rule CSS là để chỉ định (các) target element (phần tử) trong HTML sẽ được định dạng bởi Rule CSS đó.
Cách viết CSS selector ở trạng thái cơ bản
| Cú pháp | Ý nghĩa | Ví dụ |
| tag-name(Tên thẻ HTML) | Định dạng cho tất cả các phần tử HTML trong trang/văn bản có thẻ trùng với selector | p {....}
Định dạng cho tất cả các phần tử thẻ p trong trang |
| .class-name(Dấu chấm kết hợp với tên class) | Định dạng cho tất cả các phần tử HTML có thuộc tính class mang giá trị trùng với selector | .a1 {...}
Định dạng cho tất cả các phần tử có thuộc tính class mang giá trị a1 |
| #id-name(Dấu thăng kết hợp với tên id) | Định dạng cho tất car các phần tử HTML có thuộc tính id mang giá trị trùng với selector | #z1 {...}
Định dạng cho tất cả các phần tử có thuộc tính id mang giá trị z1 |
Ngoài 3 trạng thái cơ bản trên, CSS Selector còn có một số trạng thái nâng cao khác, tuy nhiên hoccode.org sẽ phân tích kỹ những nội dung đó trong một series bài giảng khác. Các bạn chờ đón xem nhé!
Property(tạm dịch là thuộc tính CSS)
Property (hay thuộc tính CSS) đảm nhiệm vai trò quy định về phương diện định dạng (Màu chữ, màu nền, kiểu chữ, chiều rộng, chiều dài…) cho phần tử HTML.
Ví dụ:
| Property (thuộc tính CSS) | Ý nghĩa |
| font-size | cỡ chữ (kích thước text) |
| color | màu chữ (màu sắc của text) |
| background-color | màu nền |
| margin-top | khoảng cách tính từ vị trí top (đỉnh đầu) của phần tử được định dạng đến vị trí bottom (đáy) của phần tử bên trên gần nhất |
| border | định dạng viền của phần tử |
Property Value(tạm dịch là giá trị thuộc tính CSS)
Property Value (hay giá trị thuộc tính CSS) sẽ chứa thông tin giá trị định dạng tương ứng với Property (Màu đỏ, màu xanh, in nghiêng, 100px, 200px…).
Ví dụ:
| Property (thuộc tính CSS) | Property value (giá trị thuộc tính CSS) |
| font-size | 15px |
| color | red |
| background-color | #ccc |
| margin-top | 5em |
| border | 1px solid #000 |
Cú pháp của Inline CSS
Như đã giới thiệu ở bài học trước, Inline CSS sẽ tồn tại ở dạng giá trị của thuộc tính style nằm trực tiếp trên thẻ của phần tử HTML. Chính vì thế, cú pháp của Inline CSS sẽ không cần đến selector, mà chỉ cần CSS Property và CSS Property Value.
Ví dụ điển hình:
<p style="margin-top: 10px; font-style: italic; color: red">Cám ơn bạn đã ủng hộ series HTML & CSS của hoccode.org đến thời điểm này!</p>
<hr style="bordercolor: red" />
Như vậy ta đã vừa tìm hiểu xong các thành phần cơ bản trong cú pháp của CSS. Nhìn chung, cú pháp của CSS khá đơn giảng với chỉ 3 thành phần chính. Điểm khó của CSS chỉ nằm ở chỗ cách viết Selector (bộ chọn) sao cho hợp lý, cũng như việc lựa chọn thuộc tính và giá trị thuộc tính CSS để phù hợp với mục đích định dạng phong cách cho phần tử HTML.
Nếu các bạn có bất kỳ thắc mắc hay ý kiến đóng góp nào, đừng ngần ngại để lại thông qua bình luận (comment) bên dưới nhé. Nếu bạn thấy nội dung bài giảng hay và hữu ích, hãy cho chúng tớ 1 like, share hay đánh giá để chúng tớ có thêm động lực cho ra những bài giảng có chất lượng tốt hơn nhé.
Chúc các bạn có một ngày làm việc & học tập hiệu quả!
>> Tham Khảo : Xây dựng một trang (văn bản) HTML đơn giản | Series HTML & CSS căn bản | Bài 5
