Cấu trúc css cơ bản dành cho người mới học lập trình web

Ở bài học trước, chúng ta đã học cách chèn css vào trang web html. Và ngay bài học này ta sẽ học cách viết nội dung cho các đoạn mã css. Ứng với mỗi cách chèn css, ta sẽ có cấu trúc viết mã css khác nhau. Cụ thể, chúng ta sẽ xem qua các cấu trúc viết css như bên dưới đây. 

Cấu trúc viết css trực tiếp trong các thẻ html

Xét ví dụ:

<p style="color: red; background-color: white">Đoạn văn bản này sẽ có chữ màu đỏ, nền màu trắng.</p>

Tại ví dụ trên, ta đã chèn css vào cho thẻ p thông qua thuộc tính style. Đoạn mã css khi này chính là giá trị của thuộc tính style. Cấu trúc phần css bao gồm các cặp css_attribute: value ngăn cách nhau bởi dấu chấm phẩy (;). Trong đó :

• css_attribute: Là tên thuộc tính trong css. Lưu ý, đây là thuộc tính css chứ không phải thuộc tính html. Ứng với mỗi thuộc tính css sẽ quy định một ràng buộc cho việc hiển thị của thẻ html hiện tại (thẻ p như ví dụ này). Các thuộc tính này đã được quy định sẵn bởi các trình duyệt, và cũng có sự khác biệt đôi chút giữa các trình duyệt khác nhau. Ví dụ: thuộc tính color quy định màu chữ, thuộc tính background-color quy định màu nền,  thuộc tính font-size quy định kích thước chữ... Danh sách các thuộc tính css và giá trị đi kèm thì chúng ta sẽ được học ở các bài sau.
• value: Là giá trị tương ứng với các css_attribute hiện tại. Ứng với mỗi thuộc tính css, chúng ta sẽ có những cách viết giá trị khác nhau. Ví dụ: giá trị của thuộc tính color và background-color sẽ là giá trị màu như red, green, hay #ff0000...; giá trị của font-size là một giá trị về kích thước như px, pt, %, em, rem...

Cấu trúc viết css trong file riêng được liên kết

Xét ví dụ một file style.css như sau:

/*
* File name: style.css
* Author: Nguyễn Đình Nam
* Class: Lớp học html & css cơ bản
*/

.c_red{
    color: red;
}
#p2{
    color: blue;
}

Trong ví dụ này, ta có các cấu trúc như sau: 

1. Đoạn ghi chú: /*Note*/, đoạn ghi chú bắt đầu bằng dấu /* và kết thúc bằng dấu */. Có thể có nhiều đoạn ghi chú trong một file css. Các đoạn ghi chú sẽ không được trình duyệt thực thi, mà chỉ có ý nghĩa chú thích về các chức năng hay thông tin dành cho nhà phát triển.

2. Các khối code định dạng với cấu trúc như sau:

css_selector{

    css_style

}

Trong đó:

• css_selector: Là quy tắc hay còn gọi là bộ chọn trong css, để chọn ra các thành phần trong tài liệu html. Các bộ chọn trong css chúng ta sẽ được học trong bài học sau.
• css_style: Là các định dạng sẽ được áp dụng cho những thành phần html lấy được từ quy tắc hiện tại. css_style có định dạng là các cặp css_attribute: value ngăn cách nhau bởi dấu chấm phẩy, giống như phần mã css trực tiếp trong các thẻ html mà chúng ta vừa xem ở mục trước.
• Lưu ý: Có cặp dấu ngoặc nhọn {} bao quanh phần css_style

Cấu trúc viết css nội tuyến trong thẻ style của file html

Về cơ bản, cách viết css nội tuyến trong thẻ style của file html cũng giống như cách viết css trong file css vậy. Chúng ta có thể xem lại phần trên.

Như vậy là chúng ta đã xem qua cấu trúc các cách viết mã css một cách tổng quát. Những bài sau, chúng ta sẽ học về bộ chọn trong css, các thuộc tính trong css. Và nâng cao hơn một chút, chúng ta sẽ học về responsive trong css, điều này sẽ giúp website của chúng ta hiển thị tốt trên cả điện thoại, máy tính bảng, laptop / destop và nhiều thiết bị khác.