Giáo án và PPT Khoa học máy tính 12 kết nối bài 17: Các mức ưu tiên của bộ chọn

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

HOẠT ĐỘNG KHỞI ĐỘNG

- GV chia lớp thành các nhóm 3 – 4 HS, cho HS xem video https://www.youtube

.com/shorts/FYIX7Kc5JRo, sau đó nêu câu hỏi cho các nhóm thảo luận: 

a) Phần tử Glowing Button có phải là phần tử tĩnh không?

b) Điều gì xảy ra khi di chuyển chuột lên phần tử Glowing Button? Em có thể tạo hiệu ứng này bằng các mẫu định dạng CSS đã học không?

c) Theo em, bộ chọn nào của CSS giúp tạo hiệu ứng như trên?

HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1. Kiểu bộ chọn dạng Pseudo-class và Pseudo-element

GV đặt câu hỏi hướng dẫn học sinh tìm hiểu:

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

• 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. 

Sản phẩm dự kiến:

a) Bộ chọn pseudo-

class

- Pseudo-class (lớp giả) là khái niệm chỉ các trạng thái đặc biệt của phần tử HTML. Các trạng thái này không cần định nghĩa và mặc định được coi như các lớp có sẵn của CSS. 

- Trong CSS, các lớp giả quy định viết sau dấu “:” theo cú pháp:

Bảng 17.1. Một số lớp giả thường dùng

Khai báo lớp giả để làm thay đổi các giá trị mặc định của đối tượng Gây sự chú ý.

b) Bộ chọn kiểu pseudo-element

- Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS. 

- Quy định phần tử giả viết sau dấu “::” theo cú pháp:

Bảng 17.2. Một số phần tử giả

Khai báo phần tử giả để thiết lập các mẫu định dạng đặc biệt cho phần tử giả đó khác so với mặc định.

Hoạt động 2. Mức độ ưu tiên khi áp dụng CSS

GV đưa ra câu hỏi: Vì CSS không có quy định rõ ràng nên sẽ có nhiều mẫu định dạng cùng áp dụng cho một phần tử HTML. Khi đó, CSS sẽ ưu tiên áp dụng mẫu mặc định nào? Nêu nguyên tắc tính trọng số của một mẫu định dạng.

Sản phẩm dự kiến:

* Thứ tự ưu tiên các mẫu định dạng trong CSS khi có nhiều hơn các mẫu cùng áp dụng cho một phần tử HTML

Khi có nhiều mẫu định dạng có thể áp dụng cho một phần tử HTML nào đó trên trang web, CSS sẽ áp dụng định dạng theo thứ tự ưu tiên:

1. !important: Các thuộc tính trong CSS với từ khoá !important sẽ có mức ưu tiên cao nhất.

1. CSS trực tiếp (inline CSS): Các định dạng nằm ngay trong phần tử HTML với thuộc tính style.

1. CSS liên quan đến kích thước thiết bị (Media type): Các định dạng loại này thường dùng để điều khiển cách hiển thị thông tin phụ thuộc vào kích thước màn hình của thiết bị. Ví dụ mẫu định dạng sau sẽ tăng kích thước chữ lên 150% nếu chiều ngang màn hình nhỏ hơn 600 px:

@media only screen and (max-width: 600px) {body {font-size: 150%;}}

1. Trọng số CSS: Mỗi định dạng CSS sẽ có trọng số (specificity) riêng của mình. Tại mức ưu tiên này, định dạng CSS có trọng số cao nhất sẽ được áp dụng.

1. Nguyên tắc thứ tự cuối cùng (Rule order): Nếu có nhiều mẫu định dạng với cùng trọng số thì định dạng ở vị trí cuối cùng sẽ được áp dụng.

1. Kế thừa từ CSS cha: Nếu không tìm thấy mẫu định dạng tương ứng thì sẽ lấy thông số định dạng CSS kế thừa từ phần tử cha.

2. Mặc định theo trình duyệt: Nếu không có bất cứ định dạng CSS nào thì trình duyệt quyết định thể hiện nội dung mặc định.

Theo nguyên tắc trên, nếu có một dãy các mẫu định dạng CSS cùng có thể áp dụng cho một phần tử HTML thì tính kế thừa CSS và nguyên tắc thứ tự cuối cùng được xếp dưới trọng số CSS, tức là khi đó CSS sẽ tính trọng số các mẫu định dạng, cái nào có trọng số lớn hơn sẽ được ưu tiên áp dụng.

* Cách tính trọng số của một mẫu định dạng

- Cách tính trọng số của CSS rất đơn giản dựa trên giá trị trọng số của từng thành phần của bộ chọn (selector) trong mẫu định dạng. 

- Trọng số của mẫu định dạng sẽ được tính bằng tổng của các giá trị thành phần đó. 

Bảng 17.4. Giá trị của các thành phần của bộ chọn

Bảng 17.5. Một số ví dụ tính trọng số

HOẠT ĐỘNG LUYỆN TẬP

Từ nội dung bài học, GV yêu cầu HS hoàn thành các bài tập trắc nghiệm sau:

Câu 1: Mẫu CSS định dạng các liên kết sau khi kích hoạt chuyển màu xanh dương là

A. a:link {color: blue;}.

B. a:visited {color: blue;}.

C. a:hover {color: blue;}.

D. a:clicked {color: blue;}.

Câu 2: Mẫu CSS thiết lập định dạng khi di chuyển con trỏ chuột lên đối tượng có id="title" sẽ hiển thị với kiểu chữ đậm là

A. #title:hover {font-style: bold}.

B. .title:hover {font-weight: bold}.

C. title:hover {font-style: italics}.

D. #title:hover {font-weight: bold}.

Câu 3: Mẫu CSS thiết lập định dạng dòng đầu tiên của các đoạn thuộc lớp description có kích thước gấp 3 lần cỡ chữ hiện thời của trình duyệt là

A. p#description::first-line {font-size: 3rem;}.

B. p.description::first-line {font-size: 3pt;}.

C. p.description::first-line {font-size: 3em;}.

D. #p.description::first-line {font-size: 3em;}.

Câu 4: Bộ chọn a:link  p#info có trọng số bằng bao nhiêu? 

A. 22.

B. 130.

C. 112.

D. 220.

Câu 5: Khi định dạng bằng CSS, thuộc tính nào giúp làm sắc nét hình ảnh?

A. image-standard.

B. image-quality.

C. image-rendering.

D. filter.

Sản phẩm dự kiến:

HOẠT ĐỘNG VẬN DỤNG

Vận dụng kiến thức, GV yêu cầu HS hoàn thành bài tập sau:

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.

Câu 2: Tìm hiểu thêm các dạng pseudo-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.