Giáo án Khoa học máy tính 12 chân trời Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

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 hoạt động cá nhân và trả lời câu hỏi:

+ Siêu liên kết là gì?

+ Trong HTML, siêu liên kết được tạo như thế nào?

+ Theo em, siêu liên kết trên trang web thường có những trạng thái như thế nào?

- GV giới thiệu cho HS về lớp giả.

- GV tiếp tục đặt câu hỏi định hướng:

Em hãy tìm hiểu cách định kiểu các trạng thái của siêu liên kết thông qua lớp giả theo các nội dung sau:

+ Cách nhận biết trạng thái.

+ Cách định kiểu trạng thái bằng CSS.

- Với mỗi trạng thái, GV phân tích ví dụ minh hoạ để HS hiểu và biết cách áp dụng lớp giả.

- 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 Làm tr.125 SGK:

Viết mã lệnh CSS để khi người dùng di chuyển con trỏ chuột đến siêu liên kết sẽ phóng to cỡ chữ và có màu nền bao quanh (màu sắc tuỳ ý).

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.123 – 125 và trả lời các câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

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

- HS trả lời các câu hỏi và nhận xét lẫn nhau. 

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.125 SGK:

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 chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

1. Định kiểu CSS cho siêu liên kết

- Khái niệm: Siêu liên kết là một đường dẫn đến các phần khác của trang web hay một trang web khác. 

- Trong HTML, siêu liên kết được tạo bằng thẻ <a> và thuộc tính href.

- Khi định kiểu CSS cho siêu liên kết, ta thường quan tâm đến 5 trạng thái của siêu liên kết: 

+ Bình thường.

+ Lướt qua (hover).

+ Kích hoạt (active).

+ Đã truy cập (visited).

+ Tập trung (focus).

- Ngôn ngữ CSS đặt ra khái niệm gọi là “lớp giả” để định kiểu cho các trạng thái của một phần tử. 

- Lớp giả được kí hiệu bằng dấu hai chấm (:) đặt trước tên lớp, chẳng hạn: 

+ a:hover là lớp giả hover của phần tử <a>.

+ a:active là lớp giả active của phần tử <a>.

- Các trạng thái của siêu liên kết được định kiểu thông qua các lớp giả như sau:

a) Trạng thái bình thường 

+ Đây là trạng thái mặc định của siêu liên kết khi chưa có tương tác hoặc kích hoạt, siêu liên kết sẽ có màu xanh có gạch chân (Hình 1).

+ Muốn thay đổi trạng thái này, em định kiểu bằng cách khai báo vùng chọn là thẻ a.

Ví dụ 1:

Trong đó:

• Thuộc tính color dùng để định kiểu màu cam cho siêu liên kết.

• Thuộc tính text-decoration với giá trị none dùng để bỏ đường gạch chân của siêu liên kết (Hình 2). 

+ Giả sử em có thẻ <a> là <a href="#">Liên kết đến website khác</a>. Liên kết sẽ được hiển thị trên trang web như sau:

Hình 1. Khi chưa định kiểu CSS

Hình 2. Khi có định kiểu CSS

b) Trạng thái lướt qua

- Đây là trạng thái của siêu liên kết khi con trỏ chuột nằm bên trên, con trỏ chuột sẽ có hình bàn tay, màu sắc của siêu liên kết như trạng thái mặc định. 

- Muốn thay đổi trạng thái này, em định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái hover.

Ví dụ 2:

Ý nghĩa: Khi di chuyển con trỏ chuột đến siêu liên kết, siêu liên kết sẽ chuyển sang màu đỏ và có gạch chân.

Hình 3. Khi trỏ chuột nằm trên đường liên kết

c) Trạng thái kích hoạt

- Đây là trạng thái của siêu liên kết khi đang được nháy chuột, hoặc nháy và giữ chuột hoặc đang được kích hoạt, liên kết sẽ có màu đỏ, có gạch chân. 

- Muốn thay đổi trạng thái này, em định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái active.

Ví dụ 3:

Ý nghĩa: Khi nháy và giữ chuột, siêu liên kết sẽ chuyển sang màu xanh lá.

Hình 4. Khi liên kết đang được 
nháy và giữ chuột

d) Trạng thái đã truy cập

- Đây là trạng thái khi siêu liên kết đã được truy cập trước đó, siêu liên kết sẽ có màu tím, có gạch chân. 

- Muốn thay đổi trạng thái này, em định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái visited.

Ví dụ 4:

Ý nghĩa: Những siêu liên kết đã được truy cập trước đó sẽ chuyển thành màu hồng.

Hình 5. Khi liên kết đã được truy cập

e) Trạng thái tập trung

- Đây là trạng thái của siêu liên kết khi đang được người dùng chọn bằng bàn phím, siêu liên

kết sẽ có viền xung quanh. 

- Muốn thay đổi trạng thái này, em áp dụng định kiểu với khai báo vùng chọn là thẻ a kèm theo trạng thái focus.

Ví dụ 5:

Ý nghĩa: Người dùng có thể lần lượt chọn các thành phần trên trang web bằng cách gõ phím Tab. Khi một siêu liên kết được chọn, thuộc tính outline sẽ tạo một đường viền màu vàng bao quanh siêu liên kết này.

Hình 6. Liên kết được chọn bằng bàn phím

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 hoạt động cá nhân và trả lời câu hỏi: 

CSS cho phép định kiểu cho số hoặc dấu đầu dòng của các mục trong danh sách bằng những thuộc tính nào?

- Với mỗi cách đánh dấu, GV phân tích ví dụ minh hoạ để HS hiểu và biết cách áp dụng.

- 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 Làm tr.126 SGK:

Em hãy thay đổi lần lượt các giá trị của thuộc tính list-style-position, đồng thời thay đổi độ rộng của trang web để xem kết quả hiển thị.

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.125 – 126 và trả lời câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

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

- HS trả lời câu hỏi và nhận xét lẫn nhau.

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 chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

2. Định kiểu CSS cho danh sách

Bên cạnh những thuộc tính về màu sắc, nền, căn lề,... CSS còn cho phép định kiểu cho số hoặc dấu đầu dòng của các mục trong danh sách.

a) Đánh số hoặc dấu đầu dòng theo những kiểu có sẵn

- Sử dụng thuộc tính list- style-type và chỉ định những kiểu do CSS quy định sẵn.

Ví dụ 6: Định kiểu cho dấu đầu dòng là hình tròn rỗng.

- Giả sử em có danh sách các bạn trong lớp:

Danh sách này sẽ được hiển thị trên trang web như Hình 7.

Hình 7. Dấu đầu dòng của mỗi mục 
là hình tròn rỗng

- Một số kiểu số và dấu đầu dòng của CSS:

Bảng 1. Một số giá trị của thuộc tính 
list-style-type

b) Đánh dấu đầu dòng bằng hình ảnh

- Sử dụng thuộc tính list-style-image và chỉ định giá trị là đường dẫn của tệp ảnh đặt trong hàm url().

Ví dụ 7: Định kiểu cho dấu đầu dòng bằng tệp ảnh pointer.svg. Kết quả như Hình 8.

Hình 8. Dấu đầu dòng của mỗi mục 
lấy từ tệp ảnh

- Khi nội dung của các mục chiếm nhiều hơn một dòng, em có thể định kiểu cho số hoặc dấu đầu dòng nằm bên trong hoặc bên ngoài phần nội dung bằng thuộc tính list-style-position.

Ví dụ 8: Định kiểu cho dấu đầu dòng nằm bên ngoài phần nội dung của mỗi mục như Hình 9.

Hình 9. Kết quả hiển thị dấu đầu dòng nằm bên ngoài phần nội dung của mỗi mục

- Ngoài ra, em thay thế giá trị outside bằng inside để đặt dấu đầu dòng vào bên trong phần nội dung của mục.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.126 SGK: