Các bộ chọn CSS
Các bộ chọn CSS (selector) cho phép bạn chọn và thao
tác với các phần tử HTML.
Bộ chọn được sử dụng để "tìm" (hoặc chọn)
phần tử HTML dựa trên id, class, loại thẻ, các thuộc tính, và nhiều thứ khác của
phần tử HTML.
Bộ chọn
phần tử
Bộ chọn Phần tử (element selector) dựa vào tên của
các phần tử (thẻ) HTML.
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 văn bản nằm trong thẻ
<p> sẽ được căn giữa và có màu đỏ):
Ví dụ
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ỉ định cụ thể một phần tử HTML nào đó.
Một id nên là duy nhất trong một trang, do đó bộ chọn
id được sử dụng nếu bạn muốn áp dụng kiểu cho duy nhất một phần tử trên trang.
Để chọn một phần tử với một id cụ thể, chỉ cần viết
kí hiệu # trước id (giá trị của thuộc tính id) của phần tử đó.
Quy tắc kiểu dưới đây sẽ được áp dụng cho các phần tử
HTML với id = "para1":
Ví dụ:
#para1 {
text-align: center;
color: red;
}
Bộ chọn
class
Bộ chọn class (class selector) chọn các phần tử có
thuộc tính class với một giá trị cụ thể.
Để chọn các phần tử với một class cụ thể, chỉ cần viết
thêm dấu chấm (.) trước tên của class:
Trong ví dụ dưới đây, tất cả các phần tử HTML với
class="center" sẽ có văn bản được căn giữa và màu đỏ.
Ví dụ
.center {
text-align: center;
color: red;
}
Bạn cũng có thể xác định các phần tử HTML cụ thể chịu
tác động thông qua class.
Trong ví dụ dưới đây, tất cả các phần tử <p> với
class="center" sẽ có văn bản được căn giữa và màu đỏ:
Ví dụ:
p.center {
text-align: center;
color: red;
}
Bộ chọn
nhóm
Nếu bạn có các phần tử được định nghĩa kiểu giống
nhau, ví dụ:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Bạn có thể nhóm các bộ chọn này, để giảm bớt mã.
Để nhóm các bộ chọn, phân tách các bộ chọn bởi dấu phẩy
(,).
Trong ví dụ dưới đây, chúng ta đã nhóm các bộ chọn từ
mã ở trên:
Ví dụ:
h1, h2, p {
text-align: center;
color: red;
}
Tự
làm bài tập!
CodeLean.vn
Nguồn: w3school.org
إرسال تعليق