Chủ đề đầu tiên bạn cần nắm vững trước khi viết CSS là cú pháp (syntax). Từ "syntax" nghe có vẻ đáng sợ, nhưng nó đơn giản chỉ là tập quy tắc viết code CSS. Các quy tắc này là chuẩn mực, giúp dễ dàng đọc hiểu code của người khác.
Hai Thành Phần Cốt Lõi: Selector Và Declaration Block
- Selector: Chỉ định phần tử HTML cần áp dụng style.
- Declaration block: Chứa các cặp property-value định nghĩa style cho selector đó.
Cấu Trúc Quy Tắc CSS (CSS Style Rules)
Một stylesheet chứa tập hợp các quy tắc xác định giao diện trang web (màu chữ, cỡ font, v.v.). Mỗi quy tắc tuân theo cấu trúc chuẩn:
h1 { color: blue; }
Quy tắc này đặt màu xanh cho tất cả thẻ <h1>. Phân tích 2 thành phần:
CSS Declarations (Khai Báo)
Declaration là một style cụ thể áp dụng cho phần tử. Một quy tắc có ít nhất 1 declaration, có thể nhiều.
Cấu trúc declaration:
property: value;
- Property: Thuộc tính style (color, width, background-color...).
- Value: Giá trị gán cho property (red, 100px, blue...).
Mỗi declaration kết thúc bằng dấu chấm phẩy (;). Các declaration nằm trong cặp ngoặc nhọn {}.
color: blue;
font-size: 16px;
CSS Selectors (Bộ Chọn)
Selector nói với trình duyệt: "Áp dụng các declaration này cho phần tử nào?".
selector {
/* Danh sách declarations */
}
Ví dụ: Đặt width 500px cho tất cả <div>:
div { width: 500px; }
div là selector, nằm đầu quy tắc. Declarations trong ngoặc nhọn.
CSS Comments (Chú Thích)
Stylesheet không chỉ chứa quy tắc style, còn chứa comments - đoạn văn bản dev viết để giải thích code. Trình duyệt bỏ qua comments.
Lợi ích: ghi nhớ logic khi viết, giúp người khác hiểu code.
Cú pháp comment CSS:
/* Đây là comment */
Single-line vs Multi-line Comments
Single-line (1 dòng):
/* Set font size for all paragraphs */ p { font-size: 16px; }
Multi-line (nhiều dòng):
/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p { font-size: 16px; color: gray; }
Kết Luận
CSS có cú pháp cơ bản gồm 2 thành phần: selectors (chọn phần tử) và declarations (định nghĩa style). Comments giúp tài liệu hóa code và bị trình duyệt bỏ qua.
Bạn đã sẵn sàng viết CSS rules và comments như một web developer chuyên nghiệp!