Page 50 - การสร้างเว็บไซต์
P. 50
้
11. กำรก�ำหนดรปแบบของพนหลัง right
ู
ื
็
Aoto % ค่ำที่เปนตัวเลข
ุ
่
กำรก�ำหนดพนหลัง (Bacspound) ให้กับเบเพจโดยใช้ค�ำสั่ง CSS นั้น สำมำรถใส่พนหลังให้ ใช้ก�ำหนดต�ำเเหนงวัตถให้อยู่ด้ำนขอบขวำ
ื
้
ื
้
ู
ื
ู
ุ
ี
กับวัตถใดๆกได้ โดยสำมำรถก�ำหนดได้ ? รปแบบ คือ กำรก�ำหนดสีและรปภำพให้เปนพนหลัง ซึ่งม position
็
้
็
Propety static
้
้
11.1 กำรใส่สีพนหลัง สำมำรถก�ำหนดพนหลังสีเว็บเพจได้ ค่ำเริ่มต้นส�ำหรับ position
ื
ื
ู
้
ื
ี
ี
็
้
ื
11.2 กำรใส่รปภำพพนหลัง ก่อนอื่นต้องมรปภำพพจะท�ำเปนพนพลังก่อนซึ่งควรมเกบไว้ในโฟล absolute
ู
็
ี
ู
็
ื
้
ึ
้
ี
็
เดอร์ images ซึ่งเรำต้องสร้ำงโฟลเดอร์นขนมำเองเพ่อใช้เปนที่เกบเว็บไซต์และต้องตั้งชื่อรปภำพให้ จะไม่สนใจอิลิเมนต์ก่อนหน้ำ เเต่จะพำตัวเองไปจุดนั้นเลย
ี
็
ู
ี
้
เปนภำษำอังกฤษในตัวอย่ำงนรปจะมชื่อว่ำ flower.jpg ซึ่งถูกเกบไว้ที่โฟลเดอร์ images relative
็
่
ี
11.3 กำรก�ำหนดให้พนหลังแสดงภำพซ�้ำในแนวตั้ง จะมลักษณะคล้ำยๆกับ static ต่ำงกันตรงที่ relative สำมำรถใช้ top left bottom right ในกำรก�ำหนด
ื
้
่
ื
11.4 กำรก�ำหนดให้พนหลังแสดงภำพซ�้ำในแนวนอน ต�ำเเหนงได้
้
ื
11.5 กำรก�ำหนดให้พนหลังแสดงภำพครั้งเดียว fixed
้
้
ื
ึ
้
11.6 กำรก�ำหนดภำพขนหลังไม่ให้เลื่อนตำมสกรอสบำร์ (Screll Bar) ปกติแล้วภำพขนหลังจะเลื่อน จะตรึงตัวเองอยู่ที่พนหลังเสมอ ไม่เลื่อนตำม Scroll Bar
้
ึ
ื
ตำมกำรเลื่อนขนลงของหน้ำจอ แต่เรำสำมำรถก�ำหนดให้ภำพพนหลังให้อยู่น่งๆ กับที่หรือ Clip
้
ิ
้
ึ
้
็
้
้
ึ
ตรึงไว้กับพนหลังโดยไม่ต้องเลื่อนตำมกำรเลื่อนขนลงของหน้ำจอโดยกำรใช้พรอปเพอร์ตี Lackgroud Aoto rect (top,bottom,left) เช่น clip:rect (opx,60px, 200px,0px);
ื
็
ู
alachmen ซึ่งจะใช้ได้กับแท็ก <body> เท่ำนั้น สำมำรถก�ำหนดได้ 2 แบบ ใช้ก�ำหนดกำรตัดส่วนต่ำงๆของวัตุที่ไม่ต้องกำรออกไป ซึ่งตัดออกเปนรปสี่เหลี่ยม
13.กำรก�ำหนดรปเเบบของลิงก์
ู
่
12. กำรจัดวำงต�ำเเหนงของอิลิเมนต์
ก่อนที่จะสร้ำงรปแบบของลิงค์นั้น ก่อนอื่นเรำจ�ำเปนจ้องร้จัก pseudo-class และ pseudo-
ู
็
ู
element ก่อน ซึ่งเปนคลำสและอิลิเมนต์พเศษ ถูกสร้ำงขนมำต่ำงหำกเพ่อท�ำให้งำนตำมที่เรำต้องกำร
ึ
็
ื
้
ิ
โดยทั่วไปแล้วรปแบบของ CSS จะอนญำตให้เรำสำมำรถวำงสิ่งต่ำงๆ ที่เปนอิลิเมนด์ ได้อย่ำง ซึ่งในรปแบบกำรเรียนในแต่ละแบบดังน ้ ี
ู
็
ุ
ู
อิสระในหน้ำเว็บเพจ ส�ำหรับกำรเคลื่อนย้ำยวัดถตำงๆ ในหน้ำเว็บเพจนั้นจะเกดจำกกำรเปลี่ยนแปลง selector: pseudo-class ( property: value
ิ
ุ
่
ต�ำแหนงของวัตถนั้นๆ selector: pseudo-element ( property: value
ุ
top selector.class: pseudo-class (property: value)
็
Auto % ค่ำที่เปนตัวเลข selector.class: pseudo-element (property: value)
่
ุ
ใช้ก�ำหนดต�ำเเหนงวัตถให้อยู่ขอบด้ำนบน ลิงก์ (Link) คือ จุดที่น�ำไปยังหน้ำเว็บเพจอื่นหรือเชื่อมโยงไปยังไฟล์ต่ำงๆ สำมำรถเชื่อมโยง
bottom ไปยังทุกที่ต้องกำรได้ ซึ่งนอกจำกลิงก์ใน HTML แบบปกติแล้ว ยังมรปแบบสถำนะต่ำงๆ ของลิงก์ที่
ี
ู
Auto % ค่ำที่เป็นตัวเลข ถูกน�ำมำใช้อีกหลำยสถำนะซึ่งจะเรียกว่ำ pseudo-class ตัวอย่ำงเช่น anchor pseudo-class
่
ุ
ใช้ก�ำหนดต�ำเเหนงวัตถให้อยู่ขอบด้ำนล่ำง
left
Auto % ค่ำที่เปนตัวเลข
็
46 47
