Tin học 12 · Kết nối tri thức · Chung, Khoa học máy tính và Tin học ứng dụng

Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Bài 14. Định dạng văn bản bằng CSS

Mục tiêu bài học

Giải thích và vận dụng nội dung định dạng văn bản bằng css qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

font-family đặt danh sách phông dự phòng; font-size đặt cỡ, font-weight độ đậm, font-style kiểu nghiêng. text-align căn nội dung dòng, text-indent thụt dòng đầu, line-height đặt chiều cao dòng, text-decoration thêm trang trí như gạch chân. Đơn vị px là điểm ảnh CSS, em phụ thuộc cỡ chữ tính toán của phần tử trong các thuộc tính như thụt đầu dòng; rem dựa vào cỡ chữ gốc. line-height không đơn vị nhân với cỡ chữ của phần tử, hỗ trợ thừa kế linh hoạt. Không lạm dụng gạch chân làm người đọc nhầm liên kết; ưu tiên khả năng đọc thay vì chỉ trang trí.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<style>
body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; }
h1 { font-size: 24px; text-align: center; }
p { text-indent: 1em; }
.luu-y { font-weight: bold; font-style: italic; text-decoration: underline; }
</style>
<h1>Nhật kí vườn</h1><p>Ngày đầu gieo hạt.</p>
<p class="luu-y">Đo cùng một thời điểm.</p>

Kết quả suy ra từ cấu trúc mã: văn bản body cỡ 16 px, khoảng dòng p 24 px; h1 cỡ 24 px và căn giữa, khoảng dòng thừa kế theo hệ số thành 36 px; p thụt đầu 16 px, lời lưu ý đậm/nghiêng/gạch chân. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

font-family đặt danh sách phông dự phòng; font-size đặt cỡ, font-weight độ đậm, font-style kiểu nghiêng.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
Thuộc tính đặt độ đậm là gì?
Câu 2Mức 2Trắc nghiệm 1 đáp án
Với font-size:20px; line-height:1.5, chiều cao dòng tính là bao nhiêu?
Câu 3Mức 2Đúng / Sai
text-align: center dùng để căn giữa nội dung dòng trong khối, không tự căn giữa mọi khối của trang.
Câu 4Mức 2Ghép nối
Ghép thuộc tính với mục đích.
Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.
Câu 5Mức 2Trả lời ngắn
Một p font-size 18 px, text-indent 2 em. Độ thụt đầu dòng bao nhiêu pixel CSS?
Câu 6Mức 2Trắc nghiệm 1 đáp án
Khai báo phông có dự phòng hợp lí là gì?
Câu 7Mức 3Tự luận
Viết CSS cho trang nhật kí: chữ 16 px Arial/dự phòng sans-serif, line-height 1.5, h1 24 px giữa, p thụt 1 em, lời lưu ý đậm/nghiêng/gạch chân. Dùng đúng HTML h1 và hai p.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Bạn đặt line-height:24px ở body rồi tăng h1 lên 32 px khiến tiêu đề nhiều dòng khó đọc. Đề xuất sửa và giải thích sự khác nhau với hệ số 1.5.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay