Câu hỏi tự luận Khoa học máy tính 12 kết nối Bài 16: Định dạng khung

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:

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

Trả lời:

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:

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:

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:

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:

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òn tiếp -------------------------