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