BÀI 16: ĐỊNH DẠNG KHUNG

1. NHẬN BIẾT (4 CÂU)

Câu 1: Thế nào là phần tử khối và phần tử nội tuyến trong HTML?

Trả lời:

Phần tử khối: Là các phần tử bắt đầu từ đầu dòng và kéo dài suốt chiều rộng trang web.

Phần tử nội tuyến: Là các phần tử nhúng bên trong một phần tử khác, không bắt đầu từ dòng mới.

Câu 2: Thuộc tính display dùng để làm gì trong CSS?

Trả lời:

Thuộc tính display dùng để thay đổi loại của phần tử HTML. Các giá trị phổ biến gồm block, inline, và none.

Câu 3: Bộ chọn lớp (class) trong CSS được định nghĩa như thế nào?

Trả lời:

Bộ chọn lớp được định nghĩa bằng dấu . trước tên lớp, ví dụ: .classname {thuộc tính: giá trị;}.

Câu 4: Kể tên ba loại bộ chọn trong CSS được đề cập trong bài.

Trả lời:

Bộ chọn lớp (class).

Bộ chọn id.

Bộ chọn thuộc tính.

2. THÔNG HIỂU (4 CÂU)

Câu 1: Tại sao thuộc tính display: none; được sử dụng, và tác dụng của nó là gì?

Trả lời:

Thuộc tính display: none; được sử dụng để ẩn phần tử HTML trên trang web. Phần tử bị ẩn vẫn tồn tại trong mã HTML nhưng không hiển thị.

Câu 2:Phân biệt cách sử dụng bộ chọn class và id trong CSS.

Trả lời:

Bộ chọn class: Áp dụng cho nhiều phần tử HTML có cùng lớp. Được định nghĩa bằng dấu . trước tên lớp.

Bộ chọn id: Áp dụng cho duy nhất một phần tử HTML có mã định danh cụ thể. Được định nghĩa bằng dấu # trước tên id.

Câu 3: Vì sao không thể thiết lập chiều cao và chiều rộng khung cho các phần tử nội tuyến?

Trả lời:

Do bản chất của phần tử nội tuyến chỉ chiếm không gian cần thiết cho nội dung của nó, không có khối riêng biệt nên không thể thiết lập chiều cao và chiều rộng.

Câu 4: Bộ chọn thuộc tính trong CSS được sử dụng trong trường hợp nào?

Trả lời:

Bộ chọn thuộc tính được sử dụng để áp dụng định dạng CSS cho các phần tử HTML có thuộc tính cụ thể, ví dụ: [attribute] {thuộc tính: giá trị;}.

3. VẬN DỤNG (3 CÂU)

Câu 1: Viết đoạn CSS để định dạng tất cả các phần tử <p> có id là intro với màu chữ đỏ và font-size 20px.

Trả lời:

p#intro {

color: red;

font-size: 20px;

}

Câu 2: Làm thế nào để một phần tử có thể thuộc nhiều lớp CSS? Viết ví dụ minh hoạ.

Trả lời:

Một phần tử có thể thuộc nhiều lớp bằng cách khai báo nhiều tên lớp cách nhau bởi dấu cách.

Ví dụ HTML:

<div class="class1 class2"></div>

Câu 3: Viết đoạn mã CSS để thiết lập khung viền (border) cho một bảng với màu xanh, độ rộng 2px, và kiểu đường nét đứt.

Trả lời:

table {

border: 2px dashed blue;

}

4. VẬN DỤNG CAO (2 CÂU)

Câu 1: Viết đoạn mã HTML và CSS để tạo bảng hiển thị 3 màu cơ bản: đỏ, xanh lá, xanh dương (mỗi màu là một dòng), với màu nền của mỗi ô tương ứng với tên màu.

Trả lời:

HTLM

<table>

<tr>

<th>Màu</th>

<th>Màu nền</th>

</tr>

<tr>

<td>Đỏ</td>

<td class="red"></td>

</tr>

<tr>

<td>Xanh lá</td>

<td class="green"></td>

</tr>

<tr>

<td>Xanh dương</td>

<td class="blue"></td>

</tr>

</table>

CSS:

table {

border-collapse: collapse;

}

td, th {

border: 1px solid black;

padding: 10px;

}

.red {

background-color: red;

}

.green {

background-color: green;

}

.blue {

background-color: blue;

}

Câu 2: Giải thích tại sao các thuộc tính định dạng khung (border, margin, padding) không có tính kế thừa trong CSS.

Trả lời:

Các thuộc tính này không có tính kế thừa vì chúng mô tả bố cục (layout) và không phải là thuộc tính trực tiếp của nội dung, trong khi các thuộc tính như color và font ảnh hưởng trực tiếp đến nội dung hiển thị nên có tính kế thừa.