GIẢI DỄ HIỂU TIN HỌC ỨNG DỤNG 12 KẾT NỐI CHỦ ĐỀ 1: MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 1: Làm quen với Trí tuệ nhân tạo
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 2: Trí tuệ nhân tạo trong khoa học và đời sống

GIẢI DỄ HIỂU TIN HỌC ỨNG DỤNG 12 KẾT NỐI CHỦ ĐỀ 2: MẠNG MÁY TÍNH VÀ INTERNET

Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 3: Một số thiết bị mạng thông dụng
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 4: Giao thức mạng
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 5: Thực hành chia sẻ tài nguyên trên mạng

GIẢI DỄ HIỂU TIN HỌC ỨNG DỤNG 12 KẾT NỐI CHỦ ĐỀ 3: ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 6: Giao tiếp và ứng xử trong không gian mạng

GIẢI DỄ HIỂU TIN HỌC ỨNG DỤNG 12 KẾT NỐI CHỦ ĐỀ 4: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY

GIẢI DỄ HIỂU TIN HỌC ỨNG DỤNG 12 KẾT NỐI CHỦ ĐỀ 5: HƯỚNG NGHIỆP VỚI TIN

Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 19: Dịch vụ sửa chữa và bảo trì máy tính
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 20: Nhóm nghề quản trị trong ngành Công nghệ thông tin
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 21: Hội thảo hướng nghiệp

GIẢI DỄ HIỂU TIN HỌC ỨNG DỤNG 12 KẾT NỐI CHỦ ĐỀ 7: ỨNG DỤNG TIN HỌC

Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 23: Chuẩn bị xây dựng trang web
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 24: Xây dựng phần đầu trang web
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 25: Xây dựng phần thân và chân trang web
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 26: Liên Kết và thanh điều hướng
Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 27: Biểu mẫu trên trang web

Dễ hiểu giải Tin học ứng dụng 12 Kết nối bài 14: Định dạng văn bản bằng CSS

Giải dễ hiểu bài 14: Định dạng văn bản bằng CSS. Trình bày rất dễ hiểu, nên tiếp thu Tin học ứng dụng 12 Kết nối dễ dàng. Học sinh nắm được kiến thức và biết suy rộng ra các bài tương tự. Thêm 1 dạng giải mới để mở rộng tư duy. Danh mục các bài giải trình bày phía dưới

Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

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?

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Giải nhanh:

Đoạn văn bản trên sử dụng các phông chữ khác nhau.

1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

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 mẫu đị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ữ. Các thuộc tính của CSS liên quan bao gồm định dạng phông chữ (text font), màu chữ (text color) và dòng văn bản (text line). Quan sát và thảo luận để hiểu rõ hơn các mẫu định dạng CSS này.

Giải nhanh:

Một số mẫu định dạng phổ biến:

Định dạng phông chữ (text font):
font-family: Xác định loại phông chữ được sử dụng cho văn bản.
font-size: Đặt kích thước của phông chữ.
font-weight: Xác định độ đậm của phông chữ.
font-style: Xác định kiểu chữ.
Màu chữ (text color): color: Đặt màu cho văn bản.
Định dạng dòng văn bản:
text-decoration: Xác định trang trí dòng văn bản.
text-align: Căn chỉnh văn bản theo chiều ngang.
line-height: Xác định khoảng cách dòng giữa các dòng văn bản.

Câu hỏi 1: Giải thích các mẫu định dạng sau:

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Giải nhanh:

Mẫu định dạng cho tiêu đề h1:
color: red;: Đặt màu chữ của tiêu đề h1 thành màu đỏ.
text-align: center;: Căn chỉnh tiêu đề h1 ở giữa trên trang.
Mẫu định dạng cho đoạn văn bản trong thẻ p: text-align: justify;: Căn chỉnh đoạn văn bản trong thẻ p theo kiểu dàn trang đều.

Câu hỏi 2: Giả sử mẫu định dạng CSS có định dạng sau:

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Hãy kiểm tra tác dụng của CSS này trên một tệp HTML bất kì và đưa ra nhận xét.

Giải nhanh:

Mẫu định dạng CSS <style> body {color: blue;} </style> sẽ áp dụng một thuộc tính cho phần tử <body> của tệp HTML.

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

Hoạt động 2: Tìm hiểu tính kế thừa và cách chọn thứ tự ưu tiên của CSS

Quan sát, tìm hiểu, trao đổi và trả lời các câu hỏi sau:

1. Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập ở một phần từ HTML thì định dạng đó có áp dụng cho tất cả các phần tử con, cháu của phần tử này không?

2. Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên nào.

Giải nhanh:

1. Có tính kế thừa. Định dạng đó sẽ áp dụng cho tất cả các phần tử con, cháu.

2. Trình duyệt sẽ áp dụng các mẫu định dạng này theo thứ tự ưu tiên được xác định.

Câu hỏi 1: Giả sử có mẫu định dạng sau:

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Khi đó toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông có chân, đúng hay sai?

Giải nhanh:

Đúng, toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông chân (serif) trong trường hợp này.

Câu 2: Giả sử có mẫu định dạng như sau:

Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p.

Giải nhanh:

Quy tắc h1 {text-align: left;} sẽ được áp dụng cho tất cả các phần tử <h1>, đặt thuộc tính text-align thành "left".
Quy tắc h1 {text-align: center !important;} sẽ không được áp dụng đúng cú pháp CSS vì thiếu ký tự đóng ngoặc nhọn.
Quy tắc * {font-family: serif;} sẽ được áp dụng cho tất cả các phần tử, đặt phông chữ của chúng thành phông chân (serif).

LUYỆN TẬP

Câu 1: Mỗi phông chữ sau đây thuộc loại nào?

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Giải nhanh:

Tên phông chữ sẽ tương ứng với các ý.

Câu 2: 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:

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Giải nhanh:

Các em sử dụng mã HTML như sau:

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Khi chạy mã sẽ hiển thị:

BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

VẬN DỤNG

Câu 1: Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-space (khoảng cách giữa các kí tự), word-space (khoảng cách các từ) và text-shadow (chữ bóng).

Giải nhanh:

font-variant: được sử dụng để xác định kiểu chữ viết hoa của văn bản:
normal: Chữ in thường.
small-caps: Chữ viết hoa nhỏ.
letter-spacing: xác định khoảng cách giữa các kí tự trong một đoạn văn bản.
word-spacing: xác định khoảng cách giữa các từ trong một đoạn văn bản.
text-shadow: cho phép thêm hiệu ứng bóng cho văn bản.

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

Giải nhanh:

Gợi ý kiểu định dạng: