Selectors trong CSS

Selectors trong CSS cho phép người dùng lựa chọn và thao tác đối với các thành phần trong HTML.

Các selectors trong CSS được sử đụng để lựa chọn các thành phần trong HTML dựa trên tên của thẻ HTML, id của thẻ, class của thẻ… các yếu tố cơ bản khi học HTML/CSS để có thể học sang lập trình php.

1.Selector dựa vào tên của thẻ
Ví dụ lựa chọn tất cả các thành phần <p></p> trong văn bản HTML để định dạng bằng CSS ta sử dụng cú pháp:

p {
 Nội dung định dạng...
}

 2. Selector theo id
Trước hết chúng ta phải hiểu id là gì? Ở đây id của một thành phần HTML giúp ta xác định chính xác thành phần đó trong văn bản HTML. Mỗi giá trị của thuộc tính id là duy nhất trong một văn bản HTML.

Định dạng CSS dựa vào id của thành phần HTML ta sử dụng cú pháp

#id_name{
 Nội dung định dạng
}

Trong đó: id_name là tên của id cần định dạng (lưu ý đối với id ta sử dụng dấu # sau đó là tên của id để lựa chọn id đó).

Ví dụ: Có 5 thẻ <p> trong đó cần định dạng màu chữ cho cặp thẻ <p> đầu tiên có màu đỏ. Ta đặt vào thẻ <p> đầu tiên thuộc tính id có giá trị là p1 (giá trị này tùy thuộc vào người dùng đặt, lưu ý là giá trị này phải duy nhất) <p id=”p1″>

#p1{
 color:red;
}

3. Selector theo class
Class trong HTML giúp ta xác định một nhóm các phần tử trong văn bản HTML. Để định dạng CSS dựa vào class ta sử dụng cú pháp:

.class_name{
 Nội dung định dạng
}

Trong đó: class_name là tên của class cần định dạng (lưu ý đối với id ta sử dụng dấu chấm (.) sau đó là tên của class để lựa chọn class đó).

Ví dụ: Có 5 thẻ <p> trong đó cần định dạng màu chữ cho 3 cặp thẻ <p> đầu tiên có màu đỏ. Ta đặt vào 3 thẻ <p> đầu tiên thuộc tính class có giá trị là p123 (giá trị này tùy thuộc vào người dùng đặt, lưu ý là giá trị này phải được đặt trong cả 3 thẻ <p> đầu tiên)

.p123{
 color:red;
}

4. Nhóm các thành phần selectors

Một cách khác để lựa chọn nhiều thành phần trong văn bản HTML có cùng các định dạng CSS là ta có thể đem nhóm chúng thành một nhóm rồi sử dụng định dạng CSS cho nhóm đó. Giả sử định dạng màu chữ đỏ cho nội dung của thẻ <p> và thẻ <h1> ta làm như sau:

p, h1 {
 color:red;
}

Nguồn: the gioi web

SHARE THIS