BÀI F10 - ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH<br/>(CTST

BÀI F10 - ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 156 sách ict, trang 123 sách cs)

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

Gợi ý trả lời

Khi nháy chọn một siêu liên kết (thẻ <a>), trình duyệt sẽ điều hướng đến địa chỉ được chỉ định trong thuộc tính href. Đó có thể là:
- Một trang web khác,
- Một tệp tin,
- Một vị trí khác trong cùng trang,
- Hoặc một hành động như tải xuống,...

(trang 158 sách ict, trang 125 sách cs)

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ỳ ý).

Gợi ý trả lời

Mã lệnh CSS:

Giải thích:
:hover là trạng thái khi di chuột qua liên kết.
Các thuộc tính như font-size, background-color dùng để tạo hiệu ứng nổi bật.

(trang 159 sách ict, trang 126 sách cs)

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

Gợi ý trả lời

1. list-style-position là gì?
Thuộc tính list-style-position xác định vị trí của dấu đầu dòng (bullet hoặc số thứ tự) trong danh sách.
outside (mặc định): Dấu đầu dòng nằm bên ngoài nội dung phần tử <li>.
inside: Dấu đầu dòng nằm bên trong khối nội dung của phần tử <li>.
2. Ví dụ HTML + CSS

3. Thay đổi độ rộng để quan sát
Thử sửa width: 300px; thành các giá trị như 500px, 200px, v.v. để thấy rõ:
- Ở chế độ inside, khi dòng bị dài và xuống hàng, dấu đầu dòng nằm trong vùng chữ.
- Ở chế độ outside, dấu đầu dòng vẫn nằm bên trái ngoài vùng nội dung, không bị đẩy vào.

(trang 160 sách ict, trang 127 sách cs)

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.

Gợi ý trả lời

1. Các trạng thái của siêu liên kết và cách định kiểu:

Ví dụ:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { background-color: yellow; }
a:active { color: red; }
2. Cách định kiểu cho các mục trong danh sách trong CSS:
Có 2 loại danh sách trong HTML:
- Danh sách có thứ tự: <ol>
- Danh sách không thứ tự: <ul<
- Mỗi mục: <li<
Cách định kiểu CSS:

Ghi chú: có thể dùng list-style-position: inside hoặc outside để điều chỉnh vị trí dấu đầu dòng.

(trang 161 sách ict, trang 128 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
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.

Gợi ý trả lời

1. Định kiểu danh sách "Các hoạt động đã tham gia" trong portfolio.html:
a) Đánh số đầu dòng cho mỗi mục.