• Cấu trúc cơ bản

Quy tắc CSS

Selector

Mọi phần tử HTML đều có thể là một selector trong CSS. Ví dụ, đoạn mã dưới đây sử dụng selector P:

P { text-indent: 3em; }

Selector Lớp

Một selector có thể được áp dụng với nhiều lớp khác nhau để tạo ra các kiểu hiển thị riêng biệt cho cùng một phần tử. Ví dụ:

code.html { color: #191970; }
code.css  { color: #4b0082; }

Trong ví dụ trên, hai lớp html và css được định nghĩa cho phần tử CODE.

Các lớp cũng có thể được khai báo mà không cần liên kết đến phần tử cụ thể:

.note { font-size: small; }

Lớp note này có thể áp dụng cho bất kỳ phần tử nào.

Một quy tắc tốt là đặt tên lớp dựa trên chức năng thay vì giao diện của nó.

Selector ID

Selector ID được sử dụng để xác định duy nhất từng phần tử. Nó bắt đầu bằng ký hiệu "#" trước tên ID. Ví dụ:

#uniqueId { text-indent: 3em; }

Khi đó, phần tử HTML tương ứng sẽ như sau:

<P ID="uniqueId">Văn bản lùi vào 3em</P>

Selector Liên kết

Selector liên kết gồm hai hoặc nhiều selector đơn được phân tách bởi dấu cách. Chúng có ưu tiên cao hơn so với selector đơn. Ví dụ:

P EM { background: yellow; }

Đoạn mã trên chỉ định rằng mọi phần tử EM nằm trong P sẽ có nền màu vàng.

Khai báo

Thuộc tính

Thuộc tính được chỉ định để định nghĩa kiểu dáng cho selector. Ví dụ: color, border, font.

Giá trị

Giá trị là thông số mà thuộc tính chấp nhận. Ví dụ, thuộc tính color có thể nhận giá trị red.

Nhóm Selector

Các selector có thể được nhóm lại để giảm thiểu sự lặp lại trong bảng kiểu. Ví dụ:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif;
}

Thừa kế

Phần tử con thường thừa kế các thuộc tính từ phần tử cha trừ khi chúng được định nghĩa khác đi. Ví dụ, thuộc tính color của phần tử BODY sẽ được áp dụng cho văn bản trong đoạn P.

Một số thuộc tính không được thừa kế, chẳng hạn như margin-top.

Bình luận

Bình luận trong bảng kiểu được viết theo cú pháp giống như trong ngôn ngữ lập trình C:

/* KHÔNG THỂ ĐÍCH NỘI BÌNH LUẬN */

Pseudo-class và Pseudo-element

Pseudo-class và pseudo-element là những lớp và phần tử đặc biệt tự động được trình duyệt hỗ trợ. Ví dụ:

A:link    { color: red; }
A:active  { color: blue; font-size: 125%; }
A:visited { color: green; font-size: 85%; }

Pseudo-element Dòng Đầu Tiên

Pseudo-element first-line dùng để định dạng dòng đầu tiên của khối văn bản. Ví dụ:

P:first-line {
  font-variant: small-caps;
  font-weight: bold;
}

Pseudo-element Chữ Đầu Tiên

Pseudo-element first-letter dùng để định dạng chữ cái đầu tiên của khối văn bản. Ví dụ:

P:first-letter { font-size: 300%; float: left; }

Thứ tự Ưu tiên

Khi có nhiều bảng kiểu được sử dụng, trình duyệt cần xác định bảng kiểu nào có quyền kiểm soát đối với mỗi phần tử. Quy tắc quyết định như sau:

1. !important: Một quy tắc được đánh dấu là quan trọng sẽ có ưu tiên cao hơn so với các quy tắc khác cùng mức độ. Ví dụ:

BODY { background: url(bar.gif) white; background-repeat: repeat-x !important; }

2. Nguồn gốc Quy tắc (Tác giả vs Người dùng): Quy tắc của tác giả có ưu tiên cao hơn so với người dùng nếu chúng có cùng mức độ quan trọng. Tuy nhiên, quy tắc !important của tác giả sẽ vượt qua cả quy tắc !important của người dùng.

3. Mức độ Đặc trưng của Selector:

• Đếm số lượng thuộc tính ID.
• Đếm số lượng thuộc tính class.
• Đếm số lượng tên thẻ HTML.

Ví dụ:

#id1         { xxx } /* a=1 b=0 c=0 --> Đặc trưng = 100 */
UL UL LI.red { xxx } /* a=0 b=1 c=3 --> Đặc trưng = 013 */
LI.red       { xxx } /* a=0 b=1 c=1 --> Đặc trưng = 011 */
LI           { xxx } /* a=0 b=0 c=1 --> Đặc trưng = 001 */

4. Thứ tự Xuất hiện: Nếu hai quy tắc có cùng mức độ ưu tiên, quy tắc xuất hiện sau sẽ được áp dụng.