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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS đọc Hoạt động 1 – Tìm hiểu các mẫu định dạng CSS định dạng văn bản tr.76 SGK:

Các đị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.

Hình 14.1. Đoạn văn bản trên trang web

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ 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? 

+ Mỗi thuộc tính có ý nghĩa và giá trị như thế nào? Nêu ví dụ minh hoạ.

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1a SGK tr.76 – 77 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

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 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. 

- font-family: 

+ Chọn phông. 

+ Các phông chữ có thể được chia làm năm loại sau: 

• serif: chữ có chân.

• sans-serif: chữ không chân.

• monospace: chữ có chiều rộng đều nhau.

• cursive: chữ viết tay.

• fantasy: chữ trừu tượng.

+ Sau thuộc tính font-family là một hay một danh sách các tên phông chữ. 

+ Nếu tên phông chữ có chứa dấu cách thì cần đặt trong hai dấu nháy kép (hoặc nháy đơn). 

+ Danh sách các phông chữ này thường cùng loại và tên của loại phông đó ở vị trí cuối cùng. 

+ Nếu đưa ra một danh sách các phông chữ, trình duyệt sẽ lần lượt tìm các phông trong danh sách từ trái sang phải để chọn thể hiện văn bản. Nếu không tìm thấy phông chữ nào trong danh sách thì sẽ chọn phông cùng loại bất kì.

- font-size: 

+ Thiết lập cỡ chữ. 

+ Cú pháp mẫu định dạng:

+ Cỡ chữ có thể là một trong những dạng sau:

• Cỡ chữ theo đơn vị đo chính xác tuyệt đối: cm (centimét), mm (milimét), in (1 inch = 2,54 cm), px (1 pixel = 1/96 inch), pt (1 point = 1/72 inch).

• Cỡ chữ theo các đơn vị đo tương đối: em (so với cỡ chữ hiện thời của trình duyệt), ex (so với chiều cao chữ x của cỡ chữ hiện thời), rem (so với cỡ chữ của phần tử gốc HTML của tệp HTML).

• Cỡ chữ theo tỉ lệ phần trăm (%) cỡ chữ của phần tử cha.

• Cỡ chữ theo các mức xx-small, 
  x-small, small, medium, large, 
  x-large, xx-large. Cỡ chữ mặc định là medium.

Ví dụ:

- font-style: 

+ Thiết lập kiểu chữ thường hay kiểu chữ nghiêng của văn bản. 

+ Có hai giá trị: 

• normal: thường.

• italics: nghiêng.

- font-weight: 

+ Thiết lập kiểu chữ đậm. 

+ Giá trị:

• Đặt bằng chữ: normal (bình thường), bold (đậm).

• Đặt bằng các giá trị từ 100, 200,..., 900, trong đó các mức độ viết đậm từ 500 trở lên.

Ví dụ: Thiết lập các thẻ strong và em với kiểu chữ nghiêng và đậm khác nhau.

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

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

+ Thuộc tính thiết lập màu chữ có những giá trị nào?

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1b SGK tr.77 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

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

- 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.

Ví dụ:

Bộ chọn với kí tự * là tất cả các phần tử HTML của trang web. Khi áp dụng CSS trên thì các phần tử h1 có chữ màu đỏ, các phần tử em có chữ màu xanh lá cây, còn toàn bộ các phần tử còn lại có chữ màu đen.

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Đường cơ sở (baseline) là gì? 

+ Chiều cao dòng văn bản (line-height) là gì?

+ CSS hỗ trợ thiết lập những thuộc tính liên quan đến định dạng dòng văn bản nào? Mỗi thuộc tính có ý nghĩa và giá trị như thế nào? Nêu ví dụ minh hoạ.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời Câu hỏi củng cố kiến thức SGK tr.79:

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

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

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.

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1c SGK tr.78 – 79 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.79:

Câu 1. Ý nghĩa các mẫu định dạng CSS:

+ Tất cả các tiêu đề <h1> đều có chữ màu đỏ, các dòng ngăn giữa.

+ Tất cả các đoạn văn bản <p> đều căn đều hai bên.

Câu 2. Ý nghĩa mẫu định dạng CSS: Tất cả trang web đều có chữ màu xanh dương.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

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 định dạng dòng văn bản

Hình 14.3. Đường cơ sở và chiều cao dòng văn bả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: 

• Thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng. 

• Ngoài các đơn vị đo thông thường, còn có thể thiết lập các số đo tương đối như sau:

+ text-align: 

• Thiết lập căn lề cho các phần tử được chọn. 

• Các kiểu căn lề bao gồm: left, center, right, justify. 

Ví dụ:

+ text-decoration: 

• Thiết lập tính chất “trang trí” dòng văn bản bằng các đường kẻ ngang trên, dưới hay giữa dòng. “

• Thay thế và mở rộng cho thẻ u của HTML. 

• Bốn giá trị thường sử dụng là none (mặc định, không trang trí), underline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ).

Ví dụ:

Hình 14.4. Các định dạng đường kẻ ngang dòng văn bản

Lưu ý: Thuộc tính text-decoration không có tính kế thừa.

+ text-indent: 

• Định dạng thụt lề dòng đầu tiên.

• Nếu giá trị lớn hơn 0 thì dòng đầu tiên thụt vào. Nếu giá trị nhỏ hơn 0 thì dòng đầu tiên lùi ra ngoài còn gọi là thụt lề treo (hanging indent).

Ví dụ: