KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS
1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS
Mẫu định dạng CSS giúp thiết lập các thuộc tính liên quan đến kí tự (phông chữ, màu chữ) và dòng văn bản.
a) CSS định dạng phông chữ
font-family:
Dùng để chọn phông chữ. Có 5 loại chính: serif (có chân), sans-serif (không chân), monospace (đơn không gian), cursive (viết tay) và fantasy (trang trí). Nếu tên phông có dấu cách, cần đặt trong dấu nháy.
font-size:
Thiết lập cỡ chữ bằng đơn vị tuyệt đối (px, pt, cm...) hoặc tương đối (em, rem, %).
font-style:
Thiết lập kiểu chữ thường (normal) hoặc nghiêng (italic).
font-weight:
Thiết lập độ đậm của chữ bằng từ khóa (bold) hoặc số (100-900).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 1: Theo tài liệu, thuộc tính font-family trong CSS được sử dụng phổ biến để chọn phông chữ hiển thị. Nhóm phông chữ nào sau đây được phân loại là nhóm phông chữ có chân theo tiêu chuẩn của HTML và CSS?
Câu 2: Khi thiết lập độ đậm nhạt cho một đoạn văn bản trên trang web bằng CSS, người thiết kế web có thể sử dụng thuộc tính font-weight với các từ khóa mặc định hoặc các giá trị số nằm trong khoảng giới hạn nào?
Câu 3: Để thiết lập kích thước chữ (font-size) trong mã nguồn CSS, người lập trình có thể sử dụng hai nhóm đơn vị khác nhau. Những đơn vị nào dưới đây thuộc về nhóm đơn vị mang tính chất tương đối?
Câu 4: Khi khai báo thuộc tính font-family trong tệp CSS, nếu tên của phông chữ được chọn bao gồm nhiều từ và có chứa dấu cách ở giữa (ví dụ: Times New Roman), người lập trình bắt buộc phải tuân thủ quy tắc cú pháp nào?
Câu 5: Giả sử bạn muốn thiết lập cho phần tử thẻ <p> hiển thị phông chữ dạng viết tay và được in nghiêng. Đoạn mã CSS nào sau đây kết hợp đúng cả thuộc tính font-family và font-style để thỏa mãn yêu cầu trên?
b) CSS định dạng màu chữ
color:
Dùng để thiết lập màu sắc cho văn bản bằng tên màu tiếng Anh hoặc mã màu.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 6: Trong quá trình xây dựng giao diện hiển thị cho một trang web, lập trình viên sử dụng một thuộc tính CSS cơ bản để thiết lập màu sắc cho văn bản. Tên của thuộc tính dùng để thực hiện chức năng này là gì?
Câu 7: Khi áp dụng thuộc tính color trong một tệp CSS để thay đổi màu sắc của phần văn bản, người thiết kế có thể gán giá trị cho thuộc tính này bằng những phương pháp định dạng cụ thể nào?
Câu 8: Bạn được giao nhiệm vụ viết một đoạn mã CSS để định dạng tất cả các thẻ tiêu đề <h2> có hiển thị chữ màu xanh dương. Đoạn mã nào dưới đây thể hiện cú pháp khai báo giá trị màu bằng tiếng Anh đúng chuẩn?
c) CSS định dạng dòng văn bản
line-height:
Thiết lập khoảng cách giữa các đường cơ sở của các dòng (chiều cao dòng).
text-align:
Thiết lập căn lề cho văn bản: left (trái), center (giữa), right (phải), justify (đều hai bên).
text-decoration:
Trang trí văn bản bằng đường kẻ: underline (gạch chân), overline (gạch trên), line-through (gạch ngang chữ).
text-indent:
Định dạng thụt lề dòng đầu tiên của đoạn văn.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 9: Để tăng tính thẩm mĩ cho bài viết trên trang web, lập trình viên thường dùng CSS để gạch chân đoạn văn bản nhằm nhấn mạnh nội dung. Thuộc tính nào và giá trị nào được sử dụng để tạo đường gạch chân này?
Câu 10: Trong các quy tắc định dạng khoảng cách đoạn văn bản bằng CSS, thuộc tính line-height đóng vai trò vô cùng quan trọng đối với khả năng đọc của người dùng. Chức năng chính xác của thuộc tính này dùng để làm gì?
Câu 11: Bạn đang trình bày một đoạn văn bản dài và muốn căn lề cho dòng văn bản sao cho nội dung được dàn đều thẳng tắp ở cả lề trái và lề phải. Bạn cần thiết lập thuộc tính text-align với giá trị nào sau đây?
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
Định dạng áp dụng cho phần tử cha sẽ tự động áp dụng cho các phần tử con, cháu bên trong nó (trừ một số ngoại lệ hoặc khi phần tử con có định dạng riêng).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 12: CSS được thiết kế với một số nguyên tắc cơ bản, trong đó có tính kế thừa giữa các phần tử HTML lồng nhau. Các mẫu định dạng được áp dụng cho phần tử cha sẽ tự động có tác dụng lên các phần tử nào?
Câu 13: Mặc dù tính kế thừa trong CSS giúp tiết kiệm thời gian định dạng, nhưng có một số trường hợp định dạng từ phần tử cha sẽ không được tự động áp dụng xuống phần tử con. Nguyên nhân phổ biến nhất của sự ngắt quãng này là gì?
Câu 14: Giả sử bạn viết mã CSS đặt màu chữ đỏ (color: red) cho thẻ <body>. Bên trong thẻ <body> có chứa thẻ <div>, và trong thẻ <div> chứa thẻ <p>. Nếu thẻ <p> không có bất kì định dạng màu nào khác, màu chữ của thẻ <p> sẽ hiển thị thế nào?
b) Thứ tự ưu tiên khi áp dụng mẫu CSS (Cascading)
Nếu có nhiều mẫu định dạng cùng áp dụng cho một phần tử, trình duyệt sẽ ưu tiên thực hiện mẫu định dạng được viết cuối cùng trong file CSS.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 15: Nguyên tắc cascading (xếp tầng) là một đặc trưng cực kì quan trọng để giải quyết xung đột khi trình duyệt web phải đọc và xử lý nhiều tập tin mã nguồn CSS. Từ "cascading" được dùng để nhấn mạnh về quy tắc tính chất nào?
Câu 16: Khi một trình duyệt web đọc mã nguồn, nếu phát hiện có nhiều mẫu định dạng CSS khác nhau đang cùng thiết lập thuộc tính cho một phần tử HTML, thì trình duyệt sẽ tự động áp dụng quy tắc nào để lựa chọn mẫu cuối cùng?
Câu 17: Trong một tệp mã nguồn CSS, bạn viết dòng thứ nhất là h1 { color: red; } và dòng thứ hai ngay bên dưới là h1 { color: blue; }. Theo đúng quy tắc ưu tiên thứ tự (cascading), tất cả các thẻ tiêu đề <h1> trên trang web sẽ hiển thị màu gì?
c) Sử dụng kí hiệu * và !important
Kí hiệu *:
Là bộ chọn tổng quát áp dụng cho mọi phần tử, nhưng có độ ưu tiên thấp nhất.
Kí hiệu !important:
Đặt ngay sau thuộc tính để đẩy mức ưu tiên của thuộc tính đó lên cao nhất, bất kể vị trí của nó ở đâu.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 18: Trong danh sách các loại bộ chọn (selector) của ngôn ngữ CSS, kí hiệu dấu sao * là một công cụ đặc biệt. Theo tài liệu lý thuyết, kí hiệu dấu sao * này được định nghĩa là loại bộ chọn mang ý nghĩa gì?
Câu 19: Khi so sánh mức độ ưu tiên giữa các khai báo định dạng trong CSS, sự khác biệt lớn nhất về sức mạnh định dạng giữa bộ chọn tổng quát * và kí hiệu !important là gì trong quá trình trình duyệt web xử lý hiển thị?
Câu 20: Giả sử bạn có tệp CSS định dạng như sau: p { color: green !important; } nằm ở dòng trên cùng và p { color: red; } nằm ở dòng cuối cùng. Bất chấp quy tắc xếp tầng cascading thông thường, các thẻ <p> sẽ hiển thị màu gì trên trang web?