Bài 28: Cú pháp CSS

CSS Cú pháp

Một CSS rule-Thiết bị bao gồm một chọn và một khối khai:

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

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

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

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

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

Thí dụ

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

Hãy thử nó Yourself »

---

CSS Selectors

lựa chọn CSS được sử dụng để "tìm thấy" (hoặc chọn) các yếu tố HTML dựa trên tên nguyên tố, id, lớp, thuộc tính của họ, và nhiều hơn nữa.

---

Các yếu tố Selector

Việc chọn thành phần lựa chọn các yếu tố dựa vào tên phần tử.

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

Thí dụ

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

Hãy thử nó Yourself »

---

Các id Selector

Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một yếu tố cụ thể.

Các id của một phần tử phải là duy nhất trong một trang, vì vậy chọn id được sử dụng để chọn một yếu tố duy nhất!

Để chọn một phần tử với một id cụ thể, viết thư (#) nhân vật băm, tiếp theo là id của phần tử.

Các quy tắc phong cách dưới đây sẽ được áp dụng cho các phần tử với id = "para1" HTML:

Thí dụ

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

Hãy thử nó Yourself »

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

---

Các Selector lớp

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

Để chọn phần tử với một lớp học cụ thể, hãy viết một dấu chấm (.) Nhân vật, theo sau là tên của lớp.

Trong ví dụ dưới đây, tất cả các thành phần HTML với class = "trung tâm" sẽ có màu đỏ và căn giữa:

Thí dụ

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

Hãy thử nó Yourself »

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

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

Thí dụ

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

Hãy thử nó Yourself »

các yếu tố HTML cũng có thể tham khảo nhiều hơn một lớp.

Trong ví dụ dưới đây, các phần tử <p> sẽ được theo kiểu theo class = "trung tâm" và class = "lớn":

Thí dụ

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

Hãy thử nó Yourself »

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

---

Phân nhóm Selectors

Nếu bạn có các yếu tố với các định nghĩa phong cách 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ã.

Để bộ chọn nhóm, tách từng chọn với một dấu phẩy.

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

Thí dụ

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

Hãy thử nó Yourself »

---

CSS Comments

Ý kiến ​​được sử dụng để giải thích các code, 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:

Thí dụ

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

/* This is
a multi-line
comment */