BÀI 17. CÁC MỨC ĐỘ ƯU TIÊN CỦA BỘ CHỌN

KHỞI ĐỘNG

Chúng ta đã biết nhiều cách thiết lập mẫu định dạng cho các phần tử HTML. Tuy nhiên, các lệnh định dạng CSS đã biết đều chỉ áp dụng cho các phần tử tĩnh, tức là không phụ thuộc vào tương tác với người dùng. Vậy có cách nào thiết lập CSS để định dạng cho các trạng thái tương tác với người dùng, ví dụ như trạng thái khi người dùng di chuyển hay nháy chuột lên phần tử đó không?

Giải rút gọn:

Có, em  có thể sử dụng các lớp (class) và các trạng thái tương tác như :hover, :active, và :focus để định dạng các phần tử HTML trong các trạng thái tương tác với người dùng.

1. KIỂU VÀ BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT

Hoạt động 1: Tìm hiểu một số kiểu lớp và bộ chọn pseudo-class, pseudo-element

Thảo luận và trả lời các câu hỏi sau:

1. Thế nào là pseudo-class của bộ chọn? Cách áp dụng.

2. Thế nào là pseudo-element của bộ chọn? Nêu ý nghĩa của khái niệm này trong định dạng CSS

Giải rút gọn:

1. Pseudo-class trong CSS cho phép chọn các trạng thái đặc biệt của phần tử HTML và được áp dụng bằng cú pháp "selector

Ví dụ: a:link, a:visited, :hover là các pseudo-class phổ biến.

2. Pseudo-element trong CSS cho phép chọn một phần hoặc một thành phần của phần tử HTML mà không cần thay đổi cấu trúc HTML, và được quy định bằng cú pháp "::pseudo-element"

Ví dụ: ::first-line, ::first-letter, ::selection là các pseudo-element phổ biến.

Câu hỏi 1: Muốn áp dụng đổi màu chữ một vùng trên màn hình khi nháy chuột tại vùng đó thì cần phải dùng định dạng CSS nào?

Giải rút gọn:

Để áp dụng đổi màu chữ cho một vùng trên màn hình khi nháy chuột tại vùng đó, em có thể sử dụng pseudo-class ":hover".

Câu hỏi 2: Muốn tăng kích thước một đoạn văn bản khi di chuyển chuột qua đoạn văn bản đó thì cần dùng định dạng CSS nào?

Giải rút gọn:

Để tăng kích thước một đoạn văn bản khi di chuột qua đó, em có thể sử dụng pseudo-class ":hover".

2. MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS

Hoạt động 2: Tìm hiểu ý nghĩa và ứng dụng của mức độ ưu tiên trong CSS

Giả sử có định dạng CSS như sau:

CSS trên áp dụng cho phần tử HTML sau:

Khi đó cụm từ “Tin học 12” sẽ có màu gì?

Giải rút gọn:

Cụm từ “Tin học 12” sẽ có màu như sau:

Câu hỏi 1: Tính trọng số của các mẫu định dạng sau:

Giải rút gọn:

a) #n12 > .test: ID selector (#n12) có trọng số 100, class selector (.test) có trọng số 10, tổng trọng số là 110. 

b) h1, h2, h3, h4 > #new: Element selectors (h1, h2, h3, h4) có trọng số 1, ID selector (#new) có trọng số 100, tổng trọng số là 400. 

c) p + em.test: Element selector (p) có trọng số 1, class selector (.test) có trọng số 10, tổng trọng số là 11.

Câu hỏi 2: Khi nào nguyên tắc cascading (thứ tự cuối cùng) được áp dụng cho một dãy các định dạng CSS?

Giải rút gọn:

Nguyên tắc cascading (thứ tự cuối cùng) áp dụng khi có nhiều mẫu định dạng CSS có cùng trọng số cho cùng một phần tử HTML. Trong trường hợp này, định dạng CSS ở vị trí cuối cùng sẽ được áp dụng, ghi đè lên các định dạng CSS khai báo trước đó có cùng trọng số.

LUYỆN TẬP

Câu 1: Giải thích sự khác nhau giữa hai định dạng sau:

Giải rút gọn:

Hai định dạng CSS "#p123+ p" và "h2#p123 + p" khác nhau về cách chọn phần tử HTML để áp dụng định dạng.

- "#p123+ p": Đây là một selector có kết hợp giữa ID selector và sibling combinator. Nó chọn các phần tử p là anh em liền kề (sibling) của phần tử có ID là "p123". Ví dụ, nếu có cấu trúc HTML như sau:

Trong trường hợp này, định dạng CSS "#p123+ p" sẽ áp dụng cho phần tử p thứ hai, vì nó là anh em liền kề của phần tử có ID là "p123".

-"h2#p123 + p": Đây là một selector có kết hợp giữa element selector (h2), ID selector và sibling combinator. Nó chọn các phần tử p là anh em liền kề của phần tử h2 có ID là "p123". Ví dụ, nếu có cấu trúc HTML như sau:

Trong trường hợp này, định dạng CSS "h2#p123 + p" sẽ áp dụng cho phần tử p thứ hai, vì nó là anh em liền kề của phần tử h2 có ID là "p123".

Câu 2: Trong phần Thực hành, các tên riêng (tên người, tên tổ chức) cần được bổ sung định dạng đóng khung và in nghiêng. Em sẽ thực hiện các yêu cầu này như thế nào?

Giải rút gọn:

Để bổ sung định dạng đóng khung và in nghiêng cho các tên riêng trong phần Thực hành, bạn có thể sử dụng CSS để áp dụng các định dạng này cho các phần tử chứa tên riêng.

VẬN DỤNG

Câu 1: Tìm hiểu thêm các dạng pseudo-class khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này.

Giải rút gọn:

Các pseudo-class trong CSS bao gồm:

• :hover: Kích hoạt khi người dùng di chuột qua một phần tử, cho phép áp dụng định dạng CSS khi phần tử đang được hover.

• :active: Kích hoạt khi phần tử đang được nhấn (khi người dùng giữ chuột trái), cho phép áp dụng định dạng CSS khi phần tử đang ở trạng thái active.

• :focus: Kích hoạt khi phần tử đang trong trạng thái focus (thường xảy ra khi người dùng click hoặc sử dụng phím tab để di chuyển đến phần tử), cho phép áp dụng định dạng CSS khi phần tử đang trong trạng thái focus.

• (): Cho phép chọn các phần tử con trong một phần tử cha dựa trên vị trí của chúng, cho phép áp dụng định dạng CSS cho phần tử con cụ thể.

Câu 2: Tìm hiểu thêm các dạng pseuso-element khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này.

Giải rút gọn:

• ::before: Chèn nội dung vào phần tử trước nội dung chính của nó, thích hợp cho việc thêm biểu tượng, ký hiệu hoặc trang trí trước một phần tử.

• ::after: Chèn nội dung vào phần tử sau nội dung chính của nó, thích hợp cho việc thêm các phần tử trang trí hoặc hiệu ứng sau một phần tử.

• ::first-line: Áp dụng các định dạng CSS cho dòng đầu tiên của một phần tử chứa nội dung văn bản, cho phép điều chỉnh kiểu chữ, khoảng cách dòng, hoặc các thuộc tính khác cho dòng đầu tiên.