Ngữ pháp cơ bản CSS

Ngôn ngữ语法 CSS

Các quy tắc CSS bao gồm hai phần chính: phần chọn và một hoặc nhiều biểu thức.

selector {declaration1; declaration2; ... declarationN }

Chọn phần tử (selector) thường là phần tử HTML mà bạn muốn thay đổi phong cách.

Mỗi biểu thức bao gồm một thuộc tính và một giá trị.

Thuộc tính (property) là thuộc tính phong cách mà bạn muốn thiết lập (style attribute). Mỗi thuộc tính có một giá trị. Thuộc tính và giá trị được phân tách bởi dấu hai chấm.

selector {property: value}

Dòng mã này định nghĩa màu văn bản của phần tử h1 là đỏ và cỡ chữ là 14 pixel.

Trong ví dụ này, h1 là phần chọn, color và font-size là thuộc tính, red và 14px là giá trị.

h1 {color:red; font-size:14px;}

Hình ảnh dưới đây trình bày cấu trúc của đoạn mã trên:

Ngôn ngữ语法 CSS

Lưu ý:Hãy sử dụng dấu ngoặc nhọn để bao bọc biểu thức.

Cách viết khác nhau và đơn vị của giá trị

Ngoài từ tiếng Anh red, chúng ta còn có thể sử dụng giá trị màu hexa #ff0000:

p { color: #ff0000; }

Để tiết kiệm không gian, chúng ta có thể sử dụng dạng viết tắt của CSS:

p { color: #f00; }

Chúng ta có thể sử dụng hai cách để sử dụng giá trị RGB:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Lưu ý, khi sử dụng RGB theo phần trăm, ngay cả khi giá trị là 0 thì cũng cần viết ký hiệu phần trăm. Nhưng trong các trường hợp khác, bạn không cần làm như vậy. Ví dụ, khi kích thước là 0 pixel, bạn không cần sử dụng đơn vị px sau số 0, vì 0 là 0, bất kể đơn vị là gì.

Hãy nhớ viết dấu ngoặc kép

Lưu ý:Nếu giá trị là nhiều từ,则需要 thêm dấu ngoặc kép cho giá trị:

p {font-family: "sans serif";}

Biểu thức đa phần:

Lưu ý:Nếu muốn định nghĩa nhiều hơn một biểu thức,则需要 sử dụng dấu chấm phẩy để phân tách mỗi biểu thức. Dưới đây là ví dụ về cách định nghĩa một đoạn văn bản màu đỏ được căn giữa. Điều cuối cùng cần lưu ý là bạn không cần thêm dấu chấm phẩy, vì dấu chấm phẩy trong tiếng Anh là một ký hiệu phân tách, không phải là ký hiệu kết thúc. Tuy nhiên, hầu hết các nhà thiết kế có kinh nghiệm sẽ thêm dấu chấm phẩy ở cuối mỗi biểu thức, điều này giúp giảm thiểu khả năng出错 khi bạn thêm hoặc xóa biểu thức từ các quy tắc hiện có. Ví dụ như sau:

p {text-align:center}; color:red;}

Bạn nên mô tả một thuộc tính trên mỗi dòng để tăng cường khả năng đọc của định nghĩa樣式, giống như vậy:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Khoảng trống và chữ hoa thường

Hầu hết các bảng樣式 chứa không chỉ một quy tắc, mà còn chứa nhiều quy tắc hơn. Việc sử dụng nhiều quy tắc và khoảng trống giúp bảng樣式 dễ dàng chỉnh sửa hơn:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Việc có chứa khoảng trống sẽ không ảnh hưởng đến hiệu quả hoạt động của CSS trong trình duyệt, tương tự như vậy, khác với XHTML, CSS không nhạy cảm với chữ hoa thường. Tuy nhiên, có một ngoại lệ: nếu liên quan đến việc làm việc cùng với tài liệu HTML, tên lớp và id đối với chữ hoa thường và chữ thường là nhạy cảm.