Cú pháp của CSS

• October 7, 2008
• 12 comments

Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương

h3 {color: blue;}

Do vậy nếu bạn có code HTML như sau

<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>

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ụ trên, thẻ h3 là Selector và phần {color: blue;} là Declaration.

Trong Declaration cũng có 2 phần là: Property và Value. Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng như thế nào. Ở ví dụ trên color là Property nó quyết định sẽ tác động đến màu của h3 và blue là Value, nó quyết định màu sẽ là màu xanh.

Đoạn chữ này sẽ có màu xanh

Bạn có thể sử dụng những cách sau đây khi viết CSS

Nhóm nhiều Declaration vào một dòng

p {color:blue; font-size:12px; line-height:15px;}

và nếu bạn có một đoạn văn bản như sau trong code html

Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các Declaration ở trên

nó sẽ có màu xanh, cỡ chữ là 12px và độ cao giữa các dòng là 15px.

Lưu ý: Mỗi Declaration được ngăn cách bởi dấu chấm phẩy ; dấu chấm phẩy ở cuối cùng không bắt buộc, nhưng bạn nên cho vào để sau này nếu có thêm Declaration sẽ không bị quên

Nhóm nhiều Selector vào một dòng

Ví dụ nếu bạn muốn chữ từ h1 đến h6 có màu đỏ và được in nghiêng bạn có thể viết

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

Hoặc bạn có thể nhóm tất cả lại để đỡ tốn công hơn

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

Mỗi Selector được ngăn cách bằng dấu phẩy (,)

Một Selector có thể chịu ảnh hưởng bời nhiều luật

Ở ví dụ trên nếu bạn muốn thẻ h2 vừa được tô đậm và in nghiêng, bạn có thể thêm dòng sau

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