Giáo án và PPT 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

BÀI 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS (2 tiết)

A. KHỞI ĐỘNG

- HS dựa vào kiến thức đã học để trả lời các câu hỏi Khởi động tr.76 SGK.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

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

a) CSS định dạng phông chữ

CSS hỗ trợ thiết lập những thuộc tính liên quan đến định dạng phông chữ nào?

Kết luận:

CSS hỗ trợ thiết lập các thuộc tính liên quan đến chọn phông (font-family), chọn cỡ chữ (font-size), chọn kiểu chữ (font-style), độ dày nét chữ (font-weight) và nhiều thuộc tính khác. 

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

CSS hỗ trợ thiết lập màu chữ bằng thuộc tính nào? 

Kết luận:

- CSS hỗ trợ thiết lập màu chữ bằng thuộc tính color. 

- Một số giá trị màu cơ bản của thuộc tính color: 

+ black: đen.

+ white: trắng.

+ purple: tím. 

+ blue: xanh dương.

+ orange: cam.

+ red: đỏ.

+ green: xanh lá cây. 

+ yellow: vàng.

c) CSS định dạng dòng văn bản

Trình bày khái niệm đường cơ sở, chiều cao dòng và các thuộc tính liên quan đến định dạng dòng văn bản?

Kết luận:

- Đường cơ sở (baseline) là đường ngang mà các chữ cái đứng thẳng trên nó. 

- Chiều cao dòng văn bản (line-height) là khoảng cách giữa các đường cơ sở của các dòng trong cùng một đoạn văn bản. CSS sẽ mặc định coi chiều cao = 2em và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới của văn bản. 

- Các thuộc tính liên quan đến định dạng dòng văn bản: 

+ line-height

+ text-align

+ text-decoration

+ text-indent

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

a) Tính kế thừa của CSS

Trình bày tính kế thừa của CSS?

Kết luận:

- Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng).

b) Thứ tự ưu tiên khi áp dụng mẫu CSS

Trình bày thứ tự ưu tiên khi áp dụng mẫu CSS?

Kết luận:

- Khi có nhiều mẫu CSS cùng áp dụng cho một phần tử HTML, trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng.

c) Sử dụng kí hiệu * và !important

Trình bày ý nghĩa của kí hiệu * và !important?

Kết luận:

- Kí hiệu *: Dùng trong bộ chọn sẽ có ý nghĩa là phần tử bất kì. 

- Kí hiệu !important: Nếu được sử dụng trong một mẫu định dạng thì mẫu này với thuộc tính tương ứng sẽ được ưu tiên cao nhất mà không phụ thuộc vào vị trí của mẫu trong CSS. 

3. Thực hành

Trình bày các bước để thiết lập mẫu định dạng CSS?

Kết luận:

- Bước 1: HS sử dụng các thẻ <h1>, <h2> và <p> để soạn thảo văn bản như Hình 14.8.

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

- Bước 3: HS định dạng được các dòng văn bản.

C. HOẠT ĐỘNG LUYỆN TẬP

- GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.

Đáp án gợi ý:

D. HOẠT ĐỘNG VẬN DỤNG

GV hướng dẫn HS hoàn thành bài tập phần Vận dụng SGK tr.82 ở nhà và nộp bài làm qua Gmail.