Bài tập luyện tập Bài F12 - Định kiểu CSS cho biểu mẫu.pdf

Content text Bài tập luyện tập Bài F12 - Định kiểu CSS cho biểu mẫu.pdf

BÀI KIỂM TRA THƯỜNG XUYÊN MÔN TIN HỌC - BÀI: ĐỊNH KIỂU CSS CHO BIỂU MẪU Phần 1: Trắc nghiệm khách quan (7 điểm) 1. Thuộc tính nào không dùng để định kiểu hộp văn bản trong CSS? (Remember) A. font-style B. width C. padding D. border Đáp án: A Giải thích: font-style không trực tiếp định kiểu hộp (Trang 2). 2. Trạng thái nào không dùng để định kiểu nút nhấn trong CSS? (Remember) A. visited B. hover C. active D. focus Đáp án: A Giải thích: visited dùng cho siêu liên kết, không phải nút (Trang 3). 3. Thành phần nào không thuộc biểu mẫu góp ý trong Nhiệm vụ? (Remember) A. B. C.

D. <button> Đáp án: A Giải thích: <img> không có trong Nhiệm vụ (Trang 3). 4. Tại sao box-sizing: border-box cải thiện bố cục biểu mẫu? (Understand) A. Gộp vùng đệm và viền vào kích thước tổng B. Tăng độ dày viền C. Tô màu nền D. Loại bỏ vùng đệm Đáp án: A Giải thích: border-box giữ kích thước cố định (Trang 1). 5. Công dụng của trạng thái checked trong hộp kiểm là gì? (Understand) A. Định kiểu khi được chọn B. Tạo viền khi nhấp giữ C. Thay đổi khi di chuột qua D. Giới hạn kích thước Đáp án: A Giải thích: checked áp dụng khi chọn (Trang 2). 6. Cách nào định kiểu <input type="text"> với viền xanh và vùng đệm 10px? (Apply) A. input[type="text"] {border: 1px solid blue; padding: 10px;} B. input[type="text"] {border: blue; padding: 10px;} C. input[type="text"] {color: blue; padding: 10px;} D. input[type="text"] {border: 1px blue; width: 10px;} Đáp án: A Giải thích: Đúng cú pháp và yêu cầu (Trang 2). 7. Thuộc tính nào định kiểu hiển thị toàn dòng cho <label>? (Remember) A. display B. box-sizing Thời gian: 45 phút - Tổng điểm: 10 A. Trắc nghiệm nhiều lựa chọn (MC) - 5 điểm Chọn đáp án đúng nhất trong các câu sau (mỗi câu 0,25 điểm): <br />C. accent-color D. outline Đáp án: A Giải thích: display: block xếp toàn dòng (Trang 1). 8. Thành phần nào không thuộc biểu mẫu đăng nhập trong Vận dụng? (Remember) A. <textarea> B. <input type="text"> C. <input type="checkbox"> D. <button> Đáp án: A Giải thích: <textarea> không có trong đăng nhập (Trang 5). 9. Tại sao accent-color định kiểu trạng thái checked của hộp kiểm? (Understand) A. Thay đổi màu khi được chọn B. Tăng kích thước hộp C. Tạo viền khi nhấp giữ D. Định vị trí hộp Đáp án: A Giải thích: accent-color tô màu khi chọn (Trang 3). 10. Công dụng của max-width trong định kiểu <form> là gì? (Understand) A. Giới hạn chiều rộng tối đa B. Tăng vùng đệm C. Tô màu nền D. Loại bỏ viền Đáp án: A Giải thích: max-width kiểm soát độ rộng (Trang 4). 11. Cách nào định kiểu <input type="radio"> với màu xanh khi checked? (Apply) A. input[type="radio"]:checked {background-color: #007bff;} B. input[type="radio"] {color: #007bff;} C. input[type="radio"]:hover {background-color: #007bff;} D. input[type="radio"]:checked {border: #007bff;} Đáp án: A Giải thích: checked đúng cú pháp (Trang 2). 12. Thuộc tính nào định kiểu trạng thái hover cho nút nhấn trong Nhiệm vụ? (Remember) A. background-color B. display C. box-sizing D. resize Đáp án: A Giải thích: background-color thay đổi màu hover (Trang 5). 13. Thành phần nào dùng để nhập ý kiến trong Nhiệm vụ? (Remember) A. <textarea> B. <input type="text"> C. <input type="radio"> D. <input type="checkbox"> Đáp án: A Giải thích: <textarea> nhập ý kiến (Trang 3). 14. Thuộc tính nào không dùng để định kiểu <textarea> trong Nhiệm vụ? (Remember) A. accent-color B. box-sizing C. border-radius D. padding Đáp án: A Giải thích: accent-color không dùng cho <textarea> (Trang 4). <br />15. Tại sao trạng thái focus tăng tính trực quan cho hộp văn bản? (Understand) A. Làm nổi bật khi người dùng nhập liệu B. Tô màu khi nhấp giữ C. Thay đổi khi di chuột qua D. Giới hạn kích thước Đáp án: A Giải thích: focus cải thiện nhận biết (Trang 2). 16. Cách nào định kiểu nút nhấn đăng nhập với màu xanh? (Apply) A. button[type="submit"] {background-color: #007bff; color: #fff;} B. button[type="submit"] {color: #007bff;} C. button[type="submit"]:hover {background-color: #007bff;} D. button[type="submit"] {border: #007bff;} Đáp án: A Giải thích: Đúng cú pháp và yêu cầu (Trang 5). 17. Sự khác biệt giữa <input type="text"> và <textarea> trong gopy.html là gì? (Analyze) A. Text là một dòng, textarea là nhiều dòng B. Cả hai giống nhau C. Text là nhiều dòng, textarea là một dòng D. Text không dùng viền Đáp án: A Giải thích: Text một dòng, textarea đa dòng (Trang 4). 18. Thuộc tính nào định kích thước tối đa cho <form> trong Nhiệm vụ? (Remember) A. max-width B. width C. padding D. margin Đáp án: A Giải thích: max-width giới hạn độ rộng (Trang 4). 19. Sự khác biệt giữa display: block và box-sizing: border-box trong <label> là gì? (Analyze) A. Display xếp toàn dòng, box-sizing tính kích thước B. Cả hai giống nhau C. Display tính kích thước, box-sizing xếp toàn dòng D. Box-sizing không dùng cho <label> Đáp án: A Giải thích: Display định hiển thị, box-sizing định kích thước (Trang 1-2). 20. Trạng thái nào không áp dụng cho hộp kiểm trong Nhiệm vụ? (Remember) A. visited B. checked C. hover D. focus Đáp án: A Giải thích: visited không dùng cho hộp kiểm (Trang 2). 1. Một nhóm học sinh thảo luận về định kiểu hộp văn bản trong CSS: a) Thuộc tính width định chiều rộng hộp văn bản. (Đúng, Remember) b) Box-sizing: border-box không gộp vùng đệm vào kích thước. (Sai, Understand) c) Display: block và box-sizing: border-box khác nhau về chức năng. (Đúng, Analyze) d) Có thể định kiểu <textarea> với nền xám và viền tròn bằng CSS. (Đúng, Create) Đáp án: a) Đ; b) S; c) Đ; d) Đ Giải thích: a) Đúng (Trang 2); b) Sai (Trang 1); c) Đúng (Trang 1-2); d) Đúng (Trang 4). B. Trắc nghiệm Đúng/Sai (TF) - 2 điểm Xác định đúng (Đ) hoặc sai (S) cho từng ý (mỗi ý 0,25 điểm, mỗi câu 1 điểm): <br />	</div>
</div>
<div class="orther " style="margin: 30px 0px;">
    <h2 class="title-doc">Related document</h2>
    <div class="grid_container">
						<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<div class="columns-md-3 columns-xs-6 item_search box-placeholder">
	        <div class="shape1 loading_item"></div>
			<div class="shape2 loading_item"></div>
			<div class="shape3 loading_item"></div>
	    </div>
				<script>
		$().ready(function(){
			setTimeout(function(){
				$.ajax({
					type:"post",
					url:"en/other.html",
					data:{title:"Bài tập luyện tập Bài F12 - Định kiểu CSS cho biểu mẫu.pdf", code: '3640HLYJY'},
					success:function(data){
						$(".orther .grid_container").html(data);
						$('.lazyload').Lazy({
							scrollDirection: 'vertical',
							effect: 'fadeIn',
							visibleOnly: true
						});
					}
				})
			},1500)
		})
		</script>
			    	</div>
</div>
<div class="form_report form_popup">
	<div class="layer"></div>
	<form action="en/report.html" method="post">
		<div class="close">x</div>
		<div class="content">
			<div class="title">Report download errors</div>
			<div class="form-group">
				<b>Report content</b>
				<label><input type="radio" checked name="valreport" class="valreport" value="Báo cáo bản quyền" >Copyright Report</label><br />
				<label><input type="radio" name="valreport" class="valreport" value="Báo cáo link lỗi" >Report error link</label><br />
				<label><input type="radio" name="valreport" class="valreport" value="0" >Other</label><br />
				<input type="text" name="valOther" class="form-control" id="valOther" placeholder="Other reason" /><br />
			</div>
			<div class="form-group">
				<b>Download file quality is faulty:</b>
				<div class="">
					<label><input type="radio" name="quality" checked value="1600" >Low</label>
					<label><input type="radio" name="quality" value="2400" >Medium</label>
					<label><input type="radio" name="quality" value="3200" >High</label>
				</div>
				<input type="hidden" name="link_drive" value="https://drive.google.com/file/d/1N8J8IPqQ4ZkB9wMceAKh97KjukjYAMir/view" />
			</div>
			<div class="form-group">
				<b>Full name:</b>
				<div class="">
					<input type="text" name="name" class="form-control" id="name" value="" placeholder="Full name" required />
				</div>
			</div>
			<div class="form-group">
				<b>Email:</b>
				<div class="">
					<input type="email" name="phone" class="form-control" value="" id="phone" required placeholder="Email" />
				</div>
			</div>
			<div class="g-recaptcha" data-sitekey="6LfJcjAqAAAAAEPXH4_FUV0h_K_kSV3oKcRslsGf"></div> 
			<div class="btn-down">
				<button type="submit" value="Send" id="btn-report" class="btn btn-lg">
					<span class="hidden-xs">Send </span> <span class="fa fa-paper-plane"></span>
				</button>
			</div>
		</div>
	</form>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8538810286594388"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-8538810286594388"
     data-ad-slot="5211285807"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="comment wraper ">
	<div class="title">Comment</div>
	<div>If you encounter an error, problem, .. or have any questions during the download process, please leave a comment below. Thank you.</div>
		<div class="fb-like" data-href="https://pdf.gdrive.vip/en/" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>
	<div class="fb-comments" data-href="https://pdf.dotool.net/vi/" data-width="100%" order_by="reverse_time" data-numposts="5"></div>
	</div>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v9.0&appId=766460423846455&autoLogAppEvents=1" nonce="3AzqXWG1"></script>
<link rel="stylesheet" href="assets/css/css_load.css?v=1.0.3" media="screen" type="text/css"/>
<script type="text/javascript">
	$(document).ready(function() {
	    	    setTimeout(function(){
	        $.ajax({
				type:"post",
				url:"en/load-drive.html",
				data: {linkDrive:"https://drive.google.com/file/d/1N8J8IPqQ4ZkB9wMceAKh97KjukjYAMir/view"},
				success:function(data){
				    $k=$.parseJSON(data);
				    //console.log(data);
				    $(".jwPage").html($k.pages);
				    $(".jwExt").html($k.ext);
				    $("#inputExt").val($k.ext);
				    $("#btn-download").prop("disabled",false);
				    $("#inputKey").val($k.key);
				    //$(".imgPage").attr('src',$k.img);
				    				}
	        })
	    },2000)
		
	    		$('#btn-download').click(function() {
			status=true;
			showOverlay();
			$.ajax({
				type:"post",
				url:"en/check-file.html",
				data: $("#search-form").serialize(),
				async : false,
				success: function(data){
					$k=$.parseJSON(data); //console.log($k);
					if($k["kq"]==0){
						$(".error").html($k["mes"]);
						$(".custom-overlay").remove();
						localStorage.setItem('urlDownload', 'en/file/3640HLYJY.html'); 
						//setTimeout(function(){location.href="en/dang-nhap.html";},1000);
						setTimeout(function(){location.href=$k["link"];},5000);
						status = false;
					}else if($k["kq"]==2){
						window.open($k["link"],'_blank');
						$(".custom-overlay").remove();
						status = false;
					}else{
						$("#timeOut").val($k.timeOut);
						$("#search-form").attr("action",$k.cdn);
						setTimeout(function (){$("#search-form").submit();},1000)
						status = false;
					}
				}
			})
			return status;
		})
		$(".valreport").click(function(){
			if($(this).val()==0){
				$("#valOther").val("");
				$("#valOther").show();
			}else{
				$("#valOther").hide();
			}
		})
		$(".btn_report").click(function(){
			$(".form_report").show();
		})
		$(".form_popup .close").click(function(){
			$(".form_popup").hide();
		})
		$(".form_popup .layer").click(function(){
			$(".form_popup").hide();
		})
	});

gtag('config', 'UA-64789231-25');
		</script>
		<script src="assets/js/jquery.lazy.min.js"></script>
		<script src="assets/js/script.js?v=1.0.3" defer></script>
		<script src="https://www.google.com/recaptcha/api.js" async defer></script>
				
	</body>
	
    <div id="fb-root"></div>

<div id="fb-customer-chat" class="fb-customerchat">
    </div>

window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v12.0'
        });
      };

(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
	<script defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v12.0&appId=872909966966753&autoLogAppEvents=1" nonce="4Ldm6vbs"></script>
	<script defer src="https://www.google.com/recaptcha/api.js"></script>
		</html>

PDF Google Drive Downloader v1.1

Title Bài tập luyện tập Bài F12 - Định kiểu CSS cho biểu mẫu.pdf ✅

Content text Bài tập luyện tập Bài F12 - Định kiểu CSS cho biểu mẫu.pdf