BÀI F7. GIỚI THIỆU CSS (CTST

BÀI F7. GIỚI THIỆU CSS (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. Khái niệm CSS

CSS (Cascading Style Sheets) là ngôn ngữ định kiểu cho các phần tử HTML, hỗ trợ thiết kế bố cục, màu sắc, phông chữ, hiệu ứng như đổ bóng, chuyển sắc, hoạt hình,... CSS tách biệt nội dung (HTML) và hình thức (CSS), mang lại các lợi ích:
- Linh hoạt về bố cục: Hỗ trợ thiết kế tương thích nhiều thiết bị.
- Nhất quán về hình thức: Định kiểu đồng nhất trên nhiều trang.
- Dễ bảo trì và nâng cấp: Thay đổi hình thức không ảnh hưởng nội dung.
- Có thể tái sử dụng: CSS có thể dùng lại cho nhiều phần tử hoặc trang khác.

2. Các cách bổ sung mã lệnh CSS trong trang web

- Cách 1: Chèn trực tiếp CSS vào thẻ HTML bằng thuộc tính style. Dễ áp dụng nhưng khó bảo trì, không tái sử dụng được.
- Cách 2: Đặt mã CSS trong cặp thẻ <style> trong phần <head>. Cho phép định kiểu toàn cục.
- Cách 3: Tạo tệp CSS riêng (vd: style.css) và liên kết bằng thẻ <link>. Cách này hỗ trợ cộng tác, bảo trì và tái sử dụng mã hiệu quả hơn.
Lưu ý: Khi có nhiều cách định kiểu đồng thời, trình duyệt ưu tiên theo thứ tự: Cách 1 → Cách 2 → Cách 3.

THỰC HÀNH

Áp dụng cho tệp portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho các phần tử <h1>
- Phông chữ: Arial, 32pt, in đậm.
- Màu chữ: Xanh dương, có đổ bóng.
- Giãn cách kí tự: 4px.
Hướng dẫn: Viết mã CSS trong thẻ <style> ở phần <head>, sử dụng các thuộc tính: font-family, font-size, font-weight, color, text-shadow, letter-spacing.
Nhiệm vụ 2. Định kiểu CSS cho bảng
- Bảng rộng 75% trang web, viền nét liền xanh dày 2px.
- Hàng tiêu đề: cao 32px, căn giữa, in hoa toàn bộ.
- Các hàng còn lại: cao 48px, căn trái và giữa, tô màu xen kẽ.
Hướng dẫn: Sử dụng style trực tiếp trong các thẻ HTML. Dùng các thuộc tính như: width, border, height, text-align, vertical-align, text-transform, background-color,... để tạo hiệu ứng và bố cục theo yêu cầu.

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