Giáo án điện tử Khoa học máy tính 12 kết nối Bài 14: Định dạng văn bản bằng CSS (P2)

CHÀO ĐÓN CẢ LỚP ĐẾN BUỔI HỌC MỚI!

BÀI 14: ĐỊNH DẠNG

VĂN BẢN BẰNG CSS

NỘI DUNG BÀI HỌC

1. Định dạng văn bản bằng CSS

2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

3. Thực hành

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

Thiết lập mẫu định dạng CSS để trình bày nội dung văn bản

trong Hình 14.8 trên trang web.

Yêu cầu trình bày:

• Các tiêu đề căn trái, cỡ chữ 16 px, màu đỏ, phông chữ không chân.

• Các dòng văn bản thụt lề dòng đầu 2 kí tự, căn trái.

• Toàn bộ văn bản, trừ tiêu đề, là phông chữ có chân.

Hình 14.8. Nội dung cần trình bày

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

Hình 14.8. Nội dung cần trình bày

Bước 1: Sử dụng các thẻ <h1>, <h2> và <p> để soạn thảo văn bản.

Bước 2: Định dạng tiêu đề.

Bước 3: Định dạng các dòng văn bản.

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

Đoạn mã HTML hoàn chỉnh:

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

Kết quả:

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

Thiết lập định dạng cho trang web ở Nhiệm vụ 1 với các yêu cầu sau:

• Các 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 và in nghiêng trong văn bản sẽ thể hiện theo mặc định của trình duyệt.

Thiết lập định dạng cho trang web ở Nhiệm vụ 1 với các yêu cầu sau:

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

Bước 1: Định dạng tiêu đề.

Bước 2: Định dạng các dòng văn bản.

Bước 3: Định dạng các từ in đậm và in nghiêng trong văn bản.

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

Đoạn mã HTML hoàn chỉnh:

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

Kết quả:

LUYỆN TẬP

(Trả lời câu hỏi trắc nghiệm)

Câu 1. Thuộc tính font-weight

KHÔNG nhận giá trị nào sau đây?

A. bold.

C. normal.

B. 800.

D. 1000.

D. 1000.

Câu 2. Mẫu CSS định dạng phông chữ Courier

cho toàn bộ nội dung trang HTML là

A. all {font-style: Courier;}.

C. body {font-family: Courier;}.

B. * {font-family: Courier;}.

D. * {font-weight: Courier;}.

B. * {font-family: Courier;}.

Câu 3. Phát biểu nào sau đây SAI?

A. Các mẫu định dạng văn bản cơ bản bao gồm các thuộc tính liên quan đến phông chữ, màu chữ và định dạng dòng văn bản.

C. CSS mặc định coi chiều cao dòng văn bản = 2px.

B. Thuộc tính text-decoration

thay thế và mở rộng cho thẻ u

của HTML.

---------------------------------------

----------------------Còn tiếp---------------------