CSS Syntax and Selectors - Cú pháp và bộ chọn lọc CSS

[PVS]

CSS Syntax and Selectors - Cú pháp và bộ chọn lọc CSS

CSS Syntax
Một thiết lập quy tắc CSS gồm một bộ chọn và một khối khai báo:

​

Các điểm chọn cho các phần tử HTML bạn muốn cho style.

Các khối khai báo có chứa một hoặc nhiều khai báo cách nhau bởi dấu chấm phẩy.

Mỗi khai báo bao gồm tên một thuộc tính CSS và một giá trị, cách nhau bằng dấu hai chấm.

Một khai báo CSS luôn kết thúc bằng một dấu chấm phẩy, và khối khai báo được bao quanh bởi dấu ngoặc nhọn.

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

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

CSS Selectors
Bộ chọn lọc CSS được sử dụng để "find" (hoặc chọn) các phần tử HTML dựa trên tên nguyên tố, id, class, thuộc tính của nó, và nhiều hơn nữa.

Phần tử Selector
Việc chọn thành phần lựa chọn các phần tử dựa trên tên nguyên tố.

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ả phần tử <p> sẽ được căn giữa, với một màu chữ đỏ):

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

Id Selector
Các id selector sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.
Id của một phần tử nên là duy nhất trong một trang, vì vậy các id selector được sử dụng để chọn một phần tử duy nhất!
Để chọn một phần tử với một id cụ thể, viết thăng (#) đối tượng, tiếp theo là id của phần tử.
Các quy tắc style dưới đây sẽ được áp dụng cho các phần tử HTML với id="para1":

#para1 {
    text-align: center;
    color: red;
}

Lưu ý: Một tên id không thể bắt đầu với một số!

Class Selector
Việc chọn class chọn phần tử với một thuộc tính class cụ thể.

Để chọn phần tử với một class cụ thể, viết bất kỳ một ký tự (.), Theo sau là tên của class.

Trong ví dụ dưới đây, tất cả các các phần tử HTML với class="center" sẽ có màu đỏ

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

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

Trong ví dụ dưới đây, chỉ phần tử <p> với class="center" sẽ được căn giữa:

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

Các phần tử HTML cũng có thể tham khảo nhiều hơn một class.
Trong ví dụ dưới đây, các phần tử <p> sẽ được theo kiểu class="center" và class="large":

<p class="center large">This paragraph refers to two classes.</p>

Lưu ý: Tên class không thể bắt đầu với một số!

Grouping Selectors
Nếu bạn có các phần tử với các định nghĩa style tương tự, như thế này:

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

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

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

Nó sẽ được tốt hơn để nhóm các Selectors, để giảm thiểu các mã.

Để nhóm selectors, tách từng selector bằng dấu phẩy.

Trong ví dụ dưới đây, chúng tôi đã nhóm các Selectors từ đoạn code trên:

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

CSS Comments
Ý kiến được sử dụng để giải thích các mã, và có thể giúp đỡ khi bạn chỉnh sửa mã nguồn vào một ngày sau đó.

Ý kiến được bỏ qua bởi trình duyệt.

Một nhận xét CSS bắt đầu bằng /* và kết thúc bằng */. Các ý kiến cũng có thể span nhiều dòng:
Ví dụ:

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

Chúc các bạn thành công.

Nguồn: w3schools.com​