Giải Tin học 12 - Định hướng khoa học máy tính trang 78

Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 78–79

Tóm tắt lý thuyết

Bài này dạy cách dùng CSS để định dạng văn bản, tập trung vào phông chữ và màu chữ.

a) CSS định dạng phông chữ – các thuộc tính chính:

Thuộc tính	Chức năng	Giá trị thường gặp
`font-family`	Chọn phông chữ	Tên phông, hoặc 5 loại: serif, sans-serif, monospace, cursive, fantasy
`font-size`	Cỡ chữ	Đơn vị tuyệt đối (cm, mm, in, px, pt), tương đối (em, ex, rem), %, hoặc mức (xx-small … xx-large)
`font-style`	Kiểu chữ	`normal` (thường), `italics` (nghiêng)
`font-weight`	Độ đậm	`normal`, `bold`, hoặc số 100–900 (từ 500 trở lên là đậm)

Lưu ý về font-family:

Tên phông có dấu cách phải đặt trong nháy kép/đơn, ví dụ "Times New Roman".
Có thể liệt kê danh sách phông; trình duyệt tìm từ trái sang phải, dùng phông đầu tiên có sẵn. Tên loại phông (serif…) nên để cuối làm phương án dự phòng.

Một số đơn vị cỡ chữ cần nhớ:

$1\,\text{in} = 2{,}54\,\text{cm}$
$1\,\text{px} = \dfrac{1}{96}\,\text{inch}$
$1\,\text{pt} = \dfrac{1}{72}\,\text{inch}$
em: so với cỡ chữ hiện thời; rem: so với cỡ chữ của phần tử gốc html.

b) CSS định dạng màu chữ:

Thuộc tính color đặt màu chữ. Các giá trị cơ bản: black, white, purple, blue, orange, red, green, yellow.
Bộ chọn * áp dụng cho tất cả phần tử HTML.

Câu hỏi Khởi động

Đề: Quan sát đoạn văn bản được thể hiện trên một trang web trong Hình 14.1. Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản?

Trả lời gợi ý:

Quan sát đoạn "Lịch sử CSS" trong Hình 14.1, ta thấy văn bản dùng nhiều định dạng phông chữ khác nhau trong cùng một đoạn:

Tiêu đề "Lịch sử CSS" có chữ đậm, cỡ lớn, màu đỏ để làm nổi bật.
Phần nội dung dùng cỡ chữ nhỏ hơn, màu đen.
Hai tên riêng "Håkon Wium Lie" và "Tim Berners-Lee" được định dạng bằng phông chữ khác (kiểu monospace/màu khác) so với phần còn lại.

Nhận xét: Trên cùng một trang web, mỗi phần văn bản có thể được gán phông chữ, cỡ chữ, kiểu chữ (đậm/nghiêng) và màu chữ riêng. Đây chính là vai trò của CSS – tách phần định dạng ra để dễ dàng thay đổi hình thức hiển thị.

Hoạt động 1: Tìm hiểu các mẫu định dạng CSS định dạng văn bản

Đề: Các định dạng văn bản trong Hình 14.1 đều liên quan đến định dạng kí tự gồm phông chữ, màu chữ và kiểu chữ. Quan sát và thảo luận để hiểu rõ hơn các mẫu định dạng CSS này.

Trả lời gợi ý:

Các định dạng kí tự được CSS điều khiển qua ba nhóm thuộc tính:

Định dạng phông chữ (text font): font-family, font-size, font-style, font-weight.
Định dạng màu chữ (text color): color.
Định dạng dòng văn bản (text line): căn lề, khoảng cách dòng… (học ở phần sau).

Cùng phân tích các ví dụ mẫu trong bài:

Ví dụ phông chữ cho thẻ h1:

h1 {font-family: Times, "Times New Roman", Tahoma, serif;}

Ý nghĩa: Thẻ h1 ưu tiên dùng phông Times; nếu máy không có thì thử Times New Roman, rồi Tahoma; cuối cùng nếu không có phông nào thì dùng một phông loại có chân (serif) bất kì.

Ví dụ cỡ chữ:

p   {font-size: 1.2em;}
html {font-size: 100%;}

p {font-size: 1.2em;}: mọi đoạn p có cỡ chữ bằng 1,2 lần cỡ chữ hiện thời của trình duyệt.
html {font-size: 100%;}: đặt cỡ chữ mặc định cho toàn trang theo chế độ mặc định của trình duyệt.

Ví dụ kiểu chữ và độ đậm:

em     {font-style: italics; font-weight: bold;}
strong {font-style: italics; font-weight: 900;}

Thẻ em: chữ nghiêng + đậm (bold).
Thẻ strong: chữ nghiêng + đậm mức rất cao (900).

Ví dụ màu chữ:

h1 {color: red;}
em {color: green;}
*  {color: black;}

h1 → chữ màu đỏ.
em → chữ màu xanh lá cây.
* → tất cả phần tử còn lại có chữ màu đen.

Kết luận thảo luận: Mỗi mẫu CSS gồm một bộ chọn (selector như h1, p, *) và các cặp thuộc tính : giá trị đặt trong dấu { }. Nhờ đó ta có thể định dạng linh hoạt phông, cỡ, kiểu và màu chữ cho từng loại phần tử trên trang web.

Hai trang này chủ yếu là lý thuyết và hoạt động thảo luận, chưa có bài tập tính toán hay câu trắc nghiệm. Nếu bạn gửi đúng trang 78-79, mình sẽ giải tiếp phần bài tập ở đó nhé.

Chế độ đọc sách →