Font size
Worksheetsแบบทดสอบก่อนเรียน เรื่อง การตกแต่งเว็บไซต์ด้วย CSS
Total questions: 10
Worksheet time: 34mins
ข้อใดต่อไปนี้กล่าวถึง CSS ได้ถูกต้องที่สุด
CSS คือ คุณลักษณะที่ใช้ตกแต่งเอกสาร HTML ในลักษณะต่าง ๆ เช่น สี พื้นหลัง เส้นขอบ ขนาด โครงร่าง หรือตัวอักษร
CSS ประกอบด้วย Selector และ Property
CSS เป็นคำสั่งที่ใช้จัดรูปแบบเอกสารเว็บเพจในลักษณะต่าง ๆ เช่น สี พื้นหลัง เส้นขอบ ขนาด โครงร่าง หรือตัวอักษร
CSS ถูกพัฒนามาตั้งแต่ปี 1998 ปัจจุบันคือเวอร์ชันที่ 3
จากภาพไวยกรณ์ของ CSS จงเลือกคำตอบที่ตรงกับตัวเลข 1 2 และ 3 ตามลำดับ
1 คือ Selector
2 คือ Value
3 คือ Property
1 คือ Property
2 คือ Value
3 คือ Selector
1 คือ Property
2 คือ Selector
3 คือ Value
1 คือ Selector
2 คือ Property
3 คือ Value
หากต้องการกำหนดให้ <div> ในหน้าเอกสาร HTML มีข้อความสีเขียว จะต้องเขียนคำสั่ง CSS อย่างไร
div{
color: green;
}
div{
background-color: green;
}
div{
green: color;
}
div{
font: green;
}
จากโครงสร้าง CSS ต่อไปนี้
p{
_________: right;
}
หากต้องการกำหนดให้ข้อความของ <p> ในหน้าเอกสาร HTML อยู่ชิดขวาของหน้าเพจ นักเรียนควรเติม Property ของ CSS ใดในช่องว่าง _________
(a)
จากอิลิเมนต์ HTML ต่อไปนี้
<p class="red-text">การตกแต่งเว็บไซต์ด้วย CSS</p>
<p class="green-text">การตกแต่งเว็บไซต์ด้วย CSS</p>
<p class="blue-text">การตกแต่งเว็บไซต์ด้วย CSS</p>
หากต้องการกำหนดให้ข้อความใน <p> ที่มี class="blue-text" มีสีน้ำเงินและจัดตำแหน่งให้อยู่กึ่งกลาง โดยใช้ CSS Class selector จะเขียน CSS ได้อย่างไร
.bluetext p{
color: blue;
text-align: center;
}
.blue-text{
text-color: blue;
align: center;
}
p.blue-text{
color: blue;
text-align: center;
}
p.blue-text{
text-color: blue;
align: center;
}
จากอิลิเมนต์ HTML ต่อไปนี้
<div id="green">CSS class selector</div>
หากต้องการกำหนดให้ข้อความใน <div> มีสีเขียวและจัดตำแหน่งให้อยู่ชิดซ้าย จะเขียน CSS id selector ได้อย่างไร
.green{
text-color: green;
text-align: left;
}
#green{
color: green;
text-align: left;
}
.green{
text-color: green;
align: left;
}
#green{
text-color: green;
text-align: left;
}
ภาณุต้องการกำหนดให้ <div> มีพื้นหลังสีเหลือง นักเรียนลองช่วยภาณุเติมคำสั่ง CSS ต่อไปนี้ให้สมบูรณ์
div{
__1__: yellow;
}
(a)
div{
__1)__: 500px;
height: __2)__px;
__3)__: white;
background-color: __4)__;
}
จาก CSS selector ข้างต้น หากต้องการกำหนดให้ <div> มีข้อความสีขาว มีความกว้าง 500 พิกเซล ความสูง 800 พิกเซล และมีสีพิ้นหลังเป็นสีมะเขือเทศ ข้อใดคือคำตอบที่ถูกต้องที่สุด
1) width
2) 500
3) text-color
4) tomato
1) width
2) 800
3) color
4) tomato
1) 800
2) width
3) text-color
4) tomato
1) height
2) 800
3) color
4) tomato
คุณครูกำหนดภาพพื้นหลังมีชื่อไฟล์ว่า abstract.jpg
วายุต้องการกำหนดภาพพื้นหลังของเว็บไซต์โดยใช้ภาพนี้ นักเรียนลองช่วยวายุเติมคำตอบเพื่อให้การแสดงผลสมบูรณ์
body{
__1__ : url(abstract.jpg);
}
(a)
จงเติมคำตอบลงในช่องว่างเพื่อจัดตำแหน่งของรูปภาพให้อยู่ด้านล่างขวาของหน้าเพจ
body{
background-image: url("Bonsai.png");
background-position: (a)
}
