Page 47 - การพัฒนาหนังสืออิเล็กทรอนิกส์เพื่อการศึกษา เรื่อง การสร้างเว็บไซต์
P. 47
้
10. CSS Border 11. การก�าหนดรูปแบบของพืนหลัง
้
่
้
้
การก�าหนดพืนหลัง (Bacspound) ให้กับเบเพจโดยใช ้ค�าสัง CSS นน ส7มารถใส่พืนหลัง
ั
้
เส้นขอบจะมีทังหมด 4 ด้าน คือ ด้านบน ขวา ล่าง และซ ้าย โดยสามารถก�าหนดรูปแบบ ให้กับวัตถุโตๆกได้ โดยสามารถก�าหนดได้ ? รูปแบบ คือ การก�าหนดสีและรูปภาพให้เปนพืนหลัง
้
็
็
ของเส้นขอบ (Sye), ขนาด (Sze) และสีให้กับ Eement ได้หลายรูปแบบและสามารถก�าหนดเพียง ซึงมี Propety
่
่
่ ่
่
ึ
ด้านใดด้านหนงกได้ ซึง Properly ทีเกียวกับเส้นขอบมีดังน ี ้ 11.1 การใส่สีพืนหลัง สามารถก�าหนดพืนหลังสีเวบเพจได้
็
้
้
็
Property 11.2 การใส่รูปภาพพืนหลัง ก่อนอืนต้องมีรูปภาพพีจะท�าเปนพืนพลังก่อนซึงควรมกบไว้ในโฟล
้
่
้
่
็
็
border-style none hidden dotted dashed double ridge Inset outset ่ ้ ้ ่ ่ ้
็
ี
็
่
่
้
ใช ้ก�าหนดลักษณะของกรอบทัง 4 ด้าน ซึงเส้นแต่ละเส้นจะมีลักษณะทีแตกต่างกัน groove เดอร ์ images ซึงเราต้องสร ้างโฟลเดอร ์นขึนมาเองเพือใช ้เปนทีเกบรูปราทองเรีบไซต์และต้องตัง
่
่
้
่
่
็
็
ี
ตัวอย่างการค�านวณหาขนาดของ Ber ชือรูปภาพให้เปนราษาอังกรษด้ว! ในตัวอย่างนรูปจะมีชือว่า flower.jpg ซึงถูกเกบไว้ทีโฟลเดอร ์
ก�าหนดขนาดให้กับ Elenent เช่น images ้ ้ ้
width:250px 11.3 การก�าหนดให้พืนหลังแสดงภาพซ�าในแนวตัง
้
้
padding 10px: 11.4 การก�าหนดให้พืนหลังแสดงภาพซ�าในแนวนอน
้
้
border:Spx solid gray 11.5 การก�าหนดให้พืนหลังแสดงภาพครังเดียว ้
่
้
่
mangin:10px 11.6 การก�าหนดภาพขึนหลังไมให้เลือนตามสกรอสบาร ์ (Screll Bar) ปกติแล้วภาพขึนหลังจะ
่
้
่
่
้
่
่
ิ
่
สามารถค�านวณหาค่าขนาดทีแท้จริงของ Elemest ได้ ดังน ี ้ เสือบตามการเลือนขึนลงของหน้าจอ แต่เราสามารถก�าหนดให้ภาพพืนหลังให้อยูนงๆ กับทีหรือ ้
่
่
้
้
่
width = 250px ตรึงไว้กับพืนหลังโดยไมต้องเลือนตามการเลือนขึนลงของหน้าจอโดยการใช ้พรีอปเพอร ์ตี
้
่
ั
็
padding = 10 Lackgroud alachmen ซึงจะใช ้ได้กับแทก <body> เท่านน สามารถก�าหนดได้ 2 แบบ คือ
่
่
่
่
็
จะแบ่งได้เปน 2 ส่วน คือ 11.6.1 แบบ fixed เปนการก�าหนดให้ภาพอยูกับทีไมเลือนตาม
็
่
็
padding-left = 10px แaะ padding-right = 10px จะได้ 10+10 = 20p 11.6.2 แบบ scroll เปนการก�าหนด ให้ภาพ เลือนตาม Scroll bar
border = 5px
จะแบ่งได้เปน 2 ส่วน คือ
็
่
border-left = 5px และborde-right = spx จะได้ 5+5 = 10p 12. การจัดวางต�าเเหนงของอิลิเมนต์
margin = 10px
็
จะแบ่งได้เปน 2 ส่วน คือ
่
่
่
mangin-lef = 10px และmargin-right = 10px จะได้ 10+10 = 20px โดยทัวไปแล้วรูปแบบของ CSS จะอนญาตให้เราสามารถวางสิงต่างๆ ทีเปนอิลิเมนด์ ได้
ุ
็
้
่
้
ั
ดังนน ระได้ อย่างอิสระในหน้าเวบเพจ ส�าหรับการเคลือนย้ายวัดถุตางๆ ในหน้าเวบเพรนนจะเกิดจากการ
็
ั
็
้
่
250+20+10+20 = 300px เปลียนแปลงต�าแหนงของวัตถุนนๆ
ั
top
่
Auto % ค่าทีเปนตัวเลข
็
่
่
ใช ้ก�าหนดต�าเเหนงวัตถุให้อยูขอบด้านบน
bottom
่
Auto % ค่าทีเปนตัวเลข
็
่
่
ใช ้ก�าหนดต�าเเหนงวัตถุให้อยูขอบด้านล่าง
left
่
Auto % ค่าทีเปนตัวเลข
็
่
่
ใช ้ก�าหนดต�าเเหนงวัตถุให้อยูขอบด้านซ ้าย
42 43
