HTML/CSS

[W3schools Tiếng Việt] – Syntax and Selectors | Cú pháp và vùng chọn.

Cú pháp CSS

Một bộ quy tắc CSS bao gồm một bộ chọn và một khối khai báo:

Cú pháp CSS

  • [Bộ chọn] – h1: Phần tử HTML bạn muốn tạo kiểu.
  • Mọi khai báo được chứa (đựng) trong dấu ngoặc nhọn {} và kết thúc bằng một dấu chấm phẩy ;
  • Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy. 
  • Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm.

Trong ví dụ sau, tất cả các phần tử <p> sẽ được căn giữa, với màu văn bản màu đỏ:

See the Pen css syntac by nguyen tien (@nguyentien365) on CodePen.

Vùng chọn CSS

Bộ chọn CSS được sử dụng để “tìm” (hoặc chọn) các phần tử HTML dựa trên tên phần tử, id, lớp, thuộc tính và các yếu tố khác.

The element Selector –  Vùng chọn dựa vào tên thẻ.

Bạn có thể chọn tất cả các phần tử <p> trên một trang như thế này (trong trường hợp này, tất cả các phần tử <p> sẽ được căn giữa, với màu văn bản màu đỏ):

See the Pen css syntac by nguyen tien (@nguyentien365) on CodePen.

Kiểu chọn này sẽ tác động đến toàn bộ phần tử thuộc thẻ đó (h1, h2, h3,p,….) vì vậy bạn không thể chọn cho một vùng độc lập khác.

The id Selector – vùng chọn dựa vào id

  • Bộ chọn id sử dụng thuộc tính id của phần tử HTML để chọn một phần tử cụ thể.
  • Id của một phần tử phải là duy nhất trong một trang, do đó bộ chọn id được sử dụng để chọn một phần tử duy nhất!
  • Để chọn một phần tử có id cụ thể, hãy viết một ký tự thăng (#), theo sau là id của phần tử.

Quy tắc kiểu bên dưới sẽ được áp dụng cho phần tử HTML có id = “para1”:

See the Pen The id Selector – vùng chọn dựa vào id by nguyen tien (@nguyentien365) on CodePen.

Cùng là nội dung thuộc thẻ <p> nhưng phần tử có id = “para1” đã được định dạng khác :))

Lưu ý: Tên id không thể bắt đầu bằng số!

The class Selector – vùng chọn dựa vào class (lớp)

  • Để chọn các phần tử với một lớp cụ thể, hãy viết ký tự dấu chấm (.), Theo sau là tên của lớp.
  • Khác với id, class (lớp) không phải là định dạng duy nhất cho một phần tử, mà có thể sử dụng cho nhiều phần tử, miễn là các phần tử đó cùng thuộc một lớp với nhau. (như lớp người, lớp thú ăn thịt, thú ăn cỏ vậy…  =]] )

See the Pen The class Selector – vùng chọn dựa vào class (lớp) by nguyen tien (@nguyentien365) on CodePen.

Ví dụ trên bạn có thể thấy, ta có 2 thẻ khác nhau chứa nội dung là <h1> và <p>, nhưng vì chúng cùng chịu sự ảnh hưởng của class “.center” nên nội dung của 2 thẻ này sẽ có cùng cách hiển thị như nhau.

Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp.

Trong ví dụ bên dưới, chỉ các phần tử <p> có class = “center” mới được căn giữa (dù h1 cũng thuộc class “center”):

See the Pen XyKgYb by nguyen tien (@nguyentien365) on CodePen.

Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một class.

Trong ví dụ bên dưới, phần tử <p> sẽ được tạo kiểu theo class = “center” và class = “large”:

See the Pen css 4 p.center p.large by nguyen tien (@nguyentien365) on CodePen.

Lưu ý: Tên lớp không thể bắt đầu bằng số!

Grouping Selectors – nhóm vùng chọn

Nếu bạn có các phần tử có cùng định nghĩa kiểu như nhau:

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

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

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

 

thì bạn có thể nhóm lại như sau:

h1, h2, p {
    text-align: center;
    color: red;
}

CSS Comments – Note, bình luận, giải nghĩa cho cú pháp.

Nhận xét được sử dụng để giải thích mã và có thể giúp bạn khi bạn chỉnh sửa mã nguồn vào một ngày sau đó.

Nhận xét bị bỏ qua bởi trình duyệt.

Nhận xét CSS bắt đầu bằng / * và kết thúc bằng * /. Nhận xét cũng có thể mở rộng nhiều dòng:

p {
    color: red;
    /* Đây là comments một dòng */
    text-align: center;
}

/* đây là
comments
nhiều dòng */

 

Về tác giả

Tiến Đức

Để lại một bình luận