KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 16. ĐỊNH DẠNG KHUNG
1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN
Phần tử khối (Block-level elements):
Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng ngang của trang (hoặc phần tử chứa nó).
Phần tử nội tuyến (Inline-level elements):
Không bắt đầu dòng mới, chỉ chiếm chiều rộng vừa đủ với nội dung của nó và nằm cùng dòng với các phần tử khác.
Chuyển đổi loại phần tử bằng thuộc tính display:
- display: block; (Chuyển thành khối).
- display: inline; (Chuyển thành nội tuyến).
- display: none; (Ẩn phần tử).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 1: Trong ngôn ngữ HTML, các phần tử được phân chia thành hai loại cơ bản để trình duyệt dễ dàng quản lý việc hiển thị. Khi hiển thị trên trang web, một phần tử khối (Block-level elements) luôn có đặc điểm nổi bật nào sau đây?
Câu 2: Trái ngược với phần tử khối, phần tử nội tuyến (Inline-level elements) có cách hiển thị gọn gàng hơn. Đặc điểm không gian hiển thị của một phần tử nội tuyến là gì?
Câu 3: Khi xây dựng cấu trúc trang web, người lập trình có thể linh hoạt thay đổi đặc tính hiển thị mặc định của các phần tử. Trong CSS, thuộc tính nào được sử dụng để thực hiện việc chuyển đổi loại phần tử này?
Câu 4: Mặc định, thẻ <span> là một phần tử nội tuyến (inline), do đó nó không tự động xuống dòng. Để ép một thẻ <span> bắt đầu trên một dòng mới và có hành vi giống hệt như một thẻ <div>, người lập trình cần khai báo đoạn mã CSS nào?
Câu 5: Trong một số trường hợp thiết kế giao diện động, người lập trình cần làm cho một phần tử nào đó hoàn toàn biến mất khỏi luồng hiển thị của trang web. Để thực hiện yêu cầu này, thuộc tính display cần được gán giá trị nào?
Câu 6: Bạn đang thiết kế một thanh điều hướng ngang với các thẻ danh sách <li>. Mặc định, thẻ <li> là phần tử khối nên chúng xếp chồng lên nhau thành một cột dọc. Để chuyển chúng xếp nối tiếp nhau trên cùng một hàng ngang, bạn cần áp dụng đoạn mã CSS nào?
2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS
Mỗi phần tử HTML được bao quanh bởi một "cái hộp" hình chữ nhật gồm các lớp từ trong ra ngoài: Nội dung → Vùng đệm → Khung viền → Lề.
Các thành phần của khung (Box Model):
- Content (Nội dung): Vùng chứa văn bản hoặc hình ảnh.
- Padding (Vùng đệm): Khoảng cách từ nội dung đến đường viền khung.
- Border (Khung/Viền): Đường viền bao quanh nội dung và vùng đệm.
- Margin (Lề khung): Khoảng cách từ đường viền ra các phần tử xung quanh bên ngoài.
Các thuộc tính kích thước (Chỉ áp dụng hiệu quả cho phần tử khối):
- width: Thiết lập chiều rộng.
- height: Thiết lập chiều cao.
Các thuộc tính đường viền:
- border-color: Màu của viền.
- border-width: Độ dày của viền.
- border-style: Kiểu đường viền (solid: liền, dotted: chấm, dashed: gạch đứt...).
- border (Viết gộp): Thiết lập đồng thời độ dày, kiểu và màu.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 7: Mô hình hộp (Box Model) trong CSS quy định rằng mỗi phần tử HTML đều được bao quanh bởi một "cái hộp" hình chữ nhật. Tính từ trong ra ngoài, các lớp cấu tạo nên mô hình hộp này được sắp xếp theo thứ tự nào?
Câu 8: Trong mô hình hộp của CSS, khoảng cách an toàn được tạo ra nhằm ngăn không cho nội dung văn bản bị dính sát vào đường viền bao quanh phần tử. Khoảng cách này được thiết lập thông qua thuộc tính nào?
Câu 9: Để hai phần tử hiển thị cạnh nhau trên trang web không bị dính sát vào nhau, người ta cần tạo một khoảng cách đẩy chúng ra xa. Thuộc tính CSS nào được sử dụng để xác định khoảng cách từ đường viền ra các phần tử xung quanh bên ngoài?
Câu 10: Mặc dù CSS cung cấp hai thuộc tính width (chiều rộng) và height (chiều cao) để thiết lập kích thước cho các phần tử, nhưng hai thuộc tính này chỉ có thể áp dụng hiệu quả nhất đối với loại phần tử nào trên trang web?
Câu 11: Khi thiết kế một đường viền (border) cho phần tử HTML, lập trình viên có thể tùy chỉnh độc lập các đặc tính của nó. Trong đó, thuộc tính border-style đóng vai trò quy định tính chất gì của đường viền?
Câu 12: Để mã CSS ngắn gọn hơn, thay vì khai báo riêng lẻ từng thuộc tính cho đường viền, bạn có thể sử dụng thuộc tính viết gộp border. Đoạn mã nào sau đây là cú pháp hợp lệ để tạo ra một đường viền nét liền, màu đen, có độ dày 1 pixel?
3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS
a) Thiết lập bộ chọn là một lớp (Class Selector)
- Dùng để định dạng cho một nhóm các phần tử có cùng ý nghĩa hoặc kiểu dáng.
- Khai báo trong CSS bằng dấu chấm (.).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 13: Trong thực tế, nhiều phần tử trên trang web có chung một mục đích thiết kế (ví dụ: các nút "Gửi" và "Đăng ký" đều có màu xanh). Để định dạng chung cho một nhóm các phần tử có cùng ý nghĩa này, CSS cung cấp loại bộ chọn nào?
Câu 14: Khi viết mã nguồn CSS, mỗi loại bộ chọn đều có một ký hiệu nhận dạng riêng. Để báo cho trình duyệt biết từ khóa tiếp theo là tên của một bộ chọn lớp (class), lập trình viên phải đặt kí hiệu nào ngay phía trước tên lớp đó?
Câu 15: Bạn đã tạo một lớp CSS tên là luuy có định dạng chữ màu đỏ. Bây giờ, bạn muốn áp dụng định dạng này cho một thẻ đoạn văn <p> trong mã HTML. Cú pháp nào sau đây là đúng để thẻ <p> nhận diện và sử dụng lớp này?
b) Thiết lập bộ chọn riêng cho từng phần tử (ID Selector)
- Dùng để định dạng cho một phần tử duy nhất (mã định danh ID là độc nhất trong trang).
- Khai báo trong CSS bằng dấu thăng (#).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 16: Đôi khi trên trang web có một phần tử đóng vai trò độc nhất, không giống bất kì phần tử nào khác (ví dụ: khu vực chứa logo chính). Để thiết lập định dạng dành riêng cho một phần tử duy nhất này, ta sử dụng bộ chọn nào?
Câu 17: Tương tự như bộ chọn lớp, bộ chọn ID cũng cần có kí hiệu nhận dạng riêng trong mã CSS để tránh nhầm lẫn. Khi khai báo một bộ chọn ID, người lập trình phải bắt đầu bằng kí hiệu đặc biệt nào?
Câu 18: Giả sử bạn muốn thiết lập chiều rộng 100px cho một bức ảnh đóng vai trò logo chính của trang web. Bức ảnh này đã được gán mã định danh id="logo". Bạn sẽ viết đoạn mã CSS nào để thực hiện được yêu cầu này?
c) Thiết lập bộ chọn thuộc tính CSS
Dùng để định dạng các phần tử dựa trên thuộc tính cụ thể của thẻ HTML đó.
Lưu ý quy tắc đặt tên (cho ID và Class):
- Có phân biệt chữ hoa, chữ thường.
- Không bắt đầu bằng số.
- Không chứa dấu cách.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 19: Ngoài việc định dạng theo tên thẻ, lớp hay ID, CSS còn cho phép định dạng các phần tử dựa trên một đặc điểm cụ thể nằm bên trong thẻ HTML đó. Loại bộ chọn này được gọi bằng thuật ngữ gì?
Câu 20: Có những quy tắc nghiêm ngặt mà lập trình viên phải tuân theo khi tự đặt tên cho các ID và Class trong HTML/CSS để đảm bảo mã hoạt động đúng. Quy tắc nào sau đây là một trong những quy định bắt buộc đối với việc đặt tên?
Câu 21: Trang web của bạn có rất nhiều liên kết (thẻ <a>). Bạn muốn những liên kết nào được thiết lập để mở trong một tab mới (tức là có thuộc tính target="_blank") sẽ tự động được in đậm. Đoạn mã CSS nào sau đây sử dụng đúng bộ chọn thuộc tính kèm giá trị?