Chào các bạn, CSS là ngôn ngữ định kiểu được sử dụng rộng rãi để làm đẹp và bố trí các trang web. Để sử dụng CSS hiệu quả, việc hiểu rõ cú pháp của nó là điều quan trọng. Trong bài viết này, chúng ta sẽ tìm hiểu về cú pháp cơ bản của CSS, bao gồm các thành phần như bộ chọn, thuộc tính, giá trị và cách chúng phối hợp với nhau để thay đổi giao diện của trang web.

1. Cấu trúc cơ bản của CSS

Một quy tắc CSS (CSS rule) bao gồm hai phần chính: bộ chọn (selector) và khối khai báo (declaration block).

css
selector {
    property: value;
}
  • Selector (Bộ chọn): Xác định phần tử HTML mà bạn muốn áp dụng kiểu. Ví dụ, bạn có thể chọn tất cả các đoạn văn (<p>), tiêu đề (<h1>), hoặc các phần tử cụ thể hơn dựa trên class hoặc ID.
  • Property (Thuộc tính): Xác định khía cạnh nào của phần tử bạn muốn thay đổi, chẳng hạn như màu sắc (color), kích thước chữ (font-size), hoặc lề (margin).
  • Value (Giá trị): Xác định giá trị cụ thể mà bạn muốn áp dụng cho thuộc tính.

2. Ví dụ về một quy tắc CSS

css
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Trong ví dụ trên:

  • Bộ chọn h1 áp dụng kiểu cho tất cả các thẻ <h1> trong tài liệu HTML.
  • color: blue; sẽ làm cho văn bản trong thẻ <h1> có màu xanh.
  • font-size: 24px; sẽ thay đổi kích thước của văn bản thành 24 pixel.
  • text-align: center; sẽ căn giữa văn bản trong thẻ <h1>.

3. Các loại bộ chọn trong CSS

CSS cung cấp nhiều loại bộ chọn khác nhau để bạn có thể áp dụng kiểu một cách linh hoạt và chính xác:

  • Bộ chọn theo phần tử (Element Selector): Áp dụng kiểu cho tất cả các phần tử cụ thể.
  • Bộ chọn Class (Class Selector): Áp dụng kiểu cho bất kỳ phần tử nào có class được chỉ định.
  • Bộ chọn ID (ID Selector): Áp dụng kiểu cho một phần tử duy nhất với một ID cụ thể.
  • Bộ chọn nhóm (Group Selector): Áp dụng cùng một kiểu cho nhiều bộ chọn cùng một lúc.

Xem thêm các ví dụ về selector trong CSS ở bài viết này: CSS Selectors

4. Khối khai báo CSS

Mỗi khối khai báo chứa một hoặc nhiều cặp thuộc tính: giá trị;. Các cặp này được ngăn cách bởi dấu chấm phẩy (;), và toàn bộ khối được bao quanh bởi dấu ngoặc nhọn {}.

css
selector {
    property1: value1;
    property2: value2;
    /* Bạn có thể thêm nhiều thuộc tính khác nhau */
}

Ví dụ:

css
p {
    color: green;
    font-size: 16px;
    line-height: 1.5;
}

5. Ghi chú trong CSS

CSS cho phép bạn thêm các ghi chú để giúp mã dễ hiểu hơn. Ghi chú không được hiển thị trong trình duyệt và được viết giữa /* và */.

css
/* Đây là một ghi chú */
p {
    color: black; /* Đoạn văn sẽ có màu đen */
}

6. Tầm quan trọng của cú pháp chính xác

Việc tuân thủ đúng cú pháp là rất quan trọng trong CSS. Một dấu ngoặc bị thiếu, một dấu chấm phẩy sai chỗ, hoặc một dấu ngoặc nhọn bị bỏ sót có thể khiến CSS của bạn không hoạt động hoặc gây ra những lỗi không mong muốn.

7. Tổng kết

Hiểu rõ cú pháp CSS là bước đầu tiên và quan trọng nhất để làm chủ CSS. Khi nắm vững cú pháp, bạn sẽ dễ dàng tạo ra các quy tắc CSS rõ ràng, ngắn gọn và hiệu quả, từ đó có thể tùy chỉnh giao diện web theo ý muốn. Trong các bài học tiếp theo, chúng ta sẽ đi sâu hơn vào các kỹ thuật nâng cao trong CSS, giúp bạn tạo ra các trang web không chỉ đẹp mắt mà còn chuyên nghiệp và thân thiện với người dùng.

Hãy thực hành tạo các quy tắc CSS đơn giản để hiểu rõ hơn về cách chúng hoạt động!