แบบทดสอบก่อนเรียน เรื่อง การตกแต่งเว็บไซต์ด้วย CSS

ข้อใดต่อไปนี้กล่าวถึง 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 ใดในช่องว่าง _________

จากอิลิเมนต์ 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;

}

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);

}

จงเติมคำตอบลงในช่องว่างเพื่อจัดตำแหน่งของรูปภาพให้อยู่ด้านล่างขวาของหน้าเพจ

body{

background-image: url("Bonsai.png");

background-position: _______

}