Giáo án Khoa học máy tính 12 Cánh diều bài 10: Bộ chọn lớp, bộ chọn định danh

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 chiếu lại Hình 2 trong phần Khởi động và giới thiệu cho HS về bộ chọn lớp.

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Bộ chọn lớp được khai báo như thế nào?

+ Để áp dụng bộ chọn lớp cho phần tử cụ thể của văn bản HTML, em cần thực hiện như thế nào?

- GV cung cấp cho HS cách khai báo bộ chọn lớp sử dụng cho một phần tử.

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.77 – 78 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

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

- Đại diện các nhóm HS trả lời.

- 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: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

1. Bộ chọn lớp

- Mỗi bộ chọn lớp (class selector) được đặt tên, thường được dùng để khai báo các quy tắc định dạng được áp dụng chung cho nhiều phần tử trong văn bản HTML thay vì phải viết lặp lại các quy tắc này cho từng phần tử.

- Cú pháp khai báo bộ chọn lớp:

Trong đó, Tên_bộ_chọn_lớp do người tạo CSS tự định nghĩa và bắt đầu bằng dấu chấm.

Lưu ý: 

+ Nên hạn chế đặt tên bộ chọn định danh trùng với tên phần tử.

+ Do mục đích định danh nên tên định danh của phần tử thường là duy nhất trong một trang web.

Ví dụ 1: Bảng định dạng CSS ở Hình 1 khai báo bộ chọn lớp được đặt tên là “red” và khai báo giá trị thuộc tính màu đỏ.

Hình 1. Ví dụ khai báo bộ chọn lớp

- Để áp dụng bộ chọn lớp có tên “Tên_bộ_chọn lớp” cho phần tử cụ thể của văn bản HTML, cần khai báo giá trị thuộc tính class của phần tử đó là “Tên_bộ_chọn_lớp”.

Ví dụ 2: Văn bản HTML ở Hình 2a minh hoạ việc áp dụng bộ chọn lớp, kết quả hiển thị như Hình 2b. Các phần tử có thuộc tính class=“red” đều được định dạng chữ màu đỏ.

Hình 2a. Ví dụ khai báo và áp dụng 
bộ chọn lớp

Hình 2b. Kết quả khi mở văn bản HTML ở Hình 2a bằng trình duyệt web

- Sử dụng bộ chọn lớp còn giúp tuỳ biến các định dạng trình bày cho các nội dung được tạo bởi cùng loại phần tử HTML. 

Ví dụ: Một số đoạn văn bản được trình bày chữ màu xanh, một số đoạn văn bản được trình bày chữ màu đỏ trong cùng một trang web. 

- Cú pháp khai báo bộ chọn lớp sử dụng cho một phần tử:

Ví dụ 3: Văn bản HTML ở Hình 3a minh hoạ việc áp dụng các bộ chọn lớp khác nhau cho cùng một kiểu phần tử. Kết quả hiển thị như Hình 3b: 

+ Các phần tử p có thuộc tính class=“red” được trình bày chữ màu đỏ. 

+ Các phần tử p có thuộc tính class=“blue” được trình bày chữ màu xanh. 

+ Phần tử p không có khai báo thuộc tính class, mặc định chữ màu đen.

Hình 3a. Ví dụ khai báo và áp dụng bộ chọn lớp cho một loại phần tử

Hình 3b. Kết quả khi mở văn bản HTML ở Hình 3a bằng trình duyệt web

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 suy nghĩ, trả lời câu hỏi Hoạt động SGK tr.78:

Em có biết cách khai báo định dạng CSS để chỉ áp dụng cho một phần tử cụ thể trên trang web không?

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi:

+ Em hãy nhắc lại cách khai báo sử dụng thuộc tính id để gán tên định danh cho phần tử.

- GV nhấn mạnh ý nghĩa và cung cấp cho HS cách khai báo bộ chọn định danh.

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.68 – 70 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

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

- Đại diện các nhóm HS trả lời.

- 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: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV tóm tắt bài học:

• Bộ chọn lớp thường dùng để khai báo các quy tắc định dạng được áp dụng chung cho nhiều phần tử trong văn bản HTML.

• Bộ chọn định danh được dùng để khai báo các quy tắc định dạng chỉ áp dụng cho một phần tử cụ thể trong văn bản HTML.

2. Bộ chọn định danh

- Cú pháp khai báo sử dụng thuộc tính id để gán tên định danh cho phần tử:

id=“Tên_định_danh”

- CSS có thể sử dụng bộ chọn định danh (ID selector) để áp dụng quy tắc định dạng cho một phần tử đã được định danh trong văn bản HTML. 

- Bộ chọn định danh được xác định thông qua Tên_định_danh của phần tử này và được khai báo như sau:

Ví dụ 4: Văn bản HTML ở Hình 4a khai báo và áp dụng quy tắc định dạng dùng bộ chọn định danh. Kết quả hiển thị như Hình 4b, phần tử h1 với định danh là “tieu-de-muc-chinh” sẽ được trình bày chữ màu đỏ.

Hình 4a. Ví dụ khai báo và áp dụng 
bộ chọn định danh

Hình 4b. Kết quả khi mở văn bản HTML ở Hình 4a bằng trình duyệt web

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

Một số cách khai báo định dạng CSS để chỉ áp dụng cho một phần tử cụ thể trên trang web:

- Sử dụng bộ chọn phần tử, các nội dung tạo bởi cùng loại phần tử (ví dụ các tiêu đề h1) đều có chung định dạng.

- Sử dụng bộ chọn lớp có thể áp dụng chung CSS cho các phần tử có thuộc tính class được gán cùng một bộ chọn lớp.

Tuy nhiên, hai cách tiếp cận trên không hiệu quả. Vì vậy, cần có cách tiếp cận khác. Sử dụng bộ chọn theo thuộc tính định danh là một cách tiếp cận để giải quyết vì thuộc tính id dùng để định danh duy nhất phần tử trên trang web (đã được học ở Bài 2).