SỦI BỌT

TOán học, giáo dục, xã luận, …, Tổ Quốc ơi

Cú pháp của CSS

Posted by mrLe on 24/01/2011


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;

}

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

 
%d bloggers like this: