Cú Pháp

Khai Báo CSS

Tập tin CSS bao gồm một hoặc nhiều quy luật CSS khác nhau. Một quy luật CSS gồm có bộ chọn và một hoặc nhiều khai báo cho bộ chọn. Mỗi khai báo sẽ gồm có thuộc tínhgiá trị thuộc tính.

Cú pháp CSS

Để hiểu về cú pháp khai báo trên chúng ta sẽ bắt đầu bằng một ví dụ cụ thể. Ở phần trước bạn đã được làm quen với mã lệnh CSS sau:

h1 {
    font-size: 20px;
    color: #F05234;
}
p {
    font-size: 14px;
    color: #466474;
}

Ở ví dụ trên chúng ta có hai luật CSS được áp dụng cho thẻ <h1><p>. Mỗi một luật CSS này lại chứa hai khai báo với mỗi khai báo bao gồm thuộc tính font-sizecolor và tương ứng là giá trị cho từng thuộc tính này.

Bộ Chọn

Với ví dụ trên, p được gọi là bộ chọn (hay selector) nó được gọi như vậy vì bộ chọn được sử dụng để chọn ra phần tử tương ứng trong HTML mà nó sẽ quy định cách trình bày. Ở đây p dùng để chọn tất cả các phần tử p trong HTML. Ngoài cách chọn phần tử sử dụng tên thẻ như trên bạn còn có thể sử dụng id hoặc class ví dụ:

p {
    color: blue;
}
#first-para {
    font-weight: bold;
}
.special-para {
    color: red;
}

Thuộc Tính

Bên trong bộ chọn chúng ta có các thuộc tính như text-align, color, font-weight... Các thuộc tính này sẽ được dùng để quy định cách trình bày phần tử HTML tương ứng với bộ chọn CSS. Để làm được điều này chúng ta sẽ gán giá trị cho thuộc tính.

Giá Trị Thuộc Tính

Mỗi thuộc tính có thể nhận các giá trị khác nhau và mỗi loại thuộc tính khác nhau sẽ có một tập hợp các giá trị tương ứng với nó. Ví dụ thuộc tính color sẽ có tập hợp các giá trị như red, green, black... Ngược lại thuộc tính text-align dùng canh lề chữ sẽ có các giá trị như center, left, right.

Thêm Bình Luận: