Giáo án Tin học ứng dụng 12 kết nối bài 17: Các mức ưu tiên của bộ chọn

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, thực hiện Hoạt động 1 – Tìm hiểu một số kiểu lớp và bộ chọn pseudo-class, pseudo-element SGK tr.96:

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. 

- Từ Hoạt động 1, GV giới thiệu cho HS về bộ chọn pseudo-class và bộ chọn pseudo-element.

- GV đặt câu hỏi định hướng cho các nhóm thảo luận:

+ Em hãy tìm hiểu về bộ chọn pseudo-class và bộ chọn pseudo-element theo các nội dung sau:

• Khái niệm.

• Cú pháp khai báo.

• Một số lớp giả, phần tử giả thường dùng và ý nghĩa của chúng.

- GV phân tích các ví dụ minh hoạ để HS hiểu rõ cách thiết lập bộ chọn pseudo-class và pseudo-element.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.98 SGK: 

Câu 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?

Câu 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?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.96 – 98 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- GV mời đại diện các nhóm báo cáo kết quả thảo luận.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.96:

1. 

+ Pseudo-class của bộ chọn 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.

+ Cách áp dụng:

2. 

+ Pseudo-element của bộ chọn 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.

+ Ý nghĩa của khái niệm này trong định dạng CSS: Nó cho phép thiết lập định dạng cho các phần tử giả mà không cần thay đổi cấu trúc HTML.

Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.98 SGK:

Câu 1. Cần dùng định dạng CSS: active {color: màu chữ mới;}.

Câu 2. Cần dùng định dạng CSS: hover {font-size: 150%;}.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung kiến thức.

- GV chốt kiến thức theo Hộp kiến thức: 

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

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ú ý.

- Ví dụ: Hình 17.1 mô tả CSS thiết lập định dạng cho các trạng thái đặc biệt của phần tử a chứa liên kết. Các trạng thái này gọi gọi là “lớp giả”:

+ Liên kết “Tự học nhanh CSS” sẽ được thiết lập màu đỏ mặc định. 

+ Nếu đã được kích hoạt, liên kết sẽ tự động chuyển màu xanh lá cây. 

+ Khi di chuyển con trỏ chuột lên liên kết thì dòng chữ liên kết đổi màu hồng.

a) Mã HTML

b) Kết quả hiển thị trên trình duyệt

Hình 17.1. Ví dụ minh hoạ cho bộ chọn pseudo-class

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.

- Ví dụ: Hình 17.2 mô tả CSS thiết lập định dạng cho một phần hoặc một thành phần của phần tử p (được gọi là phần tử giả):

+ CSS sẽ tự động tạo khuôn cho dòng đầu tiên của tất cả các phần tử p của trang web với màu đỏ, phông chữ có độ rộng đều nhau và có kích thước lớn hơn 1,2 lần so với bình thường. 

+ Chú ý: Dòng đầu tiên này không phụ thuộc vào văn bản mà chỉ phụ thuộc vào độ rộng của cửa sổ trình duyệt.

a) Mã HTML

b) Kết quả hiển thị trên trình duyệt

Hình 17.2. Ví dụ minh hoạ cho bộ chọn pseudo-element

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS làm việc cá nhân, thực hiện Hoạt động 2 – Tìm hiểu ý nghĩa và ứng dụng của mức độ ưu tiên trong CSS tr.98 SGK:

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ì?

- GV chia lớp thành các nhóm 4 – 5 HS và đưa ra câu hỏi định hướng cho các nhóm thảo luận:

+ 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?

- GV dẫn dắt: “Trong Bài 14, các em đã được làm quen với hai nguyên tắc đầu tiên để xác định thứ tự ưu tiên, đó là nguyên tắc thứ tự cuối cùng (ưu tiên mẫu viết sau cùng) và nguyên tắc ưu tiên cho thuộc tính có từ khoá !important. Trong bài học này, các em sẽ biết được chính xác 7 mức thứ tự ưu tiên của các mẫu định dạng CSS”.

- Với mỗi mức độ ưu tiên, GV đưa ra và phân tích ví dụ cụ thể để HS thông qua ví dụ sẽ hiểu hơn các mức này (Trong các mức thứ tự ưu tiên của Bảng 17.3 thì riêng mức ưu tiên 3 là khó, vượt quá mức kiến thức phổ thông mà HS có thể hiểu được thông qua minh hoạ, mức này coi như công nhận). 

- GV giới thiệu khái niệm và cách tính trọng số của một mẫu định dạng sau đó đưa ra ví dụ và yêu cầu HS giải thích cách tính trọng số.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.100 SGK:

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

a) #n12 > .test.

b) h1, h2, h3, h4 > #new.

c) p + em.test.

Câu 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?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.98 – 100  sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- GV mời đại diện các nhóm báo cáo kết quả thảo luận.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung kiến thức.

- GV chốt kiến thức theo Hộp kiến thức: 

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

* 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ố

(Đính kèm phía dưới)

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

Hướng dẫn trả lời câu hỏi Hoạt động 2 SGK tr.98:

- Cụm từ “Tin học 12” là nội dung của phần tử p. 

- Có hai định dạng CSS có thể áp dụng cho phần tử:

+ Định dạng phía trên có trọng số 10 (vì là pseudo-class).

+ Định dạng phía dưới có trọng số 1 (vì là element). 

Định dạng phía trên sẽ được áp dụng và cụm từ đó sẽ có màu xanh lá cây.

Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.100 SGK:

Câu 1. Trọng số của các bộ chọn tương ứng là:

a) 110 (1 id + 1 class).

b) 104 (1 id + 4 element).

c) 12 (1 class + 2 element).

Câu 2. Nguyên tắc cascading (thứ tự cuối cùng) được áp dụng khi dãy các định dạng CSS có trọng số bằng nhau.