Css Trong Mash

Bài　này Bil đề cập đến vấn đề CSS ở trong Mash. Nó sẽ dễ dàng hơn đối với những người mới đi vào lĩnh vực ngôn ngữ lập trình đơn giản HTML.

Sau khi đã hiểu được cơ bản về HTML ở trong CSS chúng ta sẽ dễ dàng 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; } Sau khi đã hiểu cơ bản về ngôn ngữ lập trình HTML các bạn sẽ tham khảo các cách tạo một tổ hợp các câu lệnh cho các module ở phần 2