2. Cú Pháp CSS

Cú pháp CSS gồm các quy tắc và khối mã được sử dụng để định nghĩa các kiểu cho các phần tử HTML. Mỗi quy tắc bao gồm một “selector” (lựa chọn) và một “declaration block” (khối khai báo) chứa các thuộc tính và giá trị. Dưới đây là cú pháp cơ bản của một quy tắc CSS:

css

selector {
    property: value;
    another-property: another-value;
    /* More properties and values */
}

Selector: Là phần xác định các phần tử mà bạn muốn áp dụng kiểu vào. Selector có thể là tên thẻ HTML, lớp, ID, hoặc các kết hợp của chúng.
Property: Được sử dụng để chỉ định đặc tính bạn muốn thay đổi (ví dụ: “color”, “font-size”, “background-color”, …).
Value: Là giá trị bạn muốn áp dụng cho thuộc tính (ví dụ: “red”, “16px”, “#ffffff”, …).

Dưới đây là một ví dụ cụ thể:

css

/* Selector: Áp dụng kiểu cho tất cả thẻ <p> trong <main> */
main p {
    color: blue;
    font-size: 18px;
}

/* Selector: Áp dụng kiểu cho các phần tử có lớp "highlight" */
.highlight {
    background-color: yellow;
    border: 1px solid orange;
}

/* Selector: Áp dụng kiểu cho phần tử có ID "header" */
#header {
    text-align: center;
    font-weight: bold;
}

Trong ví dụ này:

Selector main p áp dụng kiểu cho tất cả các thẻ <p> trong phần <main>.
Selector .highlight áp dụng kiểu cho tất cả các phần tử có lớp “highlight”.
Selector #header áp dụng kiểu cho phần tử có ID “header”.

Hãy nhớ rằng CSS hỗ trợ nhiều thuộc tính và giá trị khác nhau để tùy chỉnh giao diện của trang web. Cú pháp cơ bản chỉ là bước đầu tiên, bạn có thể tìm hiểu thêm về các thuộc tính và giá trị khác để tạo ra giao diện phức tạp và đa dạng hơn.

Leave a Comment Cancel Reply