Font size
WorksheetsKiểm tra kiến thức về CSS
Total questions: 20
Worksheet time: 2hrs 40mins
Câu 1. Một trang web được xây dựng để hiển thị thông tin về trường học, sử dụng HTML và CSS để định dạng khung cho các phần tử. Một số học sinh đã đưa ra các nhận xét sau:
Phần tử khối (block element) luôn bắt đầu từ đầu hàng và chiếm toàn bộ chiều rộng của trang web.
Phần tử nội tuyến (inline element) tự động xuống dòng khi hiển thị trên trang web.
Thuộc tính display: block có thể được sử dụng để biến một phần tử nội tuyến thành phần tử khối.
Nếu một phần tử được định dạng với thuộc tính border: 2px solid black; nhưng không thay đổi giá trị display, thì nó sẽ chiếm toàn bộ chiều rộng của phần tử cha.
Câu 2. Một học sinh đang thiết kế trang web và sử dụng CSS để định dạng khung cho các phần tử. Dựa trên bài học "Định dạng khung", các bạn trong lớp đã đưa ra các nhận xét sau:
Thuộc tính border trong CSS được sử dụng để tạo viền bao quanh phần tử.
Thuộc tính margin xác định khoảng cách giữa nội dung và viền của phần tử.
Khung của một phần tử nội tuyến không hỗ trợ thuộc tính width và height nếu không thay đổi giá trị của thuộc tính display.
Nếu một phần tử <div>
có margin: 10px; và padding: 20px;, thì khoảng cách từ nội dung đến viền là 10px và từ viền đến phần tử bên ngoài là 20px.
Câu 3. Một nhóm học sinh thảo luận về cách sử dụng bộ chọn trong CSS để định dạng khung cho các phần tử. Dựa trên bài học, các em đưa ra các nhận xét sau:
Bộ chọn lớp (class selector) được khai báo bằng dấu chấm (.) trước tên lớp trong CSS.
Bộ chọn mã định danh (id selector) được khai báo bằng dấu chấm (.) trước tên id trong CSS.
Một phần tử HTML có thể được gán nhiều lớp (class), nhưng chỉ được gán một mã định danh (id) duy nhất trong trang web.
Nếu một phần tử
Một học sinh sử dụng CSS để định dạng khung và bộ chọn cho trang web giới thiệu sách. Dựa trên bài học "Định dạng khung", các bạn trong lớp đưa ra các nhận xét sau:
Thuộc tính padding xác định khoảng cách giữa nội dung và viền của phần tử.
Một phần tử nội tuyến như <span> không thể chứa các phần tử khối như
bên trong nó.
Thuộc tính display: inline sẽ khiến một phần tử khối hiển thị trên cùng một dòng với các phần tử khác mà không xuống dòng.
Nếu một phần tử <h1>
có id="title" và CSS khai báo #title { border: 2px dashed red; padding: 5px; }, thì khoảng cách từ nội dung đến viền là 2px và viền sẽ có dạng nét đứt màu đỏ.
Một học sinh thực hành định dạng khung và bộ chọn trên một trang web thử nghiệm. Dựa trên bài học, các bạn trong lớp đưa ra các nhận xét sau:
Thuộc tính display: none khiến phần tử không hiển thị trên trang web.
Bộ chọn thuộc tính trong CSS có thể chọn các phần tử dựa trên giá trị của thuộc tính, ví dụ: a[target].
Nếu một phần tử có class="note" và class="warning" cùng lúc, thì nó chỉ áp dụng định dạng từ bộ chọn .note và bỏ qua .warning.
Nếu một phần tử <p>
có CSS khai báo p { margin: 15px; border: 1px solid blue; display: block; }, thì phần tử này sẽ hiển thị trên một dòng mới và có viền xanh bao quanh với khoảng cách bên ngoài là 15px.
Trong CSS, các bộ chọn lớp giả (pseudo-class) và phần tử giả (pseudo-element) được sử dụng để tăng tính tương tác và định dạng đặc biệt cho trang web. Hãy xác định các phát biểu sau là Đúng hay Sai:
Bộ chọn lớp giả (pseudo-class) dùng để định dạng các trạng thái đặc biệt của phần tử HTML, như :hover, :focus.
Cú pháp khai báo của bộ chọn phần tử giả (pseudo-element) là tên_phần_tử:tên_phần_tử_giả { thuộc_tính: giá_trị; }.
Bộ chọn :hover giúp thay đổi trạng thái của phần tử khi người dùng di chuột qua phần tử đó.
Nếu sử dụng đoạn mã CSS: p::first-letter { font-size: 2em; }, ký tự đầu tiên của mỗi đoạn văn sẽ có kích thước lớn gấp đôi bình thường.
Khi thiết kế trang web, việc xác định thứ tự ưu tiên của các mẫu định dạng CSS rất quan trọng để đảm bảo hiển thị đúng ý muốn. Hãy xác định các phát biểu sau là Đúng hay Sai:
Trọng số của bộ chọn ID (#id) trong CSS được tính là 100.
Bộ chọn * có trọng số cao nhất trong CSS và áp dụng cho tất cả các phần tử.
Nếu hai mẫu định dạng có trọng số bằng nhau, mẫu được viết cuối cùng sẽ được áp dụng.
Xét đoạn mã CSS: #menu { color: blue; } .item { color: red; }, nếu một phần tử có cả id="menu" và class="item", màu chữ sẽ là xanh dương vì ID có trọng số cao hơn.
Trong bài học về CSS, bạn đã được tìm hiểu về các bộ chọn như :link, ::before, và cách chúng giúp định dạng trang web một cách linh hoạt hơn. Hãy xác định các phát biểu sau là Đúng hay Sai:
Bộ chọn lớp giả :link dùng để định dạng liên kết chưa được truy cập.
Bộ chọn phần tử giả ::before dùng để định dạng trạng thái của phần tử khi người dùng tương tác.
Bộ chọn ::before và ::after thường được dùng để thêm nội dung trước hoặc sau phần tử HTML mà không cần thay đổi mã HTML.
Để thêm một biểu tượng trước mỗi đoạn văn, bạn có thể dùng: p::before { content: "★ "; }.
Khi làm việc với CSS, bạn cần hiểu cách tính trọng số của các bộ chọn để dự đoán kết quả hiển thị khi có nhiều mẫu định dạng áp dụng cho cùng một phần tử. Hãy xác định các phát biểu sau là Đúng hay Sai:
Trọng số của bộ chọn class (.class) trong CSS được tính là 10.
Bộ chọn !important có trọng số thấp nhất trong CSS nên ít được sử dụng.
Trọng số của bộ chọn .header a span là 12, vì có 1 class (10) và 2 phần tử (2).
Xét đoạn mã CSS: div { color: blue; } div { color: red; }, nếu một phần tử
<div> được áp dụng, màu chữ sẽ là xanh dương vì mẫu đầu tiên được ưu tiên.
Trong một dự án thiết kế trang web, bạn cần sử dụng các bộ chọn lớp giả và phần tử giả để tạo hiệu ứng tương tác và định dạng đặc biệt, đồng thời chú ý đến thứ tự ưu tiên của CSS. Hãy xác định các phát biểu sau là Đúng hay Sai:
Bộ chọn lớp giả :active dùng để định dạng phần tử khi người dùng nhấn vào phần tử đó.
Bộ chọn phần tử giả ::first-letter dùng để định dạng dòng đầu tiên của phần tử HTML.
Sử dụng pseudo-class như :hover giúp trang web sinh động hơn bằng cách thay đổi trạng thái khi người dùng di chuột qua phần tử.
Xét đoạn mã CSS: a { color: black; } a.special { color: yellow; }, nếu một phần tử <a class="special"> được áp dụng, màu chữ sẽ là đen vì mẫu a được viết trước.
Trong bài học "Bài 18. Thực hành tổng hợp thiết kế trang web", việc thiết kế một website giới thiệu các câu lạc bộ ngoại khóa yêu cầu học sinh ôn tập và áp dụng các kiến thức HTML và CSS đã học. Hãy xác định các phát biểu sau là Đúng hay Sai:
Thẻ được sử dụng để liên kết tệp CSS với tệp HTML.
Theo bài học, website cần có tối thiểu 1 trang chủ và 3 trang con.
Việc sử dụng một tệp CSS chung giúp đảm bảo tính thống nhất về định dạng giữa các trang trong website.
Để tạo liên kết từ trang chủ (index.html) đến trang con (thethao.html), có thể sử dụng thẻ <link href="thethao.html">Thể thao</link>.
Bài học "Bài 18. Thực hành tổng hợp thiết kế trang web" yêu cầu học sinh làm việc nhóm để xây dựng website, từ việc phác thảo bố cục đến viết mã HTML và CSS. Hãy xác định các phát biểu sau là Đúng hay Sai:
Lớp .block_3 trong tệp CSS được dùng để định dạng các ô trong khối slogan trên trang chủ.
Tiêu chí đánh giá sản phẩm bao gồm phần "Hình thức", trong đó yêu cầu bố cục phải khoa học, đẹp mắt.
Phần nội dung của trang chủ cần chia thành 2 hàng, mỗi hàng 3 cột để chứa thông tin các câu lạc bộ.
Để định dạng mỗi cột trong phần nội dung trang chủ thành 2 cột bằng nhau, có thể dùng lớp .block_2 { width: 50%; float: left; }.
Trong quá trình thực hành "Bài 18. Thực hành tổng hợp thiết kế trang web", học sinh cần tạo các tệp HTML và CSS, đồng thời đảm bảo các trang có liên kết và định dạng phù hợp. Hãy xác định các phát biểu sau là Đúng hay Sai:
Tệp style.css chứa các lớp như .banner, .row, .block_3 để định dạng các thành phần của trang web.
Trang con như thethao.html và nghethuat.html phải có phần đầu trang và chân trang giống trang chủ.
Việc sao chép phần đầu trang từ index.html sang các trang con giúp tăng số lượng mã HTML để dễ quản lý.
Để thêm hiệu ứng đổi màu nền khi di chuột qua lớp .block_2, có thể dùng đoạn mã .block_2:hover { background: red; }.
. Bài học "Bài 18. Thực hành tổng hợp thiết kế trang web" khuyến khích học sinh tự đánh giá sản phẩm và đề xuất cải thiện để hoàn thiện website của nhóm mình. Hãy xác định các phát biểu sau là Đúng hay Sai:
Tiêu chí đánh giá sản phẩm yêu cầu trang chủ phải có logo, banner, slogan và nội dung giới thiệu sơ bộ về các câu lạc bộ.
Trong phần chân trang của trang chủ, cần có thông tin liên hệ và liên kết tới các trang mạng xã hội.
Việc tự đánh giá sản phẩm giúp học sinh nhận ra các điểm cần cải thiện, như bổ sung hiệu ứng hoặc thay đổi màu sắc
Nếu muốn bổ sung trang đăng ký (dang_ki.html), cần tạo liên kết từ trang chủ đến trang này bằng thẻ <link>.
Sau khi hoàn thiện website, học sinh được yêu cầu trình bày sản phẩm và nhận phản hồi từ giáo viên và bạn bè để rút kinh nghiệm. Hãy xác định các phát biểu sau là Đúng hay Sai:
Theo bài học, mỗi nhóm cần tạo 3 tệp HTML: index.html, thethao.html, và nghethuat.html.
Lớp .footer trong tệp CSS được dùng để định dạng phần chân trang của website.
Việc chia phần nội dung thành các lớp như .row_content và .block_2 giúp tái sử dụng định dạng và đảm bảo bố cục cân đối.
Để hiển thị 3 ô ngang trong khối slogan, có thể dùng lớp .block_3 { width: 25%; float: left; } để mỗi ô chiếm 1/3 chiều rộng trang.
Trong bài học "Thực hành kết nối các thiết bị số", học sinh được giới thiệu về thiết bị số và các phương thức kết nối như kết nối có dây (dùng cáp HDMI), không dây (Bluetooth), và qua Internet (thiết bị nhà thông minh). Một tình huống thực hành yêu cầu kết nối máy tính với máy chiếu để trình chiếu bài học. Hãy xác định tính đúng/sai của các phát biểu sau:
a. Thiết bị số là thiết bị lưu trữ, truyền và xử lý dữ liệu số.
b. Cáp HDMI là một loại cáp dùng trong kết nối có dây.
c. Kết nối Bluetooth được sử dụng để điều khiển thiết bị nhà thông minh từ xa qua Internet.
d. Khi kết nối máy tính với máy chiếu bằng cáp HDMI không hiển thị, cần kiểm tra chế độ hiển thị trước khi thay cáp mới.
Bài học yêu cầu học sinh thực hành kết nối máy tính với điện thoại qua Bluetooth để truyền tệp tin, như ảnh hoặc tài liệu. Quá trình này bao gồm bật Bluetooth, ghép đôi, và truyền dữ liệu, nhưng đôi khi gặp lỗi nếu thao tác không chính xác. Hãy xác định tính đúng/sai của các phát biểu sau:
Chuột là một ví dụ về thiết bị số đã được kết nối với máy tính trong lớp dưới.
. Kết nối không dây qua Bluetooth là một trong ba loại kết nối được đề cập trong bài học.
. Kết nối qua Internet giúp truyền tệp tin giữa máy tính và điện thoại trong phạm vi gần
Nếu truyền tệp qua Bluetooth không thành công, học sinh có thể kiểm tra xem hai thiết bị đã ghép đôi chưa.
Trong bài học, học sinh thực hành kết nối điện thoại với thiết bị nhà thông minh qua Internet để điều khiển từ xa, chẳng hạn bật/tắt đèn thông minh. Ngoài ra, “Nhiệm vụ 4, Bài 22. Thực hành kết nối các thiết bị số” yêu cầu tìm hiểu thêm về các thiết bị số như vòng đeo tay thông minh. Một tình huống thực tế xảy ra khi đèn không phản hồi sau khi nhấn lệnh trên ứng dụng. Em hãy xác định tính Đúng/Sai của các phát biểu sau:
Vòng đeo tay thông minh là một thiết bị số được đề cập trong Nhiệm vụ 4.
Kết nối qua Internet là một loại kết nối được dùng trong bài học.
Cáp VGA được dùng để kết nối máy tính với điện thoại nhằm truyền dữ liệu.
. Khi điều khiển thiết bị nhà thông minh không phản hồi, học sinh có thể đặt điện thoại gần thiết bị để cải thiện kết nối.
EBài học giới thiệu các thiết bị số thông dụng từ lớp dưới (như máy in) và thiết bị nhà thông minh trong thời đại 4.0. Học sinh cũng thực hành đồng bộ dữ liệu từ vòng đeo tay thông minh với điện thoại trong hoạt động vận dụng, nhưng đôi khi dữ liệu không cập nhật đúng. Em hãy xác định tính Đúng/Sai của các phát biểu sau:
Máy in là một thiết bị số thông dụng đã được kết nối với máy tính
Thiết bị nhà thông minh là ví dụ về thiết bị IoT trong bài học.
Kết nối không dây qua Bluetooth cho phép điều khiển thiết bị từ xa qua Internet.
Để đồng bộ dữ liệu từ vòng đeo tay thông minh với điện thoại, học sinh cần kiểm tra kết nối Bluetooth hoặc ứng dụng.
. Trong bài học “Kết nối các thiết bị số”, học sinh thực hành kết nối không dây giữa máy tính và TV bằng WiFi trong hoạt động vận dụng, bên cạnh các kết nối khác như cáp VGA và Bluetooth. Một tình huống xảy ra khi nội dung từ máy tính không hiển thị trên TV dù đã kết nối. Em hãy xác định tính đúng/sai của các phát biểu sau:
Kết nối có dây sử dụng cáp tín hiệu như VGA hoặc HDMI.
Điện thoại thông minh là một thiết bị số được dùng trong Nhiệm vụ 2 và 3.
Kết nối qua Internet luôn nhanh hơn kết nối Bluetooth vì không có độ trễ.
Khi kết nối máy tính với TV qua WiFi không thành công, học sinh có thể kiểm tra cài đặt mạng để khắc phục.
