Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
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
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thảo luận nhóm và đại diện nhóm trả lời phần Khởi động.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời phần Khởi động:
Đoạn văn bản trên sử dụng các phông chữ khác nhau.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
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.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thảo luận nhóm và đại diện nhóm trả lời phần Hoạt động 1.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời phần Hoạt động 1:
- Đị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-style: Xác định kiểu chữ (như font-style: italic).
+ font-weight: Xác định độ đậm của phông chữ (như font-weight: bold).
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
- Màu chữ (text color):
+ color: Đặt màu cho văn bản.
- Định dạng dòng văn bản (text line):
+ line-height: Xác định khoảng cách giữa các dòng văn bản.
+ text-align: Căn chỉnh văn bản theo chiều ngang (trái, phải, giữa, hoặc canh đều).
+ text-decoration: Xác định trang trí dòng văn bản như gạch chân, gạch ngang, hay gạch trên.
+ text-indent: Thụt lề đầu dòng.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thảo luận nhóm, tìm ra những nội dung cần nhớ của phần 1a, 1b, 1c (SGK trang 76-79).
Đại diện nhóm tóm lại những nội dung cần nhớ của phần 1a, 1b, 1c.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu hỏi 1 (trang 79): Giải thích các mẫu định dạng CSS sau:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời câu hỏi 1 (trang 79)
- Tất cả các tiêu đề <h1> đều có chữ màu đỏ, các dòng căn giữa.
- Tất cả các đoạn văn bản <p> căn đều 2 bên.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu hỏi 2 (trang 79): Giả sử mẫu định dạng CSS có định 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.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời câu hỏi 2 (trang 79)
Tất cả văn bản phần thân (body) của các trang web đều có màu xanh dương (blue).
Ví dụ:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Trả lời các câu hỏi trắc nghiệm sau đây để củng cố kiến thức phần 1.
Câu 1. CSS chọn phép thiết lập mẫu định dạng chọn phông chữ, sử dụng thuộc tính
A. font-family
B. font-size
C. font-style
D. font-weight
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 2. Chọn mô tả đúng nhất trong các mô tả sau:
A. font-family: chọn kiểu chữ; font-size: chọn cỡ chữ; font-style: chọn phông chữ; font-weight: độ dày nét chữ.
B. font-family: chọn phông chữ; font-size: chọn kiểu chữ; font-style: chọn cỡ chữ; font-weight: độ dày nét chữ.
C. font-family: chọn phông chữ; font-size: chọn cỡ chữ; font-style: chọn kiểu chữ; font-weight: độ dày nét chữ.
D. font-family: độ dày nét chữ; font-size: chọn cỡ chữ; font-style: chọn kiểu chữ; font-weight: chọn phông chữ.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 3. CSS sử dụng thuộc tính nào sau đây để thiết lập màu chữ?
A. border
B. blue
C. font-weight
D. color
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 4. Chọn mô tả đúng nhất trong các mô tả sau:
A. Thuộc tính line-height: thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng; thuộc tính text-align: thiết lập căn lề cho các phần tử được chọn; thuộc tính text-decoration: thiết lập tính chất “trang trí” dòng văn bản; thuộc tính text-indent: định dạng thụt lề dòng đầu tiên.
B. Thuộc tính line-height: thiết lập căn lề cho các phần tử được chọn; thuộc tính text-align: thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng; thuộc tính text-decoration: thiết lập tính chất “trang trí” dòng văn bản; thuộc tính text-indent: định dạng thụt lề dòng đầu tiên.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
C. Thuộc tính line-height: thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng; thuộc tính text-align: định dạng thụt lề dòng đầu tiên; thuộc tính text-decoration: thiết lập tính chất “trang trí” dòng văn bản; thuộc tính text-indent: thiết lập căn lề cho các phần tử được chọn.
D. Thuộc tính line-height: thiết lập tính chất “trang trí” dòng văn bản; thuộc tính text-align: thiết lập căn lề cho các phần tử được chọn; thuộc tính text-decoration: thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng; thuộc tính text-indent: định dạng thụt lề dòng đầu tiên.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
A. Thuộc tính line-height: thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng; thuộc tính text-align: thiết lập căn lề cho các phần tử được chọn; thuộc tính text-decoration: thiết lập tính chất “trang trí” dòng văn bản; thuộc tính text-indent: định dạng thụt lề dòng đầu tiên.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 5. Trong thuộc tính text-decoration các giá trị thường sử dụng là:
A. 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ữ).
B. none (mặc định, không trang trí), underline (đường kẻ phía trên chữ), overline (đường kẻ dưới chữ) và line-through (kẻ giữa dòng chữ).
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
C. none (mặc định, không trang trí), underline (đường kẻ dưới chữ), superline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ).
D. none (mặc định, không trang trí), belowline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ).
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
A. 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ữ).
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 6. Trong thuộc tính text-align các kiểu căn hàng bao gồm:
A. left, central, right, justify.
B. left, center, right, justify.
C. leef, center, right, justify.
D. left, center, rigth, justify.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 7. Trong thuộc tính text-indent (định dạng thụt lề dòng đầu tiên) có thể được đặt bao nhiêu loại giá trị? (ghi chú: giá trị là các chữ số).
A. 1
B. 2
C. 3
D. 4
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Ghi nhớ (SGK trang 79)
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
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.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thảo luận nhóm và đại diện nhóm trả lời phần Hoạt động 2.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời phần Hoạt động 2:
1. Các mẫu định dạng trong CSS có tính kế thừa trong mô hình cây HTML. Nếu định dạng CSS áp dụng cho một phần tử HTML nào đó, thì mặc định việc này được kế thừa cho tất cả các phần tử con, cháu.
2. Nếu trong định dạng CSS có nhiều định dạng khác nhau cùng áp dụng cho 1 phần tử thì trình duyệt sẽ chọn định dạng cuối cùng trong danh sách.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thảo luận nhóm, tìm ra những nội dung cần nhớ của phần 2a, 2b, 2c (SGK trang 79-81).
Đại diện nhóm tóm lại những nội dung cần nhớ của phần 2a, 2b, 2c.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu hỏi 1 (trang 81): Giả sử có mẫu định dạng sau:
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?
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời câu hỏi 1 (trang 81)
Sai. Toàn bộ văn bản của trang web mặc định sẽ kế thừa từ <body>, và do đó sẽ có phông mặc định sans-serif là phông không chân.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu hỏi 2 (trang 81): 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.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời câu hỏi 2 (trang 81)
- Mẫu định dạng:
h1 {text-align: center !important;} sẽ được áp dụng cho các phần tử <h1>
- Với thẻ p, các mẫu định dạng:
body {font-family: sans-serif;} sẽ được áp dụng.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Trả lời các câu hỏi trắc nghiệm sau đây để củng cố kiến thức phần 2.
Câu 8. Quan sát đoạn code bên dưới:
Cho biết kết quả hiển thị trên trình duyệt nào sau đây là đúng?
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
D.
A.
B.
C.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 9. Quan sát đoạn code bên dưới:
Cho biết kết quả hiển thị trên trình duyệt nào sau đây là đúng?
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
D.
A.
B.
C.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Câu 10. Giả sử có mẫu định dạng như sau:
Mẫu nào sẽ áp dụng cho h1, mẫu nào sẽ áp dụng cho thẻ p?
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
A. Mẫu ở dòng 5 áp dụng cho h1, mẫu ở dòng 3 áp dụng cho thẻ p.
B. Mẫu ở dòng 6 áp dụng cho h1, mẫu ở dòng 3 áp dụng cho thẻ p.
C. Mẫu ở dòng 7 áp dụng cho h1 và thẻ p.
D. Mẫu ở dòng 5 áp dụng cho h1, mẫu ở dòng 7 áp dụng cho thẻ p.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Ghi nhớ (SGK trang 74)
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Các nhóm thực hành theo SGK trang 81, 82
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Luyện tập 1 (trang 82): Mỗi phông chữ sau đây thuộc loại nào?
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời Luyện tập 1 (trang 82)
a) Phông có chân. Serif.
b) Phông khoảng cách đều nhau. Monospace.
c) Phông không chân. Sans-serif.
d) Phông kiểu chữ viết tay. Cursive.
e) Phông không chân. Sans-serif.
f) Phông trừu tượng. Fantasy.
g) Phông khoảng cách đều nhau. Monospace.
h) Phông khoảng cách đều nhau. Monospace.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Luyện tập 2 (trang 82): 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:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời Luyện tập 2 (trang 82)
Các thuộc tính CSS liên quan đến định dạng đoạn văn bản trên là:
- Dòng đầu tiên sử dụng các định dạng: font-size, color.
- Dòng thứ hai sử dụng các định dạng: text-align, color.
- Hai dòng cuối sử dụng các định dạng: font-family, font-style.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
1. Định dạng văn bản bằng CSS� a) CSS định dạng phông chữ� b) CSS định dạng màu chữ� c) CSS định dạng dòng văn bản�2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS� a) Tính kế thừa của CSS� b) Thứ tự ưu tiên khi áp dụng mẫu CSS� c) Sử dụng kí hiệu * và !important�3. Thực hành
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
1. Làm phần VẬN DỤNG (SGK trang 82)
2. Xem trước Bài 15. Tạo màu cho chữ và nền (SGK trang 83)
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Các em làm trắc nghiệm Online để củng cố bài.
1. Đăng nhập vào trang thaycai.net
2. Nháy chọn Tin học 12
3. Nháy chuột vào Trắc nghiệm tin học 12 - Kết nối tri thức
4. Nháy chuột vào Bài 14. Định dạng văn bản.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang