Sau khi đã hiểu sơ lược về CSS thì chúng ta cần phải biết cú pháp của CSS để hiểu được các cú pháp trong theme của bạn có nghĩa như thế nào. Hiểu được cú pháp của CSS sẽ là bước đầu tiên giúp bạn làm chủ CSS để có thể tạo theme hay chỉnh sửa theme cho blog theo ý của mình.
1. Cú pháp
Cú pháp của một CSS được tạo nên từ ba phần: Bộ chọn (seclector), Thuộc tính (property) và Giá trị (value). Và được viết theo chuẩn sau:
Bộ chọn {Thuộc tính: Giá trị} - selector {property: value}
- Bộ chọn: thường là các phần tử hay thẻ HTML mà bạn muốn chỉ định như: body, header, content, sidebar, footer, v.v..
- Thuộc tính và Giá trị: Thuộc tính là các tính chất mà bạn muốn chỉ định. Thuộc tính luôn kèm theo giá trị và chúng ngăn cách nhau bởi dấu hai chấm ":".
Ví dụ:
Body {font: Arial}
Một bộ chọn có thể mang nhiều thuộc tính, và mỗi thuộc tính ngăn cách nhau bởi một dấu chấm phẩy ";".
Ví dụ:
Body {
font: arial;
color: #D3D4D5;
background: #3EDF42;
}
Nếu Giá trị là một từ dài để chỉ ra một tên nào đó, bạn phải đặt chúng vào trong dấu ngoặc kép.
Ví dụ:
P {font-family: "sans serif"}
2. Nhóm các Bộ chọn lại với nhau
Bạn có thể nhóm các Bộ chọn có cùng Thuộc tính lại với nhau để cho cú pháp ngắn gọn. Các bộ chọn được ngăn cách với nhau bởi dấu phảy ",".
Ví dụ: Bạn nhóm các thành phần h1, h2, h3, h4 của Header có cùng màu Xanh và font chữ là Tahoma lại với nhau
h1, h2, h3, h4 {
color: blue;
font: tahoma;
}
3. Lời chú thích trong CSS
Bạn có thể thêm lời chú thích cho đoạn mã của bạn, nó sẽ giúp bạn biết đoạn mã đó thực hiện nhiệm vụ gì hoặc có tác dụng gì. Lời chú thích sẽ giúp bạn dễ dàng nhớ lại những gì mình đã viết trước đây. Lời chú thích này sẽ không được các trình duyệt hiển thị.
Một lời chú thích bắt đầu bằng một dấu "/*" và kết thúc bằng một dấu "*/". Bạn có thể đặt đoạn chú thích vào bất cứ đâu bạn muốn.
Ví dụ:
/* Đây là Sidebar */
#sidebar {
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
Hoặc
#sidebar {
/* Đây là Sidebar */
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
Hoặc
#sidebar {
with: 300px; /* Độ rộng của Sidebar */
padding: 10px;
font: Tahoma, Verdana;
}
Post a Comment
Post a Comment