Page 45 - การพัฒนาหนังสืออิเล็กทรอนิกส์เพื่อการศึกษา เรื่อง การสร้างเว็บไซต์

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 การตังค�าสีให้กับตัวอักษรและพืนหลัง มีดังน ี ้ 9.CSS Box Model
body (
color: black; ้ ่
ึ
็
่
ั
background: white; ในการใช ้ CSS ในการก�าหนดต�าแหนงการแสดงผลนนในหน้าเวบเพจหนงประกอบไปด้วย
้
้
่
็
ื
็
็
( หลายๆ ส่วน เช่น ส่วนหัวเวบ ส่วนเนอหา ส่วนท้าย เปนต้น ส�าหรับการจัดสรรพืนทีของหน้าเวบเพจ
้
่
ี
้
้
่
จากค�าสังเปนการตังค�าาสีตัวอักษรเปนสีด�าและพืนหลังเปนสีขาว เพือแสดงส่วนประกอบเหล่านท�าได้หลายรูปแบบ เช่น การแบ่งแบบอิสระ การแบ่งคอสัมน์ การจัด
็
็
็
่
็
็
้
็
ั
6.2 การก�าหนดค�าสีให้กับ Link ในการก�าหนดค่าสิให้กันลิงค์ใน CSS นนสkมารถก�าหนดให้เปน รูปหน้าเวบ (ayou) ซึงสามารถช ้ตารางหรือใช ้ dข ในกรจัดวางส่วนประกอบของหน้าเวบเพจ
ั
ิ
็
่
็
่
็
็
่
็
สิสิงกใด้หลายสถานะตามรูปแบบของการลิงค์ เช่น ขณะทียังไมใด้คลิกสิงกเปนอีกสีหรือขณะที ปจจุบันเวบไซต์ต่างๆ จะนยมใช ้ div และใช ้ CSS ในการจัดต�าแหนง ขนาด และสีให้กับแทก div
้
่
่
้
ั
ั
็
่
่
คลิกสิงก์กเปนอีกสีหรือเมือเอาเมาส์วางเหนอสิงกกเปนอีกสี เช่น ซึงการใช ้ div นนจะท�างานโดยเมือโหลดเสร็จส่วนไหนก่อนกแสดงผลส่วนนนออกมาเลยในหน้า
็
็
็
็
ื
็
่
้
็
ั
�
็
็
่
link color: ซูb(0, 0. 153): ) #* ส�าหรับสิงกทียังไมได้รับแม " เวบเพจนนถ้ามองกันอย่างง่ายๆ กคือ กล่องแต่ละกล่องทีนามาวางต่อๆ กัน เปนการวางโครงร่าง
่
็
่
้
้
่
่
่
ั
่
vinlted ( color. rgb(153, 0, 153): 1 / ส�าหรับสิอด์ทีรีบชมแล้ว " (Layou! พืนฐานซึงมีความส�าคัญมาก ส�าหรับใน CSS นนจะมีเรือง Bex Mode! ซึงจะเกียวข้อง
่
่
่
็
aative f color: rgb(255, 0. 102): ) / ส�าหรับสิงกทีถูกคลิก " กับเรืองการก�าหนดขนาดของข้อความหรือรูปภาทต่างๆ ทีใช ้ในการแสดงผล โดย สามารถแสดง
้
่
ื
ahover ( colar.: rgb(0, 96, 255). ) /" ส�าหรับสิงกทีมีมาวางเหนอ " ในรูปแบบของ Bex Model ได้ดังน ี
็
็
่
้
่
่
็
ถ้าหากว่าไมต้องการให้ลงก์ทีปรากฏมีเส้นต้านล่างกสามารถเขียนค�าสังใน C5S ได้โดยตังคาที ่ 9.1 Wdth และ Hegbt เปนความกว้างและความสูงของ Element
้
่
้
่
็
propertylex-deconation เปน nobe เช่น 9.2 Margin เปนพืนทีว่างๆ รอบเส้นกรอบ (Border) จะไมมีสีพืนหลัง มีลักษณะโปร่งใส
็
้
็
a. plain( tot-decoration: #ome) 9.3 Border เปนเส้นกรอบรอบ Padding สีของกรอบถูกก�าหนดโดยสีพืนหลังของ Box
่
้
้
้
่
็
ื
็
ื
่
เมือเรียกใช ้งาน CSS กีสามารถเขียนได้ตัน ี ้ 9.4 Padding เปนส่วนทีใช ้แสดงเนอหาและรูปภาพเปนพืนทีว่างๆ รอบเนอหา สีของ Padding
้
<a dasse "plain" bef:"person.htm!">บุคลากs</a> ถูกก�าหนดโดยสีพืนหลังของ Box ่
็
่
่
่
็
็
จากค�าสังดังกล่าวจะเปนการลิงค์ไปยังเพจ persos html! ซึงค�าว่าบุคลากรทีเปนข้อความลิงค์ 9.5 Content ในการก�าหนด Wdh และ Height ซึงเปน Propertyของ Elememt ด้วย CSS
้
้
้
่ ่
้
่ ่
็
ั
ื
ั
็
กจะไมมีขีดเส้นได้ นน สิงทีก�าหนดจะเปนความกว้างและความสูงข องพืนทีทีใช ้แสดงเนอหาเทานนจึงขนาดทีแท้จริง
่
ของ Element จะต้องรวมPadding Border และ Margin เข้าไปด้วย
7.การก�าหนดรูปแบบข้อความ
เราสามารถก�าหนดรูปแบบให้ข้อความได้หลายรูปแบบ เช่น ความสูงของบรรหัด, ด�าแหนง
่
่
การรัตวางข้อความ การขีดเส้นใด้ การก�าหนดตัวพิมพ์เลกหรือตัวพิมพ์ใหญ่ และอืนๆ อีกมากมาย
็
โดยผาน Property ต่างๆ
่
40 41