Giáo án điện tử 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

BÀI F10 ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH

KHỞI ĐỘNG

Điều gì sẽ xảy ra khi nháy chọn siêu liên kết bất kì của trang web/

KHÁM PHÁ

1. Định kiểu CSS cho siêu liên kết
2. Siêu liên kết là gì ?
3. Siêu liên kết được tạo bằng thẻ nào?
4. 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ỳ ý).
5. Một siêu liên kết có mấy trạng thái?
6. Định kiểu CSS cho danh sách
7. 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ị.?
8. Để định kiểu cho dấu đầu dòng bằng hình ảnh em sử dụng thuộc tính nào?

LUYỆN TẬP

1. Thảo luận với bạn và cho biết các trạng thái của siêu liên kết khi có sự tương tác của người dùng. Trình bày cách định kiểu CSS ứng với mỗi trạng thái đó.
2. Em hãy cho biết cách định kiểu cho các mục trong danh sách trong CSS.

THỰC HÀNH

1. Nhiệm vụ. Định kiểu CSS cho siêu liên kết và danh sách.
2. Yêu cầu: Trong trang web kỉ yếu lớp, tạo thanh trình đơn ngang nằm ở đầu trang chủ của trang index.html như Hình 10 và Hình 11.

VẬN DỤNG

1. Trong tệp portfolio.html, định kiểu riêng cho các mục trong danh sách Các hoạt động đã tham gia như sau:

a) Đánh số đầu dòng cho mỗi mục.

b) Mỗi mục được đóng khung và màu sắc tuỳ ý.

2. Tạo một tệp HTML mới, trong đó bao gồm một thanh trình đơn mới theo các yêu cầu sau:

a) Thanh trình đơn gồm các mục sau: Trang chủ, Học tập, Phong trào và Liên lạc.

b) Mỗi mục là một siêu liên kết đến một tệp HTML tương ứng.

c) Thanh trình đơn nằm bên trái trang web, theo phương dọc.

d) Định kiểu màu sắc tuỳ ý khi người dùng tương tác với thanh trình đơn.

Gợi ý: Có thể sử dụng các phần tử như bảng hoặc khung.