Tìm hiểu Universal, Type/Element và Grouping Selector

0
36

Giới thiệu

Chào các bạn, trong video này chúng ta sẽ tìm hiểu về các loại “selector”. Nhưng trước hết, chúng ta cần phải tìm hiểu về khái niệm “selector”.

Selector là gì?

Như đã đề cập ở mục “Specificity” trong bài học trước đây, sẽ có nhiều phần tử trang trong một trang web (HTML element), muốn áp dụng những“phong cách” lên những phần tử đó, chúng ta sẽ tìm kiếm và quy định chúng thông qua các định danh gọi là “selector”.

Nói cách khác, selector đại diện cho các phần tử trang web mà chúng ta muốn áp dụng style vào để trang trí. Ví dụ, giả sử chúng ta muốn trang trí thẻ h1 bất kỳ trong tài liệu HTML, thì chúng ta phải tìm kiếm (hoặc xác định) thẻ h1, và kỹ thuật để xác định thẻ h1 đó được gọi là “selector”.

Universal Selector

Đây là loại selector mà tất cả các phần tử trang web sẽ được chọn khi ta sử dụng.
Tuy nhiên loại selector này không được khuyến khích sử dụng vì nó sẽ làm thay đổi toàn bộ style mặc định và phá vỡ tính kế thừa (các phần tử con sẽ không được thừa hưởng các đặc điểm từ phần tử cha) dẫn đến trường hợp tất cả các phần tử sẽ có cùng chung một cách đồng nhất các giá trị style mà ta quy định trong loại selector này.

Cú pháp của universal selector như sau:

* { thuộc tính }

Ví dụ:

* {
color: red;
font-size: 16px;
}

Theo như ví dụ trên, thì tất cả các phần tử trong tài liệu HTML sử dụng CSS selector loại này sẽ có cùng chung một style là chữ màu đỏ, kích thước chữ là 16px.

Type Selector/Element Selector

Sỡ dĩ nó còn có thêm một tên gọi nữa là “element selector” vì loại selector này sẽ tìm kiếm dựa trên tên của các thẻ (phần tử trang) tương ứng trong tài liệu HTML và áp dụng style vào.

Cú pháp của type/element selector được khai báo như sau:

element { thuộc tính }

Ví dụ:

p { 
 color: red; 
 background-color: yellow;
}

Dựa vào ví dụ trên, tất cả các paragraph có trong tài liệu HTML sẽ có style là màu chữ đỏ, màu nền là màu vàng.

Grouping

Trường hợp nhiều thẻ có cùng chung một style, với cách khai báo thông thường, thì ta sẽ khai báo cho từng thẻ một. Nhưng để công việc này được đơn giản hơn (làm mã css gọn lại), chúng ta có thể “gom nhóm” chúng lại với nhau – liệt kê chúng trong cùng một nhóm (các thẻ được ngăn cách nhau bởi dấu phẩy).

Cú pháp khai báo như sau:

element, element, element … {thuộc tính}

Vi dụ :

p, h1 { 
 text-align: center;
 font-variant: small-caps;
}

Lưu ý: Chúng ta cũng có thể vừa sử dụng grouping vừa khai báo một style dành riêng cho thẻ đang
được liệt kê trong group đó. Ví dụ minh họa như sau:

p, h1 {
 text-align: center;
 font-variant: small-caps;
} 

p { 

 font-weight: bold;
}

Sau khi khai báo, thẻ p sẽ vừa có thuộc tính text-align và font-variant, vừa có thuộc tính
riêng font-weight.

Xung đột style

Xung đột style xảy ra khi cùng một thuộc tính (property) nhưng giá trị (value) lại khác nhau. Chúng ta có ví dụ sau trong cùng một file .css:

p, h1 { 
text-align: center;
font-variant: small-caps;
background-color: orange; 

p { 
font-weight: bold; 
background-color: yellow;
}

Thẻ p có cùng thuộc tính background-color, nhưng giá trị lại khác nhau. Dựa vào cơ chế
cascade, chúng ta sẽ thấy rằng, cả 2 đoạn khai báo đều cùng “importance” – đều do chính “author” tạo ra, chúng cũng có cùng “specificity” – đều cùng được chỉ định cụ thể tại thẻ p, nhưng không giống nhau về “source order” – style nào viết sau sẽ có độ ưu tiên cao hơn. Vì thế, trường hợp này trình duyệt sẽ chọn màu vàng để hiển thị.

Kết luận

Xem xong video này, hy vọng các bạn sẽ nắm rõ về các loại selector được giới thiệu cũng như cú pháp, đặc điểm của chúng. Chúng ta sẽ cùng tìm hiểu thêm nữa về các loại selector khác trong các bài học tiếp theo. Cũng đừng quên ôn lại cơ chế “cascade” để giải quyết những xung đột style khi nó xảy ra nhé. Chân thành cảm ơn và hẹn gặp lại.

Tài liệu tham khảo

http://www.w3.org/TR/CSS21/selector.html#pattern-matching

0

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên