CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu
4.3 Một số quy ước về cách viết CSS
Dưới đây là một ví dụ rất đơn giản của CSS thể hiện về cú pháp của câu lệnh 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;} 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. Một số lưu ý khi sử dụng các câu lệnh CSS:
p {color:blue; font-size:12px; line-height:15px;} nếu ta có một đoạn văn bản như sau trong code html
<p>Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các Declaration ở trên</p>
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 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, nếu ta 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 ta 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 ta muốn thẻ h2 vừa được tô đậm và in nghiêng, có thể thêm dòng sau:
h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;} h2 {font-style:bold;}