Page 51 - การสร้างเว็บไซต์
P. 51
ื
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
