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

⚙️ Bài tập

🧩 Nhiệm vụ 2: Thiết lập mẫu định dạng CSS (đã có hướng dẫn)

Đề bài: Thiết lập định dạng cho trang web với các yêu cầu:

• Tiêu đề căn giữa, cỡ chữ 16 px, màu xanh.
• Các dòng văn bản thụt lề dòng đầu 2 ký tự, căn đều hai bên.
• Các từ in đậm, in nghiêng thể hiện theo mặc định của trình duyệt.

Giải thích đoạn mã hướng dẫn:

h1,h2 {font-family: sans-serif; font-size: 16px;
       color: blue; text-align: center; }
p {text-align: justify; text-indent: 2em; }
strong,em {font-size: 100%; }

• h1,h2 {...}: định dạng cả hai mức tiêu đề → phông không chân, cỡ 16 px, màu xanh, căn giữa (center).
• p {...}: các đoạn văn được căn đều hai bên (justify) và thụt lề dòng đầu 2 ký tự (text-indent: 2em). Đơn vị em bằng cỡ chữ hiện hành, nên 2em ≈ 2 ký tự.
• strong,em {font-size: 100%;}: giữ nguyên cỡ chữ, để in đậm/in nghiêng hiển thị theo mặc định trình duyệt.

⚙️ LUYỆN TẬP

Câu 1

Đề bài: Mỗi phông chữ sau đây thuộc loại nào?
a) Times New Roman b) Courier New c) Abadi d) Bradley Hand ITC
e) Berlin Sans FB f) ALGERIAN g) Consolas h) Cascadia

Cách 1 — Quan sát đặc điểm nét chữ

Dựa vào hình dáng từng phông trong sách:

Cách 2 — Dựa vào công dụng thực tế

• Nhóm dùng cho văn bản đọc: Times New Roman (serif), Abadi & Berlin Sans FB (sans-serif).
• Nhóm dùng cho mã lệnh/lập trình: Courier New, Consolas, Cascadia (đều monospace để các ký tự thẳng cột).
• Nhóm trang trí: Bradley Hand ITC (viết tay), ALGERIAN (cách điệu).

💡 Mẹo nhớ: Nếu phông có chữ "Consolas/Courier/Mono/Code" → thường là monospace. Phông trông như viết tay → cursive.

Câu 2

Đề bài: Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau:

        Trời Hà Nội xanh
                              Sáng tác: Văn Ký
Xanh xanh thắm bầu trời xanh Hà Nội
Hồ Gươm xanh như mái tóc em xanh

Cách 1 — Phân tích từng thành phần

1. Tiêu đề "Trời Hà Nội xanh": căn giữa, in đậm, màu xanh.

h1 {
  text-align: center;
  color: blue;
  font-weight: bold;
}

2. Dòng "Sáng tác: Văn Ký": căn phải, riêng tên "Văn Ký" in đậm màu đỏ.

.tac-gia {
  text-align: right;
}
.ten {
  font-weight: bold;
  color: red;
}

3. Hai dòng thơ: có các từ in đậm và in nghiêng xen kẽ.

strong { font-weight: bold; }   /* các từ in đậm */
em     { font-style: italic; }  /* các từ in nghiêng: Hà Nội, Hồ Gươm */

Cách 2 — Tổng hợp danh sách thuộc tính

Các thuộc tính CSS cần dùng cho đoạn văn bản này gồm:

• text-align — căn lề (center cho tiêu đề, right cho dòng sáng tác)
• color — màu chữ (xanh cho tiêu đề, đỏ cho tên tác giả)
• font-weight — độ đậm (bold cho tiêu đề, tên tác giả, các từ in đậm)
• font-style — kiểu nghiêng (italic cho các từ "Hà Nội", "Hồ Gươm")

⚠️ Lưu ý thi: Dạng "nhìn kết quả → liệt kê thuộc tính CSS" hay ra thi. Hãy soi từng đặc điểm: vị trí (text-align), màu (color), đậm (font-weight), nghiêng (font-style), cỡ (font-size).

⚙️ VẬN DỤNG

Câu 1

Đề bài: Tìm hiểu thêm các thuộc tính phông chữ như font-variant và các thuộc tính dòng văn bản như letter-spacing, word-spacing, text-shadow.

Hướng dẫn tìm hiểu:

Cú pháp text-shadow: x y blur color;

• x: độ lệch ngang của bóng
• y: độ lệch dọc
• blur: độ mờ
• color: màu bóng

Ví dụ tổng hợp:

h1 {
  font-variant: small-caps;
  letter-spacing: 3px;
  word-spacing: 8px;
  text-shadow: 2px 2px 4px #888888;
}

⚠️ Lưu ý: Trong sách viết tắt là letter-space và word-space, nhưng tên thuộc tính CSS chuẩn là letter-spacing và word-spacing (có đuôi -ing). Nhớ viết đúng khi làm bài thực hành.

Câu 2

Đề bài: Với bài đọc thêm "Lịch sử CSS" (Bài 13), hãy thiết lập hai tệp CSS khác nhau để định dạng cho trang web mô tả bài đọc này. Hai kiểu định dạng cần khác nhau về phông chữ, cỡ chữ và màu chữ.

Hướng dẫn thực hành:

Tạo một trang HTML (ví dụ lichsu.html) và liên kết lần lượt với 2 tệp CSS.

Tệp style1.css (kiểu trang trọng, cổ điển):

body {
  font-family: serif;      /* phông có chân */
  font-size: 18px;
  color: #333333;          /* xám đậm */
}
h1 {
  color: #8B0000;          /* đỏ thẫm */
  text-align: center;
}

Tệp style2.css (kiểu hiện đại):

body {
  font-family: sans-serif; /* phông không chân */
  font-size: 14px;
  color: #0066CC;          /* xanh dương */
}
h1 {
  color: #FF6600;          /* cam */
  text-align: left;
}

Cách liên kết trong HTML – đổi giữa hai tệp ở dòng :

Hai tệp khác nhau ở: phông chữ (serif ↔ sans-serif), cỡ chữ (18px ↔ 14px), màu chữ (xám/đỏ thẫm ↔ xanh/cam). Đây chính là minh chứng cho ưu điểm của CSS: cùng một nội dung HTML, chỉ cần đổi tệp CSS là thay đổi toàn bộ giao diện.

⚙️ BÀI 15 — TẠO MÀU CHO CHỮ VÀ NỀN

Câu Khởi động

Đề bài: Các định dạng sau có thiết lập cùng một màu hay không? Em có nhận xét gì về cách thiết lập màu này?
a) p {color: rgb(128,0,128);}
b) p {color: #800080;}
c) p {color: hsl(300,100%,25.1%);}

Cách 1 — Quy đổi về cùng hệ màu RGB

a) rgb(128, 0, 128) → R=128, G=0, B=128.

b) #800080 → đây là hệ hexa (cơ số 16):

• 80 (hexa) = 8×16 + 0 = 128
• 00 (hexa) = 0
• 80 (hexa) = 128

→ tương đương rgb(128, 0, 128). ✅ Giống a)

c) hsl(300, 100%, 25.1%) → quy đổi sang RGB:

• H = 300° (vùng giữa xanh lam và đỏ → màu tím)
• S = 100% (bão hòa tối đa)
• L = 25.1% (độ sáng thấp)
• Kết quả quy đổi ≈ rgb(128, 0, 128). ✅ Giống a) và b)

Kết luận: Cả ba cách thiết lập cùng một màu – màu tím (purple).

Cách 2 — Nhận xét tổng quát

CSS cho phép biểu diễn cùng một màu bằng nhiều hệ màu khác nhau:

• rgb(...): chỉ rõ lượng đỏ – lục – lam (0 đến 255).
• #rrggbb: cũng là RGB nhưng viết dưới dạng số hexa.
• hsl(...): mô tả theo sắc độ (Hue), độ bão hòa (Saturation), độ sáng (Lightness).

💡 Mẹo nhớ: Một cặp số hexa (00 → FF) tương ứng với 0 → 255 trong hệ thập phân. Ví dụ FF = 255, 80 = 128, 00 = 0.

🔍 Kiến thức cần nhớ (Bài 15 – Hệ thống màu CSS)

a) Hệ màu RGB:

• Mỗi màu là tổ hợp ba giá trị (r, g, b), mỗi giá trị là số nguyên 0–255 (một số 8 bit).
• Tổng số màu: 2^8 × 2^8 × 2^8 = 2^24 = 16 777 216 màu.
• Ba cách viết:
• rgb(x-red, x-green, x-blue) — giá trị 0 đến 255
• rgb(x-red%, x-green%, x-blue%) — giá trị phần trăm của 255
• #rrggbb — giá trị trong hệ hexa (cơ số 16)

Một số màu tiêu biểu:

b) Hệ màu HSL:

• H (Hue): vòng tròn màu, giá trị 0 đến 360.
• S (Saturation): độ bão hòa của màu.
• L (Lightness): độ sáng của màu.

🎯 Ghi nhớ: - Phông chữ có 5 họ: serif, sans-serif, monospace, cursive, fantasy. - Định dạng văn bản nhìn qua kết quả: căn lề → text-align, màu → color, đậm → font-weight, nghiêng → font-style. - Một màu có thể viết bằng 3 hệ: rgb(), #rrggbb (hexa), hsl(). Nhớ cặp hexa 80 = 128, FF = 255.