BÀI F10. ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (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 lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học 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). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

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

Siêu liên kết được tạo bằng thẻ <a> và có thể định kiểu cho 5 trạng thái bằng các lớp giả trong CSS:

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

Sử dụng vùng chọn a để định kiểu màu sắc, bỏ gạch chân.

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

Sử dụng a:hover để thay đổi màu hoặc hiệu ứng khi rê chuột vào liên kết.

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

Sử dụng a:active để định kiểu khi liên kết đang được nhấn giữ.

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

Sử dụng a:visited để định kiểu cho các liên kết đã được truy cập.

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

Sử dụng a:focus để định kiểu khi liên kết được chọn bằng bàn phím, thường có viền hoặc hiệu ứng nổi bật.
Tất cả các trạng thái này được định kiểu bằng cách khai báo vùng chọn kết hợp thẻ <a> với lớp giả tương ứng.

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

CSS hỗ trợ định kiểu dấu đầu dòng hoặc số thứ tự của danh sách bằng ba thuộc tính:

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

Sử dụng list-style-type để chọn các kiểu như circle, square, decimal, …

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

Dùng list-style-image kết hợp hàm url() để đặt hình ảnh thay cho dấu đầu dòng.

c) Vị trí hiển thị dấu đầu dòng:

Sử dụng list-style-position với giá trị inside (bên trong nội dung) hoặc outside (bên ngoài nội dung).

THỰC HÀNH

Nhiệm vụ: Định kiểu CSS cho siêu liên kết và danh sách
Yêu cầu: Tạo thanh trình đơn ngang ở đầu trang chủ của trang index.html gồm 3 siêu liên kết.
Cách thực hiện:
- Tạo danh sách chứa 3 siêu liên kết, đặt trong thẻ <div class="nav">.
- Định kiểu cho div.nav bằng CSS trong thẻ <style>.
- Dùng vùng chọn .nav li để sắp xếp các mục theo chiều ngang.
- Dùng .nav li a để định kiểu văn bản, màu chữ và vùng đệm cho các liên kết.
- Thêm hiệu ứng hover để thay đổi màu nền và chữ khi rê chuột.
- Mở tệp HTML để kiểm tra kết quả.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH