Cú pháp CSS – Selector trong CSS
Chúng ta chia một đoạn mã CSS ra gồm hai phần đó là: selector : selector sẽ trỏ đến những đối tượng ( html ) chịu ảnh hưởng bởi CSS declaration : các thuộc tính CSS dùng để style cho thẻ selector Example: h1 { background: red; color: blue; ...
Chúng ta chia một đoạn mã CSS ra gồm hai phần đó là:
- selector: selector sẽ trỏ đến những đối tượng (html) chịu ảnh hưởng bởi CSS
- declaration: các thuộc tính CSS dùng để style cho thẻ selector
Example:
h1 {background: red;color: blue;}
Trong đó:
- h1 là selector
- các thuộc tính background, color nằm bên trong cặp dấu ngoặc {} chính là declaration.
Riêng đối với declaration thì các bạn để ý bên trong nó là danh sách các thuộc tính và giá trị của thộc tính đó (key:value), mỗi thuộc tính sẽ được kết thúc bởi dấu chấm phẩy (;).
CSS Selector:
Selector CSS: sử dụng để tìm (chọn) phần tử HTML dựa trên tên phần tử, id, lớp, thuộc tính của chúng,…
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, có màu đỏ):
Example:
p {
text-align: center;
color: red;
}
Bộ chọn id
Bộ chọn id 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ử phải là duy nhất trong một trang, vì vậy 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ự băm (#), tiếp theo 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 với id = “para1”:
#para1 {
text-align: center;
color: red;
}
Slector class.
Bộ chọn lớp chọn các phần tử có thuộc tính lớp cụ thể.
Để chọn các phần tử với một lớp cụ thể, viết một ký tự dấu chấm (.), Tiếp theo là tên của lớp.
Trong ví dụ dưới đây, tất cả các phần tử HTML với class = “center” sẽ là màu đỏ và căn giữa:
.center {
text-align: center;
color: red;
}
