Page 48 - การสร้างเว็บไซต์

8. การก�าหนดชนดของอักษร 10. CSS Border
ิ

้
่
ิ
ราสามารถใช ้ CSSในการก�าหนดชนดให้ตัวอักษรได้ โดยก�าหนดรูปแบบ Fon ผาน Property เส้นขอบจะมีทังหมด 4 ด้าน คือ ด้านบน ขวา ล่าง และซ ้าย โดยสามารถก�าหนดรูปแบบ
่
ต่างๆ ให้กับ HTML Element เช่น <p>, <dv>, <span>, <h1>และอืนๆ ของเส้นขอบ (Sye), ขนาด (Sze) และสีให้กับ Eement ได้หลายรูปแบบและสามารถก�าหนดเพียง
่
่ ่
่
็
ึ
ด้านใดด้านหนงกได้ ซึง Properly ทีเกียวกับเส้นขอบมีดังน ี ้
Property
border-style none hidden dotted dashed double ridge Inset outset
9.CSS Box Model ใช ้ก�าหนดลักษณะของกรอบทัง 4 ด้าน ซึงเส้นแต่ละเส้นจะมีลักษณะทีแตกต่างกัน groove
่
้
่
ตัวอย่างการค�านวณหาขนาดของ Ber
ก�าหนดขนาดให้กับ Elenent เช่น
่
้
ั
ในการใช ้ CSS ในการก�าหนดต�าแหนงการแสดงผลนนในหน้าเวบเพจหนงประกอบไปด้วย width:250px
็
ึ
่
้
้
่
ื
็
หลายๆ ส่วน เช่น ส่วนหัวเวบ ส่วนเนอหา ส่วนท้าย เปนต้น ส�าหรับการจัดสรรพืนทีของหน้าเวบเพจ padding 10px:
็
็
่
้
ี
เพือแสดงส่วนประกอบเหล่านท�าได้หลายรูปแบบ เช่น การแบ่งแบบอิสระ การแบ่งคอสัมน์ การจัด border:Spx solid gray
่
็
็
รูปหน้าเวบ (ayou) ซึงสามารถช ้ตารางหรือใช ้ dข ในกรจัดวางส่วนประกอบของหน้าเวบเพจ mangin:10px
็
่
ปจจุบันเวบไซต์ต่างๆ จะนยมใช ้ div และใช ้ CSS ในการจัดต�าแหนง ขนาด และสีให้กับแทก div สามารถค�านวณหาค่าขนาดทีแท้จริงของ Elemest ได้ ดังน ี ้
็
ั
ิ
่
้
่
้
่
ั
ั
ซึงการใช ้ div นนจะท�างานโดยเมือโหลดเสร็จส่วนไหนก่อนกแสดงผลส่วนนนออกมาเลยในหน้า width = 250px
็
้
่
�
็
็
เวบเพจนนถ้ามองกันอย่างง่ายๆ กคือ กล่องแต่ละกล่องทีนามาวางต่อๆ กัน เปนการวางโครงร่าง padding = 10
็
ั
่
่
่
่
้
้
(Layou! พืนฐานซึงมีความส�าคัญมาก ส�าหรับใน CSS นนจะมีเรือง Bex Mode! ซึงจะเกียวข้อง จะแบ่งได้เปน 2 ส่วน คือ
ั
็
่
่
กับเรืองการก�าหนดขนาดของข้อความหรือรูปภาทต่างๆ ทีใช ้ในการแสดงผล โดย สามารถแสดง padding-left = 10px แaะ padding-right = 10px จะได้ 10+10 = 20p
ในรูปแบบของ Bex Model ได้ดังน ี ้ border = 5px
9.1 Wdth และ Hegbt เปนความกว้างและความสูงของ Element จะแบ่งได้เปน 2 ส่วน คือ
็
็
่
้
้
9.2 Margin เปนพืนทีว่างๆ รอบเส้นกรอบ (Border) จะไมมีสีพืนหลัง มีลักษณะโปร่งใส border-left = 5px และborde-right = spx จะได้ 5+5 = 10p
็
่
้
็
9.3 Border เปนเส้นกรอบรอบ Padding สีของกรอบถูกก�าหนดโดยสีพืนหลังของ Box margin = 10px
่
่
้
้
้
็
็
9.4 Padding เปนส่วนทีใช ้แสดงเนอหาและรูปภาพเปนพืนทีว่างๆ รอบเนอหา สีของ Padding จะแบ่งได้เปน 2 ส่วน คือ
ื
ื
็
้
ถูกก�าหนดโดยสีพืนหลังของ Box mangin-lef = 10px และmargin-right = 10px จะได้ 10+10 = 20px
่
็
9.5 Content ในการก�าหนด Wdh และ Height ซึงเปน Propertyของ Elememt ด้วย CSS ดังนน ระได้
้
ั
้
้
่ ่
้
่ ่
้
ั
นน สิงทีก�าหนดจะเปนความกว้างและความสูงข องพืนทีทีใช ้แสดงเนอหาเทานนจึงขนาดทีแท้จริง 250+20+10+20 = 300px
ื
็
ั
ของ Element จะต้องรวมPadding Border และ Margin เข้าไปด้วย
44 45