Cú pháp CSS

03/05/2019

Bài sau » « Bài trước

Cú pháp CSS

- Cú pháp viết CSS bao gồm 2 phần: Bộ chọn (Selector) và Khối khai báo (Declaration block).

Cú pháp CSS

Trong đó:

- Bộ chọn (selector) là thẻ HTML mà bạn muốn định dạng (style).

- Khối khai báo (declaration block) bao gồm một hay nhiều khối nằm cách nhau bởi dấu phẩy (;).

- Mỗi khối khai báo là một thuộc tính CSS bao gồm tên và giá trị, cách nhau bởi dấu hai chấm (:).

- Một khai báo CSS luôn kết thúc là dấu chấm phẩy (;) và được bao bọc trong cặp ngoặc nhọn {}.

- Ví dụ bên dưới: Tất cả thẻ <p> có màu đỏ và font chữ 16px.

p{   color: red;   font-size: 16px; }

Bộ chọn CSS - CSS Selector

- CSS Selector dùng để tìm (hoặc chọn) phần tử HTML dựa theo tên thẻ, class, id,...

Chọn theo tên thẻ HTML

- Chọn theo tên thẻ HTML để định dạng CSS. Bạn có thể chọn thẻ p, h1, h2, span, a,... Ví dụ bên dưới: Tất cả thẻ <p> có màu đỏ và font chữ 16px.

p{   color: red;   font-size: 16px; }

Chọn theo Class

- Chọn phần tử HTML dựa theo giá trị của thuộc tính class của thẻ HTML.

- Để chọn phần tử HTML có class riêng ta viết theo cú pháp: đầu tiên là dấu chấm (.) tiếp theo là tên của class. Xem ví dụ bên dưới: Chọn tất cả phần tử HTML có class="center" thì có màu đỏ và font 16px :

.center{   color: red;   font-size: 16px; }

- Bạn có thể chọn phần tử HTML cụ thể, có tác dụng với class được viết. Xem ví dụ bên dưới: Chỉ những thẻ p mà có class="center" mới có màu đỏ và font 16px :

p.center{   color: red;   font-size: 16px; }

- Phần tử HTML có thể chứa nhiều class, chúng ngăn cách nhau bởi khoảng trắng.

<p class="red center">Thẻ p có nhiều hơn 1 class</p>

Chú ý: Tên class không được bắt đầu bằng số !

Chọn theo id

- Chọn phần tử HTML dựa theo thuộc tính id của thẻ HTML.

- Giá trị của thuộc tính id của phần tử HTML là duy nhất trên 1 trang, vì vậy chọn theo id là chọn phần tử duy nhất.

- Để chọn phần tử HTML theo id ta viết: dấu thăng (#) và tên id.

- Ví dụ dưới đây chọn phần tử HTML có id="title" :

#title{   color: red;   font-size: 20px; }

Chú ý: Tên id không được bắt đầu bằng số !

Gom nhóm CSS - Group selector

- Trường hợp bạn có nhiều phần tử HTML với các định CSS giống nhau.

h1{   color: red;   font-size: 20px; } h2{   color: red;   font-size: 20px; } p{   color: red;   font-size: 20px; }

- Sẽ tốt hơn nếu ta gom chúng thành một nhóm, giúp giảm nhẹ file css.

- Khi gom nhóm CSS, các bộ chọn (selector) cách nhau bởi dấu phẩy (,).

- Từ ví dụ ở trên ta có thể gom lại như sau:

h1, h2, p{   color: red;   font-size: 20px; }

Lệnh comment trong CSS

- Comment dùng để giải thích, ghi chú đoạn code bạn đã viết. Để sau này khi bạn hoặc người khác chỉnh sửa có thể đọc và hiểu nó.

- Trình duyệt sẽ bỏ qua lệnh comment khi đọc file CSS.

- Lệnh comment trong CSS bắt đầu với /* và kết thúc với */ . Có thể viết lệnh comment trên nhiều dòng.

p{   color: red;   /* Comment trên 1 dòng */   font-size: 20px; } /* Comment trên nhiều dòng. Trình duyệt bỏ qua đoạn comment này */

Bài sau » « Bài trước
Back to top