Cú pháp CSS cơ bản

Cú pháp viết CSS

Để thiết lập kiểu cách hiện thị của các phần tử HTML, CSS định nghĩa sẵn một loạt các quy tắc, nhiệm vụ của bạn là nhóm những quy tắc này lại - và cho biết nhóm quy tắc đó sẽ áp dụng cho phần tử nào trong HTML. Các quy tắc xác định kiểu này là các thuộc tính trong CSS.

Hãy xem đoạn mã CSS sau:

p {
    color: green;
    font-weight: bold;
}
/* Chú ý CSS này viết trong file .css hoặc trong thẻ <style> */

Đây là nội dung thẻ p chịu ảnh hưởng của CSS trên

Nếu trang HTML có CSS này, thì tất cả các phần tử <p> sẽ có màu xanh (green) và chữ in đậm. vậy phân tích đoạn mã trên bạn để ý mấy vấn đề về cú pháp viết CSS như sau:

• Selector: xác định phần tử HTML nào sẽ áp dụng code CSS sẽ viết trong { ... }. Ví dụ trên thấy có chữ p, vậy nó sẽ áp dụng cho mọi phần tử <p> trong HTML. Có một số quy tắc để bạn viết selector (chọn phần tử) như chọn theo tên thẻ - vị trí phần tử, chọn theo class của phần tử, chọn theo id của phần tử ... sẽ trình bày ở bài viết sau.
• { ... }: sau selector là cặp ngoặc nhọn, trong đó bạn sẽ viết quy tắc CSS (thuộc tính CSS).
• Viết (khai báo) thuộc tính CSS : bạn viết một hoặc nhiều các quy luật CSS. Mỗi luật này bắt đầu bằng tên một thuộc tính (color, font-weight, background ...), sau đó là dấu hai chấm (:) đến giá trị mà thuộc tính đó nhận (green, bold ...) và kết thúc bởi chấm phảy ; (thuộc tính viết cuối cùng không cần chấm phảy). Cú pháp đó là:

  thuộc-tính: giá-trị;

CSS có hàng trăm thuộc tính CSS, học CSS phần chính là bạn học sử dụng các thuộc tính này. Trong ví dụ trên, chỉ sử dụng hai thuộc tính là color (thuộc tính thiết lập màu chữ) và thuộc tính font-weight (xác định độ đậm của chữ).

Và tất nhiên, trong file .css hay trong khối <style> bạn thường sẽ viết nhiều nhóm CSS. Ở ví dụ trên, bạn viết CSS cho phần tử <p>, ví dụ sau thì có cả CSS áp dụng cho <p> và áp dụng cho phần tử <a>

p {
    color: green;
    font-weight: bold;
}
/* phần tử a sẽ không gạch chân như mặc định, và có màu đỏ */
a {
    text-decoration: none;
    color: red;
}

CSS không bị ảnh hưởng bởi khoảng trắng : viết như trên để dễ đọc, tuy nhiên nếu muốn bạn có thể bỏ toàn bộ các khoảng trắng (space, xuống dòng, tab ...) mà không ảnh hưởng gì. Ví dụ đoạn CSS trên viết như sau vẫn đúng:

p{color:green;font-weight:bold;}a{text-decoration:none;color:red;}

Các thuộc tính CSS

Thuộc tính CSS là tên, thông qua tên này bạn thiết lập giá trị để cho biết phần tử HTML sẽ hiện thị như thế nào trong trình duyệt. Ví dụ trên có thuộc tính color, font-weight, text-decoration ngoài ra còn một loạt các thuộc tính khác.

Các thuộc tính (tên, mục đích) được đưa ra bởi tổ chức W3C (World Wide Web Consortium), dựa vào các đặc tả về thuộc tính các trình duyệt được phát triển để hỗ trợ các thuộc tính đó. Hầu hết các thuộc tính đưa ra bởi W3C đều được các trình duyệt hỗ trợ, tuy nhiên vẫn có những thuộc tính trình duyệt này hỗ trợ, trình duyệt khác thì không. Còn có các thuộc tính nhưng trình duyệt này dùng tên khác với trình duyệt khác ...

Đây là danh sách các thuộc tính, tiêu chuẩn cập nhật 2021: CSS properties

Giá trị của thuộc tính CSS

Mỗi thuộc tính khi viết nó cần có giá trị. Như cú pháp trên bạn viết:

css-property: value;

• Có những thuộc tính có thể nhận các giá trị số tùy ý bạn nhập. Ví dụ thuộc tính font-size (thiết lập cỡ chữ), cơ chữ bao nhiêu do bạn quyết định - ví dụ 14px (pixel).

  font-size: 14px;

• Có những thuộc tính - nó chỉ nhận một số giá trị quy định (định nghĩa trước). Ví dụ thuộc tính border-left-style (đường kẻ bên trái phần tử) bạn chỉ thiết lập một trong các giá trị theo tên: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

  border-left-style: dotted; /* đường chấm chấm */

  Các giá trị có tên này cũng do W3C đưa ra: CSS Property Values

Comment - ghi chú trong CSS

Trong CSS bạn cần ghi chú lại (comment, dòng ghi chú không ảnh hướng đến code), thì ghi chú được việt trong /* ... */

/* Đây là ghi chú */
p {
    color: green;
    font-weight: bold;
}