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