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
1
| h3 {color: blue;} |
Do vậy nếu bạn có code HTML như sau
1
| <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
1
| 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
1
| Đ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
1
2
3
4
| 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
1
| 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
1
2
| h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}h2 {font-style:bold;} |
Blog Designer
Hãy cho đi rồi sẽ nhận lại nhiều hơn thế
Đã có nhiều lúc tôi không biết mình sẽ làm được gì ??? Nhưng hãy cứ tin vào chính bản thân mình, tin vào mọi người và đừng để con tim bạn lạc lối. Bạn và tôi sẽ tìm ra được đâu là đích đến để mình biết đường đi.Nếu bạn cần một người bạn, đừng ngại kết bạn với tôi.
Thư Viện Đồ Họa: www.izdesigner.com
Kết nối với tôi: