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

6. กำรก�ำหนดสี
ิ
8. กำรก�ำหนดชนดของอักษร

็
ในกำรก�ำหนดสีใน CSS กจะใช ้วิธีเดียวกันกับรูปแบบกำรก�ำหนดสีของ HTML. เช่น รำสำมำรถใช ้ CSSในกำรก�ำหนดชนดให้ตัวอักษรได้ โดยก�ำหนดรูปแบบ Fon ผำน Property
ิ
่
่
็
1) กำรก�ำหนดสีโดยใช ้ชือสี เช่น red, green, biae, black เปนตัน ต่ำงๆ ให้กับ HTML Element เช่น <p>, <dv>, <span>, <h1>และอืนๆ
่
็
2) กำรก�ำหนดสีด้วยตัวเลขฐำนสิบหก (Hex) เช่น #OE, #800#, #0000F เปนต้น
็
ั
3) กำรก�ำหนดสีด้วยฟงก์ชัน ซุ60 เช่น ซูgb (100, 200, 100), ซูb (50%, 100%, 25%) เปนต้น
ตัวอย่ำงกำรก�ำหนดด�ำสิใน CSS
้
้
6.1 กำรตังค�ำสีให้กับตัวอักษรและพืนหลัง มีดังน ี ้
body (
color: black; 9.CSS Box Model
background: white;
(
้
้
่
็
้
็
็
่
จำกค�ำสังเปนกำรตังค�ำำสีตัวอักษรเปนสีด�ำและพืนหลังเปนสีขำว ในกำรใช ้ CSS ในกำรก�ำหนดต�ำแหนงกำรแสดงผลนนในหน้ำเวบเพจหนงประกอบไปด้วย
็
ึ
่
ั
้
ั
็
6.2 กำรก�ำหนดค�ำสีให้กับ Link ในกำรก�ำหนดค่ำสิให้กันลิงค์ใน CSS นนสkมำรถก�ำหนดให้เปน หลำยๆ ส่วน เช่น ส่วนหัวเวบ ส่วนเนอหำ ส่วนท้ำย เปนต้น ส�ำหรับกำรจัดสรรพืนทีของหน้ำเวบเพจ
่
้
้
ื
็
็
็
่
่
้
่
็
็
สิสิงกใด้หลำยสถำนะตำมรูปแบบของกำรลิงค์ เช่น ขณะทียังไมใด้คลิกสิงกเปนอีกสีหรือขณะที เพือแสดงส่วนประกอบเหล่ำนท�ำได้หลำยรูปแบบ เช่น กำรแบ่งแบบอิสระ กำรแบ่งคอสัมน์ กำรจัด
็
ี
่
่
่
็
ื
็
็
คลิกสิงก์กเปนอีกสีหรือเมือเอำเมำส์วำงเหนอสิงกกเปนอีกสี เช่น รูปหน้ำเวบ (ayou) ซึงสำมำรถช ้ตำรำงหรือใช ้ dข ในกรจัดวำงส่วนประกอบของหน้ำเวบเพจ
็
็
็
็
่
็
link color: ซูb(0, 0. 153): ) #* ส�ำหรับสิงกทียังไมได้รับแม " ปจจุบันเวบไซต์ต่ำงๆ จะนยมใช ้ div และใช ้ CSS ในกำรจัดต�ำแหนง ขนำด และสีให้กับแทก div
่
่
ั
็
็
ิ
่
้
่
้
vinlted ( color. rgb(153, 0, 153): 1 / ส�ำหรับสิอด์ทีรีบชมแล้ว " ซึงกำรใช ้ div นนจะท�ำงำนโดยเมือโหลดเสร็จส่วนไหนก่อนกแสดงผลส่วนนนออกมำเลยในหน้ำ
่
ั
ั
็
่
aative f color: rgb(255, 0. 102): ) / ส�ำหรับสิงกทีถูกคลิก " เวบเพจนนถ้ำมองกันอย่ำงง่ำยๆ กคือ กล่องแต่ละกล่องทีนำมำวำงต่อๆ กัน เปนกำรวำงโครงร่ำง
็
้
่
็
ั
็
็
�
่
้
่
่
่
้
่
็
ahover ( colar.: rgb(0, 96, 255). ) /" ส�ำหรับสิงกทีมีมำวำงเหนอ " (Layou! พืนฐำนซึงมีควำมส�ำคัญมำก ส�ำหรับใน CSS นนจะมีเรือง Bex Mode! ซึงจะเกียวข้อง
ื
ั
่
้
่
่
่
่
ถ้ำหำกว่ำไมต้องกำรให้ลงก์ทีปรำกฏมีเส้นต้ำนล่ำงกสำมำรถเขียนค�ำสังใน C5S ได้โดยตังคำที ่ กับเรืองกำรก�ำหนดขนำดของข้อควำมหรือรูปภำทต่ำงๆ ทีใช ้ในกำรแสดงผล โดย สำมำรถแสดง
็
propertylex-deconation เปน nobe เช่น ในรูปแบบของ Bex Model ได้ดังน ี ้
็
a. plain( tot-decoration: #ome) 9.1 Wdth และ Hegbt เปนควำมกว้ำงและควำมสูงของ Element
็
่
้
เมือเรียกใช ้งำน CSS กีสำมำรถเขียนได้ตัน ี ้ 9.2 Margin เปนพืนทีว่ำงๆ รอบเส้นกรอบ (Border) จะไมมีสีพืนหลัง มีลักษณะโปร่งใส
่
้
็
่
้
<a dasse "plain" bef:"person.htm!">บุคลำกs</a> 9.3 Border เปนเส้นกรอบรอบ Padding สีของกรอบถูกก�ำหนดโดยสีพืนหลังของ Box
็
่
่
่
้
่
้
้
่
็
็
จำกค�ำสังดังกล่ำวจะเปนกำรลิงค์ไปยังเพจ persos html! ซึงค�ำว่ำบุคลำกรทีเปนข้อควำมลิงค์ 9.4 Padding เปนส่วนทีใช ้แสดงเนอหำและรูปภำพเปนพืนทีว่ำงๆ รอบเนอหำ สีของ Padding
ื
ื
็
็
กจะไมมีขีดเส้นได้ ถูกก�ำหนดโดยสีพืนหลังของ Box
่
็
้
่
9.5 Content ในกำรก�ำหนด Wdh และ Height ซึงเปน Propertyของ Elememt ด้วย CSS
็
้
้
้
่ ่
้
่ ่
ั
ื
็
ั
7.กำรก�ำหนดรูปแบบข้อควำม นน สิงทีก�ำหนดจะเปนควำมกว้ำงและควำมสูงข องพืนทีทีใช ้แสดงเนอหำเทำนนจึงขนำดทีแท้จริง
ของ Element จะต้องรวมPadding Border และ Margin เข้ำไปด้วย
เรำสำมำรถก�ำหนดรูปแบบให้ข้อควำมได้หลำยรูปแบบ เช่น ควำมสูงของบรรหัด, ด�ำแหนง
่
่
็
กำรรัตวำงข้อควำม กำรขีดเส้นใด้ กำรก�ำหนดตัวพิมพ์เลกหรือตัวพิมพ์ใหญ่ และอืนๆ อีกมำกมำย
่
โดยผำน Property ต่ำงๆ
38 39