Cú pháp của CSS

1. Cấu trúc cơ bản của CSS

Về cơ bản cú pháp của CSS bao gồm 2 phần chính: Selector và Declaration. Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và Declaration sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào.

Ví dụ:

Theo ví dụ trên thì thẻ h1 là Selector và phần {color: blue; font-size: 12px;} là Declaration.

Một cấu trúc của CSS luôn luôn kết thúc bằng một dấu chấm phẩy và các thành phần trong cấu trúc được bao lại bằng dấu ngoặc nhọn. Lưu ý dấu chấm phẩy ở phía cuối của cấu trúc có thể có hoặc không có cũng được.

Để cho code dễ đọc hơn bạn có thể viết xuống dòng giống như vậy:

1 2 3 4 5 6

p { color:red; text-align:center; }

Một vài ví dụ khác của CSS


Ví dụ 1:

Ví dụ 2

2. Comment trong CSS

Việc comment khi viết code là một trong những thói quen không thể thiếu đối với một lập trình viên. Nó tạo cho bạn cách làm việc chuyên nghiệp hóa và làm cho người xem code biết được bạn đang định làm gì với dòng code đó.

Một bình luận CSS bắt đầu với "/ *" và kết thúc bằng "* /", như thế này:

1 2 3 4 5 6 7 8 9

/*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

3. Nhóm nhiều Selector vào trong cùng một dòng lệnh.

Đôi khi trong lập trình chúng ta thường sử dụng nhiều các selector. Vậy để tối ưu code và giúp cho việc đọc hiểu dễ dàng hơn, chúng ta có thể sử dụng cách như sau.

Thay vì viết một loạt các Selector như sau:

1 2 3 4 5

h1 {color:red; font-style:italic;} h2 {color:red; font-style:italic;} ... h6 {color:red; font-style:italic;}

Ta có thể viết lại chỉ bằng một dòng:

1 2 3

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}