Trắc Nghiệm Tin Học 12 Chân Trời Sáng Tạo Tin Học Ứng Dụng Bài F7 là bộ đề ôn tập kiến thức khởi đầu một phần học mới trong môn Tin học lớp 12, bám sát nội dung sách giáo khoa Chân Trời Sáng Tạo. Đề do cô Lê Thuỳ Linh – giáo viên môn Tin học tại Trường THPT Kim Liên biên soạn năm học 2024–2025. Đây là bài học quan trọng thuộc “Chủ đề F. Giải quyết vấn đề với sự trợ giúp của máy tính”, với nội dung chính của “Bài F7. Giới thiệu CSS” tập trung vào khái niệm CSS, vai trò của CSS trong việc định dạng và trình bày trang web, cũng như các cách nhúng CSS vào tài liệu HTML. Bộ câu hỏi Tin học 12 CTST Tin học ứng dụng này là tài liệu hữu ích giúp học sinh nắm vững nền tảng thiết kế giao diện web.
Hệ thống Trắc nghiệm Tin học 12 trên nền tảng detracnghiem.edu.vn được thiết kế để mang lại trải nghiệm học tập hiện đại và hiệu quả. Với kho câu hỏi phong phú, bao quát các quy tắc cơ bản của CSS và cách áp dụng chúng, học sinh có thể thực hành không giới hạn để củng cố kiến thức. Mỗi câu hỏi đều đi kèm đáp án và lời giải thích chi tiết, giúp các em không chỉ biết kết quả mà còn hiểu sâu sắc về cách thức hoạt động của các thuộc tính định dạng. Biểu đồ phân tích tiến độ học tập cá nhân là tính năng nổi bật, giúp học sinh nhận diện điểm mạnh, điểm yếu để xây dựng chiến lược ôn tập khoa học. Đây là công cụ hữu ích giúp học sinh tự tin chinh phục các bài Luyện thi trắc nghiệm lớp 12.
Trắc Nghiệm Tin Học 12 Chân Trời Sáng Tạo Tin Học Ứng Dụng
Chủ đề F. Giải quyết vấn đề với sự trợ giúp của máy tính
Bài F7. Giới thiệu CSS
Câu 1: CSS (Cascading Style Sheets) được định nghĩa là một ngôn ngữ có vai trò chính là gì trong việc xây dựng trang web?
A. Ngôn ngữ lập trình để tạo ra các tương tác động trên trang web.
B. Ngôn ngữ đánh dấu để xác định cấu trúc và nội dung của trang web.
C. Ngôn ngữ định kiểu để mô tả cách hiển thị các phần tử HTML.
D. Ngôn ngữ truy vấn để tương tác với cơ sở dữ liệu của trang web.
Câu 2: Một trong những lợi ích chính của việc sử dụng CSS là “Linh hoạt về bố cục”. Điều này có ý nghĩa gì?
A. Giúp trang web có thể hiển thị giống hệt nhau trên mọi trình duyệt.
B. Giúp trang web thay đổi bố cục tương thích với các kích thước màn hình.
C. Giúp trang web có thể thay đổi nội dung một cách tự động.
D. Giúp trang web có thể tải nhanh hơn và hiệu suất cao hơn.
Câu 3: Lợi ích “Nhất quán về hình thức” của CSS được thể hiện như thế nào?
A. Tất cả các trang web trên internet đều có giao diện giống nhau.
B. Tất cả các phần tử HTML trong một trang web đều có cùng một kiểu.
C. Có thể áp dụng cùng một kiểu cho nhiều phần tử hoặc nhiều trang.
D. Nội dung và hình thức của trang web luôn được giữ nguyên.
Câu 4: Việc CSS giúp “Dễ bảo trì và nâng cấp” có nghĩa là gì?
A. Người dùng có thể dễ dàng thay đổi nội dung của trang web.
B. Trang web sẽ tự động cập nhật lên các phiên bản mới nhất.
C. Các lỗi trong mã HTML sẽ được CSS tự động sửa chữa.
D. Có thể thay đổi hình thức của trang web mà không ảnh hưởng nội dung.
Câu 5: Lợi ích “Có thể tái sử dụng” của CSS được thể hiện qua việc nào?
A. Một tệp CSS có thể được sử dụng cho nhiều trang web khác nhau.
B. Một thuộc tính CSS có thể được áp dụng cho nhiều phần tử.
C. Một lớp CSS có thể được định nghĩa lại nhiều lần.
D. Tất cả các phương án trên đều thể hiện tính tái sử dụng.
Câu 6: Có bao nhiêu cách chính để bổ sung mã lệnh CSS vào một trang web?
A. Một cách duy nhất.
B. Ba cách chính.
C. Bốn cách chính.
D. Hai cách chính.
Câu 7: Cách chèn CSS trực tiếp vào thẻ HTML thông qua thuộc tính `style` được gọi là gì?
A. External CSS.
B. Internal CSS.
C. Inline CSS.
D. Embedded CSS.
Câu 8: Cách chèn CSS bằng cách đặt mã lệnh trong cặp thẻ `<style>` bên trong phần `<head>` được gọi là gì?
A. External CSS.
B. Inline CSS.
C. Linked CSS.
D. Internal CSS.
Câu 9: Cách chèn CSS bằng cách tạo một tệp `.css` riêng và liên kết vào trang web bằng thẻ `<link>` được gọi là gì?
A. External CSS.
B. Internal CSS.
C. Inline CSS.
D. Embedded CSS.
Câu 10: Thẻ `<link>` được sử dụng để liên kết đến một tệp CSS bên ngoài cần được đặt ở đâu trong cấu trúc tệp HTML?
A. Bên trong thẻ `<body>`.
B. Ngay sau thẻ `<html>`.
C. Bên trong thẻ `<head>`.
D. Ở cuối cùng của tệp HTML.
Câu 11: Ưu điểm của việc sử dụng tệp CSS bên ngoài (External CSS) là gì?
A. Giúp mã HTML trở nên ngắn gọn và dễ đọc hơn.
B. Dễ dàng quản lí và tái sử dụng kiểu cho nhiều trang.
C. Tách biệt hoàn toàn giữa nội dung và trình bày.
D. Tất cả các phương án trên đều là ưu điểm.
Câu 12: Theo em, HTML và CSS khác nhau ở điểm nào?
A. HTML dùng để định dạng, CSS dùng để tạo cấu trúc.
B. HTML tạo cấu trúc, CSS dùng để định dạng hình thức.
C. HTML là ngôn ngữ lập trình, CSS là ngôn ngữ đánh dấu.
D. HTML không thể hoạt động nếu không có CSS.
Câu 13: Em hãy mô tả các cách chèn mã lệnh CSS vào trang web.
A. Có thể chèn trực tiếp vào thẻ HTML.
B. Có thể chèn thông qua thẻ `<style>`.
C. Có thể chèn thông qua tệp `.css` bên ngoài.
D. Có thể chèn trực tiếp, dùng thẻ `<style>`, hoặc tệp ngoài.
Câu 14: Giả sử trong tệp `.css`, mã lệnh được viết là `h1 { color: red; }`, còn trong tệp `.html`, thẻ `<h1>` được viết là `<h1 style="color: blue;">`. Khi hiển thị, đề mục `h1` này sẽ có màu gì?
A. Màu xanh dương.
B. Màu đỏ.
C. Màu đen.
D. Màu tím (pha trộn).
Câu 15: Một học sinh muốn định kiểu cho tất cả các phần tử `<h1>` trong tệp `portfolio.html` có phông chữ Arial, kích thước 32pt và in đậm. Đoạn mã CSS nào sau đây là đúng?
A. `h1 { font: Arial, 32pt, bold; }`.
B. `h1 { font-family: Arial; text-size: 32pt; font: bold; }`.
C. `h1 { font-family: Arial; font-size: 32pt; font-weight: bold; }`.
D. `h1 { font-type: Arial; font-size: 32pt; text-weight: bold; }`.
Câu 16: Để làm cho các kí tự của đề mục `<h1>` giãn cách nhau 4 pixel, thuộc tính CSS nào được sử dụng?
A. `word-spacing: 4px;`.
B. `text-spacing: 4px;`.
C. `font-spacing: 4px;`.
D. `letter-spacing: 4px;`.
Câu 17: Một học sinh muốn định kiểu cho bảng “Lịch sinh hoạt hàng tuần” có chiều rộng chiếm 75% chiều rộng của trang web. Đoạn mã CSS nào sau đây là đúng (giả sử bảng có lớp là `.my-table`)?
A. `.my-table { size: 75%; }`.
B. `.my-table { width: 75%; }`.
C. `.my-table { width: 75px; }`.
D. `.my-table { table-width: 75%; }`.
Câu 18: Để định kiểu cho hàng tiêu đề của bảng có chiều cao 32 pixel và văn bản được căn giữa theo cả chiều ngang và dọc, các thuộc tính nào cần được sử dụng?
A. `height`, `text-align`, `vertical-align`.
B. `height`, `align`, `vertical-align`.
C. `size`, `text-align`, `vertical-align`.
D. `height`, `text-align`, `align-content`.
Câu 19: Để định kiểu cho các hàng chẵn trong một bảng có màu nền là `#f1f2f4`, bộ chọn nào sau đây là đúng?
A. `tr:nth-child(odd) { background-color: #f1f2f4; }`.
B. `tr:hover { background-color: #f1f2f4; }`.
C. `tr:nth-child(even) { background-color: #f1f2f4; }`.
D. `tr { background-color: #f1f2f4; }`.
Câu 20: Chèn mã lệnh CSS để định kiểu cho các mục trong mình trong trang web `portfolio.html` với màu sắc, kích thước, hiệu ứng đổ bóng và khoảng cách của các kí tự tùy ý sao cho nổi bật và đẹp mắt.
A. Sử dụng thuộc tính `color` và `font-size`.
B. Sử dụng thuộc tính `text-shadow` và `letter-spacing`.
C. Sử dụng các thuộc tính `font-family` và `font-weight`.
D. Kết hợp tất cả các thuộc tính trên một cách hài hòa.
Câu 21: Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở đồng thời thay đổi màu chữ thành màu trắng.
A. `th { background-color: blue; }`.
B. `th { background-color: blue; color: white; }`.
C. `th { color: white; }`.
D. `th { text-color: white; background: blue; }`.
Câu 22: Chèn mã lệnh CSS để định kiểu cho các mục `<li>` của các danh sách `<ul>` sao cho: Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.
A. Sử dụng thuộc tính `list-style-type` và `background-color`.
B. Sử dụng thuộc tính `border` và `border-radius`.
C. Sử dụng thuộc tính `padding` để tạo khoảng đệm.
D. Kết hợp tất cả các thuộc tính trên một cách phù hợp.
Câu 23: Theo mục tiêu của bài học, sau khi hoàn thành, học sinh cần biết được điều gì về ngôn ngữ CSS?
A. Biết được lịch sử hình thành và phát triển của CSS.
B. Biết được các phiên bản khác nhau của CSS.
C. Biết được khái niệm và các cách bổ sung CSS vào trang web.
D. Biết được các công cụ để viết mã CSS.
Câu 24: Cú pháp cơ bản của một quy tắc CSS bao gồm những thành phần nào?
A. Bộ chọn, thuộc tính và giá trị.
B. Bộ chọn và khối khai báo.
C. Thuộc tính và giá trị.
D. Tên thẻ và thuộc tính style.
Câu 25: Tại sao việc tách CSS ra một tệp riêng lại được coi là một thực hành tốt trong thiết kế web?
A. Vì nó làm cho tệp HTML trở nên dài hơn và khó đọc hơn.
B. Vì nó làm tăng số lượng tệp cần quản lý trong dự án.
C. Vì nó làm giảm tốc độ tải của trang web một cách đáng kể.
D. Vì nó giúp mã nguồn sạch hơn, dễ quản lý và tái sử dụng.
Câu 26: Một học sinh muốn đặt phông chữ cho toàn bộ trang web là “Times New Roman”. Em nên áp dụng kiểu này cho bộ chọn nào?
A. `*`.
B. `body`.
C. `html`.
D. `p`.
Câu 27: Để tạo một hiệu ứng đổ bóng cho một tiêu đề `<h1>` với độ lệch ngang 2px, độ lệch dọc 2px, độ mờ 5px và màu đen, đoạn mã nào sau đây là đúng?
A. `shadow: 2px 2px 5px black;`.
B. `text-effect: 2px 2px 5px black;`.
C. `text-shadow: 2px 2px 5px black;`.
D. `text-shadow: 2px 2px 5px black;`.
Câu 28: Sự khác biệt chính giữa Inline CSS và Internal CSS là gì?
A. Inline CSS được viết trong tệp riêng, Internal CSS viết trong thẻ `<head>`.
B. Inline CSS áp dụng cho toàn bộ trang, Internal CSS áp dụng cho một thẻ.
C. Không có sự khác biệt nào giữa hai cách viết này.
D. Inline CSS viết trong thẻ, Internal CSS viết trong `<head>`.
Câu 29: Nếu một phần tử HTML được định kiểu bởi cả ba cách (Inline, Internal, External), quy tắc nào sẽ được ưu tiên áp dụng?
A. Quy tắc trong tệp External CSS.
B. Quy tắc trong thuộc tính `style` (Inline CSS).
C. Quy tắc trong thẻ `<style>` (Internal CSS).
D. Quy tắc cuối cùng được trình duyệt đọc.
Câu 30: Để định kiểu cho tất cả các đoạn văn bản (`<p>`) có màu chữ là xám, bộ chọn nào sau đây là đúng?
A. `.p { color: grey; }`.
B. `#p { color: grey; }`.
C. `p { color: grey; }`.
D. `* { color: grey; }`.
Câu 31: Một nhà thiết kế muốn tất cả các liên kết (`<a>`) khi được di chuột qua sẽ có màu đỏ. Bộ chọn nào sau đây là đúng?
A. `a:link { color: red; }`.
B. `a:visited { color: red; }`.
C. `a:active { color: red; }`.
D. `a:hover { color: red; }`.
Câu 32: Thuộc tính `text-transform: capitalize;` sẽ làm cho văn bản hiển thị như thế nào?
A. Viết hoa chữ cái đầu tiên của mỗi từ.
B. Chuyển toàn bộ thành chữ in hoa.
C. Chuyển toàn bộ thành chữ thường.
D. Giữ nguyên định dạng của văn bản.
Câu 33: Để tạo một đường viền nét đứt có màu xanh lá cây cho một `<div>`, đoạn mã nào sau đây là đúng?
A. `border: dashed green;`.
B. `border-style: dashed; border-color: green;`.
C. `border-type: dashed; border-color: green;`.
D. `border-style: dashed; border-color: green;`.
Câu 34: Lợi ích của việc sử dụng các lớp (class) trong CSS là gì?
A. Giúp định danh duy nhất cho một phần tử.
B. Giúp áp dụng kiểu cho tất cả các phần tử.
C. Giúp liên kết đến các tệp JavaScript.
D. Giúp áp dụng cùng một kiểu cho nhiều phần tử.
Câu 35: Để tạo một khoảng đệm 10px ở phía trên và dưới, 20px ở phía trái và phải cho một phần tử, cách viết nào sau đây là đúng?
A. `padding: 10px 20px 10px 20px;`.
B. `padding: 10px 20px;`.
C. `padding: 20px 10px;`.
D. `padding-top-bottom: 10px; padding-left-right: 20px;`.
Câu 36: Một học sinh muốn thay đổi biểu tượng đầu dòng của một danh sách `<ul>` thành hình vuông. Thuộc tính nào cần được sử dụng?
A. `list-style-image: square;`.
B. `list-marker: square;`.
C. `list-style-type: square;`.
D. `list-icon: square;`.
Câu 37: Trong Bảng 2, thuộc tính `vertical-align` với giá trị `middle` có tác dụng gì?
A. Căn nội dung lên phía trên của phần tử.
B. Căn nội dung xuống phía dưới của phần tử.
C. Căn nội dung theo đường cơ sở của văn bản.
D. Căn nội dung vào chính giữa của phần tử.
Câu 38: Khi một trang web không có CSS, nó sẽ hiển thị như thế nào?
A. Trang web sẽ hiển thị theo kiểu mặc định của trình duyệt.
B. Trang web sẽ không thể hiển thị được.
C. Trang web sẽ hiển thị văn bản thuần túy.
D. Trang web sẽ có một giao diện rất đẹp.
Câu 39: Một trong những lợi ích chính của việc tách CSS ra tệp riêng là gì?
A. Giúp tăng tốc độ tải trang lần đầu tiên.
B. Giúp giảm số lượng yêu cầu HTTP đến máy chủ.
C. Tận dụng bộ nhớ đệm của trình duyệt để tải trang nhanh hơn.
D. Giúp mã HTML trở nên phức tạp và khó đọc hơn.
Câu 40: Một nhà thiết kế muốn làm cho một bảng có các hàng chẵn và lẻ có màu nền khác nhau. Kỹ thuật này được gọi là gì?
A. Hover effect.
B. Table styling.
C. Responsive design.
D. Zebra striping.
