HTML - CSS - Javascript

Cú Pháp trong CSS

Mã CSS bao gồm một hoặc nhiều quy luật khác nhau:

 

Cú Pháp CSS - CSS Syntax

Mã CSS bao gồm một hoặc nhiều quy luật khác nhau:

body {
    color: #000;
}

h1 {
    font-size: 25;
}

Đoạn mã CSS ở ví dụ trên có tất cả hai quy luật CSS khác nhau lần lượt áp dụng cho hai phần tử body và h1.

Mỗi một quy luật CSS bao gồm một hoặc một tập hợp các bộ chọn chứa các khai báo CSS đặt bên trong cặp dấu ngoặc { }. Trong đó:

  • Bộ chọn CSS dùng để chọn ra phần tử HTML trên mang sẽ được áp dụng quy luật.
  • Khai báo CSS dùng để thiết lập các kiểu trang trí.

Bộ Chọn CSS - CSS Selector

Bộ chọn CSS được dùng để chọn ra các phần tử CSS để thiết lập trang trí cho chúng:

p {
    font-size: 100%;
}
.large {
    font-size: 120%;
}
.small {
    font-size: 80%;
}

Ở ví dụ trên chúng ta có ba bộ chọn CSS khác nhau:

  • Bộ chọn p: Chọn ra tất cả các phần tử p trên trang.
  • Bộ chọn .large: Chọn ra tất cả các phần tử với thuộc tính class chứa giá trị là large.
  • Bộ chọn .small: Chọn ra tất cả các phần tử với thuộc tính class chứa giá trị là small.

Chúng ta sẽ tìm hiểu chi tiết về các loại bộ chọn trong CSS ở bài học tiếp theo.

Khai Báo CSS - CSS Declaration

Khai báo CSS hay CSS declaration dùng để thiết lập kiểu trang trí cho những phần tử HTML được xác định bởi bộ chọn CSS cho trước.

Mỗi một khai báo CSS bao gồm thuộc tính CSS kết hợp với giá trị của thuộc tính được ngăn cách nhau bởi dấu :. Mỗi khai báo CSS được đặt trên một dòng và kết thúc bởi dấu ;.

Ví dụ khai báo CSS dưới đây dùng thiết lập màu chữ với giá trị là #000:

color: #000;

Trong đó:

  • color là thuộc tính CSS.
  • #000 là giá trị áp dụng cho thuộc tính color.

Với mã CSS được đặt trong cặp thẻ <style></style> hoặc trong một file CSS riêng biệt thì các khai báo CSS được đặt bên trong cặp dấu ngoặc { }. Với mã CSS được đặt trong thẻ mở HTML thì chúng ta không cần cặp dấu { } này nữa:

<p style="font-size: 100%">Văn bản với cỡ chữ 100%.</p>
<p style="font-size: 120%">Văn bản với cỡ chữ 120%.</p>
<p style="font-size: 80%">Văn bản với cỡ chữ 80%.</p>

Thuộc Tính CSS - CSS Property

Trong một khai báo CSS, thuộc tính CSS hay CSS property được đặt nằm ở phía tay trái dấu :. Thuộc tính CSS bao gồm các chữ cái in thường và dấu - trong trường hợp thuộc tính có nhiều từ khác nhau.

Ví dụ một số thuộc tính thường hay sử dụng như colorbackground-colorfont-familyfont-sizetext-decoration... Chúng ta sẽ tìm hiểu về các thuộc tính này ở các bài học tiếp theo.

Giá Trị Thuộc Tính CSS - CSS Property Value

Trong một khai báo CSS, giá trị thuộc tính CSS hay CSS property value được đặt nằm ở phía tay phải dấu :. Giá trị của thuộc tính CSS phụ thuộc vào thuộc tính CSS, mỗi thuộc tính CSS khác nhau sẽ có tương ứng một bộ các giá trị khác nhau. Chúng ta sẽ làm quen với giá trị thuộc tính khi tìm hiểu về các thuộc tính CSS ở các bài học tiếp theo.

Chú Thích trong CSS - CSS Comment

Chú thích hay comment được sử dụng để thêm giải thích cho một đoạn mã CSS cho trước. Các chú thích CSS được bắt đầu bởi /* và kết thúc bởi */:

/* Đây là một chú thích CSS */

Chú thích có thể nằm trên nhiều dòng:

/*đây là một chú thích CSS
dài hơn một dòng */

Các chú thích trong CSS được trình duyệt bỏ qua và do đó đôi khi thay vì phải xoá một đoạn code CSS chúng ta biến chúng thành comment.

Ví dụ đoạn chú thích dưới đây thực chất chứa một luật CSS mà chúng ta không còn cần tới, tuy nhiên do có thể cần dùng lại luật CSS này thì thay vì xoá đi chúng ta biến nó thành một comment:

/*
.small {
    font-size: 80%;
}
*/

Khi cần dùng lại chúng ta chỉ việc xoá các ký tự /* và */ bao quanh luật CSS trên.


CSS cú pháp CSS