Bài tập — Bài 14: Định dạng văn bản bằng CSS

Phần 1: Câu hỏi Trắc nghiệm (Nhận biết & Thông hiểu)

Câu 1. Nội dung nào sau đây phản ánh đúng kiến thức cần ghi nhớ trong bài Bài 14: Định dạng văn bản bằng CSS? A. Bỏ qua các khái niệm cơ bản và chỉ học thuộc lòng kết quả cuối cùng mà không cần hiểu bản chất. B. Chỉ áp dụng kiến thức trong một trường hợp duy nhất, không cần kiểm tra điều kiện hay đơn vị. C. color, font-family, font-size, font-weight, font-style định dạng chữ. D. Các nội dung trong bài hoàn toàn độc lập và không có mối liên hệ nào với thực tiễn hay các bài học khác.

Câu 2. Khi học và vận dụng bài Bài 14: Định dạng văn bản bằng CSS, khẳng định nào dưới đây là chính xác? A. Không cần đọc kĩ đề bài hay phân tích dữ kiện trước khi thực hiện các bước giải. B. Mọi khái niệm trong bài đều có thể thay thế tùy ý cho nhau mà không làm thay đổi kết quả. C. Chỉ cần ghi đáp số ngắn gọn, bỏ qua toàn bộ bước lập luận, giải thích và kiểm tra lại. D. text-align căn lề, line-height đặt chiều cao dòng, text-decoration tạo gạch chân, gạch ngang.

Câu 3. Theo phần Kiến thức trọng tâm của bài Bài 14: Định dạng văn bản bằng CSS, phát biểu nào sau đây là đúng? A. CSS cung cấp nhiều thuộc tính để định dạng văn bản: color đặt màu chữ, font-family chọn phông chữ, font-size đặt cỡ chữ, font-weight đặt độ đậm (ví dụ bold), font-style đặt chữ nghiêng (italic), text-align căn lề (left, center, right, justify), line-height đặt chiều cao dòng, text-decoration tạo gạch chân hoặc gạch ngang. B. Kết luận ngay kết quả khi chưa đối chiếu với quy tắc hoặc định nghĩa trong bài học. C. Thay đổi toàn bộ quy tắc trọng tâm của bài học theo cảm tính cá nhân. D. Bỏ qua việc rèn luyện qua ví dụ minh họa và bài tập thực hành của tiết học.

Câu 4. Để nắm vững và vận dụng tốt bài Bài 14: Định dạng văn bản bằng CSS, học sinh cần lưu ý điều nào sau đây? A. Không cần ghi nhớ các lưu ý trọng tâm vì chúng không ảnh hưởng đến việc làm bài tập. B. Khi chọn phông chữ, người ta thường liệt kê nhiều phông dự phòng, ví dụ font-family: Arial, sans-serif;, để nếu máy người xem thiếu phông đầu tiên thì trình duyệt dùng phông tiếp theo. C. Áp dụng ngược lại hoàn toàn so với quy tắc và hướng dẫn trong phần kiến thức trọng tâm. D. Chỉ cần đọc lướt tiêu đề bài học mà không cần nắm vững nội dung chi tiết từng mục.

Phần 2: Bài tập Tự luận & Thực hành theo tiết học

Bài 1 (Cơ bản — Hệ thống hóa kiến thức trọng tâm). Dựa vào phần Kiến thức trọng tâm của bài Bài 14: Định dạng văn bản bằng CSS, em hãy trình bày các khái niệm, quy tắc hoặc nội dung cốt lõi của tiết học và nêu ý nghĩa của chúng.

Bài 2 (Thực hành — Phân tích & Giải mẫu theo ví dụ tiết học). Đọc kĩ tình huống/ví dụ trọng tâm của tiết học dưới đây, sau đó tự trình bày lại các bước thực hiện và nêu nhận xét rút ra:

Yêu cầu: định dạng đoạn văn có màu xám đậm, phông Arial, cỡ chữ 16px, chiều cao dòng 1,5 lần và căn đều hai bên.

Bài 3 (Vận dụng — Áp dụng quy tắc ghi nhớ vào bài tập). Vận dụng các điểm ghi nhớ trọng tâm của bài Bài 14: Định dạng văn bản bằng CSS để giải thích hoặc thực hiện yêu cầu thực hành mở rộng sau:

p { color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; text-align: justify; }


**Bài 4 (Luyện tập học kì — Mức độ Cơ bản).**
Khi nhận được liên kết lạ từ người không quen biết, em nên làm gì?

**Bài 5 (Luyện tập học kì — Mức độ Thông hiểu).**
Một bạn muốn chia sẻ thư mục chứa tài liệu ôn tập qua mạng nội bộ cho cả lớp. Em hãy nêu các bước chia sẻ thư mục đó.

**Bài 6 (Luyện tập học kì — Mức độ Vận dụng & Nâng cao).**
Viết đoạn mã HTML hoàn chỉnh tạo một trang web giới thiệu về trường em, gồm: tiêu đề `<h1>` "Trường của em", một đoạn văn giới thiệu, một danh sách không có thứ tự gồm 3 hoạt động ngoại khoá, một bảng có 2 cột (Hoạt động, Thời gian) và 2 hàng dữ liệu, một liên kết tới trang web của trường, và một hình ảnh minh hoạ.

## Phần 3: Đáp án & Hướng dẫn giải chi tiết

### 1. Đáp án phần Trắc nghiệm

- **Bảng đáp án:** **1-C**, **2-D**, **3-A**, **4-B**.
- **Giải thích chi tiết:**
  - **Câu 1 (C):** Khẳng định đúng theo mục *Ghi nhớ* của bài: *"`color`, `font-family`, `font-size`, `font-weight`, `font-style` định dạng chữ."*
  - **Câu 2 (D):** Khẳng định đúng theo nội dung cốt lõi của tiết học: *"`text-align` căn lề, `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân, gạch ngang."*
  - **Câu 3 (A):** Khẳng định chuẩn xác theo phần *Kiến thức trọng tâm*: *"CSS cung cấp nhiều thuộc tính để định dạng văn bản: `color` đặt màu chữ, `font-family` chọn phông chữ, `font-size` đặt cỡ chữ, `font-weight` đặt độ đậm (ví dụ `bold`), `font-style` đặt chữ nghiêng (`italic`), `text-align` căn lề (`left`, `center`, `right`, `justify`), `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân hoặc gạch ngang."*
  - **Câu 4 (B):** Khẳng định đúng theo hướng dẫn trọng tâm của bài: *"Khi chọn phông chữ, người ta thường liệt kê nhiều phông dự phòng, ví dụ `font-family: Arial, sans-serif;`, để nếu máy người xem thiếu phông đầu tiên thì trình duyệt dùng phông tiếp theo."*

### 2. Hướng dẫn giải phần Tự luận & Thực hành

- **Bài 1:**
  - **Nội dung cốt lõi cần trình bày:** CSS cung cấp nhiều thuộc tính để định dạng văn bản: `color` đặt màu chữ, `font-family` chọn phông chữ, `font-size` đặt cỡ chữ, `font-weight` đặt độ đậm (ví dụ `bold`), `font-style` đặt chữ nghiêng (`italic`), `text-align` căn lề (`left`, `center`, `right`, `justify`), `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân hoặc gạch ngang. Cỡ chữ có thể dùng đơn vị `px` (điểm ảnh, cố định) hoặc `em`, `%` (tương đối so với cỡ chữ cha).
  - **Tổng kết ghi nhớ:** `color`, `font-family`, `font-size`, `font-weight`, `font-style` định dạng chữ.; `text-align` căn lề, `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân, gạch ngang.; Cỡ chữ dùng `px` (cố định) hoặc `em`, `%` (tương đối).
- **Bài 2:**
  - **Hướng dẫn phân tích & trình bày:** Dựa trực tiếp vào dữ kiện trong ví dụ minh họa của tiết học: *Yêu cầu: định dạng đoạn văn có màu xám đậm, phông Arial, cỡ chữ 16px, chiều cao dòng 1,5 lần và căn đều hai bên.*
  - **Lưu ý khi trình bày:** Xác định rõ yêu cầu, áp dụng đúng quy tắc/khái niệm trong mục 1 và kiểm tra lại kết quả cuối cùng.
- **Bài 3:**
  - **Phương pháp giải:** Áp dụng các quy tắc ghi nhớ của bài **Bài 14: Định dạng văn bản bằng CSS** (`color`, `font-family`, `font-size`, `font-weight`, `font-style` định dạng chữ.; `text-align` căn lề, `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân, gạch ngang.; Cỡ chữ dùng `px` (cố định) hoặc `em`, `%` (tương đối).).
  - **Lời giải mẫu/Nhận xét:** ```css
p {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}

Bài 4: Không nhấp vào liên kết lạ, kiểm tra độ tin cậy, báo cho người lớn khi nghi ngờ.
Bài 5: Các bước: chọn thư mục → mở tính năng chia sẻ → đặt tên chia sẻ → đặt quyền truy cập cho cả lớp (chỉ đọc) → thông báo đường dẫn cho cả lớp.
Bài 6: Đoạn mã HTML đầy đủ các thành phần yêu cầu: <h1>, <p>, <ul> với 3 mục, <table> với 2 cột và 2 hàng dữ liệu, <a href="...">, <img src="..." alt="...">. Chấm theo số thành phần đúng.

Phần 1: Câu hỏi Trắc nghiệm (Nhận biết & Thông hiểu)

Phần 2: Bài tập Tự luận & Thực hành theo tiết học

Yêu cầu: định dạng đoạn văn có màu xám đậm, phông Arial, cỡ chữ 16px, chiều cao dòng 1,5 lần và căn đều hai bên.

p { color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; text-align: justify; }

**Bài 4 (Luyện tập học kì — Mức độ Cơ bản).** Khi nhận được liên kết lạ từ người không quen biết, em nên làm gì? **Bài 5 (Luyện tập học kì — Mức độ Thông hiểu).** Một bạn muốn chia sẻ thư mục chứa tài liệu ôn tập qua mạng nội bộ cho cả lớp. Em hãy nêu các bước chia sẻ thư mục đó. **Bài 6 (Luyện tập học kì — Mức độ Vận dụng & Nâng cao).** Viết đoạn mã HTML hoàn chỉnh tạo một trang web giới thiệu về trường em, gồm: tiêu đề `<h1>` "Trường của em", một đoạn văn giới thiệu, một danh sách không có thứ tự gồm 3 hoạt động ngoại khoá, một bảng có 2 cột (Hoạt động, Thời gian) và 2 hàng dữ liệu, một liên kết tới trang web của trường, và một hình ảnh minh hoạ. ## Phần 3: Đáp án & Hướng dẫn giải chi tiết ### 1. Đáp án phần Trắc nghiệm - **Bảng đáp án:** **1-C**, **2-D**, **3-A**, **4-B**. - **Giải thích chi tiết:** - **Câu 1 (C):** Khẳng định đúng theo mục *Ghi nhớ* của bài: *"`color`, `font-family`, `font-size`, `font-weight`, `font-style` định dạng chữ."* - **Câu 2 (D):** Khẳng định đúng theo nội dung cốt lõi của tiết học: *"`text-align` căn lề, `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân, gạch ngang."* - **Câu 3 (A):** Khẳng định chuẩn xác theo phần *Kiến thức trọng tâm*: *"CSS cung cấp nhiều thuộc tính để định dạng văn bản: `color` đặt màu chữ, `font-family` chọn phông chữ, `font-size` đặt cỡ chữ, `font-weight` đặt độ đậm (ví dụ `bold`), `font-style` đặt chữ nghiêng (`italic`), `text-align` căn lề (`left`, `center`, `right`, `justify`), `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân hoặc gạch ngang."* - **Câu 4 (B):** Khẳng định đúng theo hướng dẫn trọng tâm của bài: *"Khi chọn phông chữ, người ta thường liệt kê nhiều phông dự phòng, ví dụ `font-family: Arial, sans-serif;`, để nếu máy người xem thiếu phông đầu tiên thì trình duyệt dùng phông tiếp theo."* ### 2. Hướng dẫn giải phần Tự luận & Thực hành - **Bài 1:** - **Nội dung cốt lõi cần trình bày:** CSS cung cấp nhiều thuộc tính để định dạng văn bản: `color` đặt màu chữ, `font-family` chọn phông chữ, `font-size` đặt cỡ chữ, `font-weight` đặt độ đậm (ví dụ `bold`), `font-style` đặt chữ nghiêng (`italic`), `text-align` căn lề (`left`, `center`, `right`, `justify`), `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân hoặc gạch ngang. Cỡ chữ có thể dùng đơn vị `px` (điểm ảnh, cố định) hoặc `em`, `%` (tương đối so với cỡ chữ cha). - **Tổng kết ghi nhớ:** `color`, `font-family`, `font-size`, `font-weight`, `font-style` định dạng chữ.; `text-align` căn lề, `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân, gạch ngang.; Cỡ chữ dùng `px` (cố định) hoặc `em`, `%` (tương đối). - **Bài 2:** - **Hướng dẫn phân tích & trình bày:** Dựa trực tiếp vào dữ kiện trong ví dụ minh họa của tiết học: *Yêu cầu: định dạng đoạn văn có màu xám đậm, phông Arial, cỡ chữ 16px, chiều cao dòng 1,5 lần và căn đều hai bên.* - **Lưu ý khi trình bày:** Xác định rõ yêu cầu, áp dụng đúng quy tắc/khái niệm trong mục 1 và kiểm tra lại kết quả cuối cùng. - **Bài 3:** - **Phương pháp giải:** Áp dụng các quy tắc ghi nhớ của bài **Bài 14: Định dạng văn bản bằng CSS** (`color`, `font-family`, `font-size`, `font-weight`, `font-style` định dạng chữ.; `text-align` căn lề, `line-height` đặt chiều cao dòng, `text-decoration` tạo gạch chân, gạch ngang.; Cỡ chữ dùng `px` (cố định) hoặc `em`, `%` (tương đối).). - **Lời giải mẫu/Nhận xét:** ```css p { color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; text-align: justify; }

Bài 4: Không nhấp vào liên kết lạ, kiểm tra độ tin cậy, báo cho người lớn khi nghi ngờ.

Bài 5: Các bước: chọn thư mục → mở tính năng chia sẻ → đặt tên chia sẻ → đặt quyền truy cập cho cả lớp (chỉ đọc) → thông báo đường dẫn cho cả lớp.

Bài 6: Đoạn mã HTML đầy đủ các thành phần yêu cầu: <h1>, <p>, <ul> với 3 mục, <table> với 2 cột và 2 hàng dữ liệu, <a href="...">, <img src="..." alt="...">. Chấm theo số thành phần đúng.