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

4. เเทก<div> และ <span> 6. การก�าหนดสี
็

้
่
ั
ในการจัดรูปแบบเอกสารนนอาจมีการจัดหลายรูปแบบ ซึงแต่ละแบบต้องมีการก�าหนดชอบเขตว่า ในการก�าหนดสีใน CSS กจะใช ้วิธีเดียวกันกับรูปแบบการก�าหนดสีของ HTML. เช่น
็
่
้
่
้
้
่
็
จะเริมต้นตรงไหนและสินสุดตรงไหน ซึงแทก <dง> และ <sp.> นนเปนแทกทีมีไว้แบ่งส่วนเนอหาของ 1) การก�าหนดสีโดยใช ้ชือสี เช่น red, green, biae, black เปนตัน
็
็
ั
ื
่
็
HTML ออกจากกันเปนส่วนๆ โดยมีข้อแตกต่างดังน ี ้
็
็
่
่
่
็
็
็
็
็
4.1 แทก <div> เปนแทกแบบ Block ซึงเปนแทกทีใช ้ในการแยกบรรทัดของข้อความ เมือมีแทก<div> อยู ่ 2) การก�าหนดสีด้วยตัวเลขฐานสิบหก (Hex) เช่น #OE, #800#, #0000F เปนต้น
็
่
ั
็
่
่
ระหว่างข้อความ เมือรันแล้วข้อความจะต้องถูกแยกไปอยูในบรรทัดใหมต่างหาก 3) การก�าหนดสีด้วยฟงก์ชัน ซุ60 เช่น ซูgb (100, 200, 100), ซูb (50%, 100%, 25%) เปนต้น
่
็
็
4.2 แทก <span> เปนแทกแบบ Inlne คือ เปนแทกทีให้ข้อความสามารถอยูในบรรทัดเดียวกันได้ ตัวอย่างการก�าหนดด�าสิใน CSS
็
็
็
่
้
้
การแทรกค�าอธิบายการท�างานของค�าสัง ่ 6.1 การตังค�าสีให้กับตัวอักษรและพืนหลัง มีดังน ี ้
่
- การแทรกค�าอธิบาย (Comment) ในเอกสาร HTMI เพือช่วยอธิบาย Source Code tองเอกสาร body (
่
HTML โดยโปรแกรมเวบเบราว์ชอร ์จะไมประมวลผลการท�างานในส่วนของ Commen! ซึงการเขียน color: black;
่
็
้
็
Commment ไว้ในระหว่างแทก <stye...</syle> ใน CSS นนจะต้องเขียนไว้ระหว่าง /" และ " ล้อมรอบ
ั
่
ข้อความทีเปน Comment โดยมีรูปแบบดังน ี ้ background: white;
็
่
่
/*ข้อความทีต้องการอธิบายการท�างานของค�าสังใน CSS " (
้
้
่
จากค�าสังเปนการตังค�าาสีตัวอักษรเปนสีด�าและพืนหลังเปนสีขาว
็
็
็
้
5. ก�าหนดหนวย 6.2 การก�าหนดค�าสีให้กับ Link ในการก�าหนดค่าสิให้กันลิงค์ใน CSS นนสkมารถก�าหนดให้เปน
่
็
ั
่
็
สิสิงกใด้หลายสถานะตามรูปแบบของการลิงค์ เช่น ขณะทียังไมใด้คลิกสิงกเปนอีกสีหรือขณะที
่
็
็
่
่
ื
็
็
็
็
คลิกสิงก์กเปนอีกสีหรือเมือเอาเมาส์วางเหนอสิงกกเปนอีกสี เช่น
็
่
่
link color: ซูb(0, 0. 153): ) #* ส�าหรับสิงกทียังไมได้รับแม "
็
่
่
็
่
CSS จะต้องมีการก�าหนดขนาดอยูหลายอย่างเพือให้เหมาะสมกับการออกแบบเวบเพจ เช่น vinlted ( color. rgb(153, 0, 153): 1 / ส�าหรับสิอด์ทีรีบชมแล้ว "
่
่
่
็
ชนาดตัวอักษร ความกว้าง ความสูง ระยะห่าง เปนต้น ซึงใน CSS มีหนวยให้เลือกใช ้หลายแบบ aative f color: rgb(255, 0. 102): ) / ส�าหรับสิงกทีถูกคลิก "
็
่
px(Pixel) ahover ( colar.: rgb(0, 96, 255). ) /" ส�าหรับสิงกทีมีมาวางเหนอ "
ื
็
่
้
้
่
่
เปนหนวยทีใช ้กันมากทีสุดทังการก�าหนดขนาด Fom หรือขนาดของ ถ้าหากว่าไมต้องการให้ลงก์ทีปรากฏมีเส้นต้านล่างกสามารถเขียนค�าสังใน C5S ได้โดยตังคาที ่
็
่
่
็
็
่
็
Layat ไมควรก�าหนดขนาดของ Fo๓! เปน Pize! เพราะการก�าหนดขนาดเปน Fisel propertylex-deconation เปน nobe เช่น
็
่
้
่
ู
่
นนจะไมสามารถปรับเพิมหรือขยายชนาดได้ ซึงโดยส่วนใหญ่แล้วผ้ใช ้งานไมได้ปรับ
่
ั
้
ั
ใน Boewser แทน ดังนนการ 700m จะท�าการ a. plain( tot-decoration: #ome) ้
่
ขนาดรอง Fomt แต่ใช ้การ 700m เมือเรียกใช ้งาน CSS กีสามารถเขียนได้ตัน ี
่
้
้
ขยายชนาดของ Pixe! ขึนเลยท�าให้ทุกอย่างทีแสดงผลอยูใหญ่ขึน <a dasse "plain" bef:"person.htm!">บุคลากs</a>
่
่
่
่
px(Pixel) จากค�าสังดังกล่าวจะเปนการลิงค์ไปยังเพจ persos html! ซึงค�าว่าบุคลากรทีเปนข้อความลิงค์
็
็
em (Em Dash) กจะไมมีขีดเส้นได้
็
่
่
่
้
่
่
่
เปนชนาดทีไมคงทีหรือ Relative ไมสามารถระบุชนาดทีแนนอนได้ ขึนอยูกับว่า
่
็
่
้
ั
ใน Element นนมีการก�าหนด Fo๓t เปนอะไร มีขนาดเท่าไรโดยขนาดของ I e๒
็
มีค่าเท่ากับความสูงของตัวอักษร M (ตัวอักษรใหญ่) 7.การก�าหนดรูปแบบข้อความ
ex (x-high)
้
้
มีขนาดเท่ากับขนาดความสูงของตัว x (ตัวอักษรเลก) ขึนอยูกับว่าใน Elenemt นน
็
่
ั
มีการก�าหนด Fo๓t เปนอะไร มีขนาดเท่าไร
็
mm (Millimeter) เราสามารถก�าหนดรูปแบบให้ข้อความได้หลายรูปแบบ เช่น ความสูงของบรรหัด, ด�าแหนง
่
็
่
มีหนวยเปนมิลลิเมตร ่
็
cm(Centimeler) การรัตวางข้อความ การขีดเส้นใด้ การก�าหนดตัวพิมพ์เลกหรือตัวพิมพ์ใหญ่ และอืนๆ อีกมากมาย
่
่
มีหนวยเปนเขนติเมตร โดยผาน Property ต่างๆ
็
In (lach)
้
่
มีหนวยเปนนว
ิ
็
pt(Polmt)
ิ
�
็
มีหนวยเปน Foini นยมนามาใช ้ก�าหนดขนาดตัวอักษร
่
42 43