Page 36 - การสร้างเว็บไซต์
P. 36
่
้
่
่
็
่
ิ
ี
็
็
ื
วิธีกำรเรียกใช ้งำน Selector ชนดน เรำไมจ�ำเปนต้องมีกำรเรียกใช ้งำน เนองจำกเมือจุดใดทีเวบเพจ 4. เเทก<div> และ <span>
่
่
่
็
็
มีกำรเรียกใช ้งำนแทกชอง HTML ทีเปนชือเดียวกันกับ Selectors ทีเรำก�ำหนดไว้ คุณสมบัติของ
้
็
ั
็
CSSกจะถูกก�ำหนดให้แก่แทกนนโดยอัตโนมัติ เช่น
<head> ในกำรจัดรูปแบบเอกสำรนนอำจมีกำรจัดหลำยรูปแบบ ซึงแต่ละแบบต้องมีกำรก�ำหนดชอบเขตว่ำ
้
่
ั
่
้
่
้
้
่
<title> Internal Style Sheet</title> จะเริมต้นตรงไหนและสินสุดตรงไหน ซึงแทก <dง> และ <sp.> นนเปนแทกทีมีไว้แบ่งส่วนเนอหำของ
ื
็
ั
็
็
็
<style type="lext/css"> HTML ออกจำกกันเปนส่วนๆ โดยมีข้อแตกต่ำงดังน ี ้
่
่
่
็
็
็
็
็
็
fomt (fomt-family: Tahoma;) 4.1 แทก <div> เปนแทกแบบ Block ซึงเปนแทกทีใช ้ในกำรแยกบรรทัดของข้อควำม เมือมีแทก<div> อยู ่
่
่
่
</style> ระหว่ำงข้อควำม เมือรันแล้วข้อควำมจะต้องถูกแยกไปอยูในบรรทัดใหมต่ำงหำก
่
4.2 แทก <span> เปนแทกแบบ Inlne คือ เปนแทกทีให้ข้อควำมสำมำรถอยูในบรรทัดเดียวกันได้
่
็
็
็
็
็
</head> กำรแทรกค�ำอธิบำยกำรท�ำงำนของค�ำสัง
่
่
<body> - กำรแทรกค�ำอธิบำย (Comment) ในเอกสำร HTMI เพือช่วยอธิบำย Source Code tองเอกสำร
่
<fom>รูปแบบตัวอักษร</foml> HTML โดยโปรแกรมเวบเบรำว์ชอร ์จะไมประมวลผลกำรท�ำงำนในส่วนของ Commen! ซึงกำรเขียน
็
่
้
ั
็
</body> Commment ไว้ในระหว่ำงแทก <stye...</syle> ใน CSS นนจะต้องเขียนไว้ระหว่ำง /" และ " ล้อมรอบ
่
็
่
จำกโปรแกรมจะแสดงผลค�ำว่ำ รูปแบบตัวอักษรทีได้จะเปนรูปแบบชนด Tahoma ข้อควำมทีเปน Comment โดยมีรูปแบบดังน ี ้ ่
ิ
็
่
่
่
้
3.4 selecter อืนๆ นอกจำกจะมีรูปแบบ Selectar ใน 3 รูปแบบทีได้กล่ำวไปแล้วนน ยังมีกำรระบุ /*ข้อควำมทีต้องกำรอธิบำยกำรท�ำงำนของค�ำสังใน CSS "
ั
่
่
่
็
่
Selector ในรูปแบบอืน ๆ อีกหลำยรูปแบบ ซึงจะเปนกำรเพิมควำมยืดหยุนในกำรเขียนไค้ต CSS
่
้
่ ้
่
่
ี
ั
็
โดยจะเริมต้นจำกกำรผสมชือแทกและ Clas เข้ำด้วยกัน ในทีนจะยกตัวอย่ำงบำงรูปแบบเท่ำนน มี 5. ก�ำหนดหนวย
ดังน ี ้
็
3.4.1 Grouping Seledter เข่น ถ้ำเรำสร ้ำง Selectar เปนดังน ี ้
hl(font-family: Helvetica) CSS จะต้องมีกำรก�ำหนดขนำดอยูหลำยอย่ำงเพือให้เหมำะสมกับกำรออกแบบเวบเพจ เช่น
่
่
็
h2(font-family: Helvetica) ชนำดตัวอักษร ควำมกว้ำง ควำมสูง ระยะห่ำง เปนต้น ซึงใน CSS มีหนวยให้เลือกใช ้หลำยแบบ
่
่
็
h3(fonl-family. Helvetica) px(Pixel)
่
่
เรำสำมำรถเขียนให้อยูในรูปแบบ Selector แบบกลุมได้ ดังน ี ้ เปนหนวยทีใช ้กันมำกทีสุดทังกำรก�ำหนดขนำด Fom หรือขนำดของ
่
้
่
็
hl, h2, h3(font-family: Helvetica) Layat ไมควรก�ำหนดขนำดของ Fo๓! เปน Pize! เพรำะกำรก�ำหนดขนำดเปน Fisel
่
็
็
้
่
้
่
่
้
่
้
่
้
็
กำรท�ำแบบนเปนลักษณะทีท�ำให้โค้ดสันขึนซึงจะท�ำให้ผลทีใด้ทัง b1, h2, 13 เปนรูปแบบฟอนด์ นนจะไมสำมำรถปรับเพิมหรือขยำยชนำดได้ ซึงโดยส่วนใหญ่แล้วผ้ใช ้งำนไมได้ปรับ
ี
็
ั
่
ู
่
้
้
ั
แบบเดียวกันทังหมด คือ ฟอนด์แบบ Helveica ใน Boewser แทน ดังนนกำร 700m จะท�ำกำร
้
่
3.4.2 Atribute Seiecdor เปนกำรแทรกค�ำสัง CSร ลงในส่วนของแทกนนๆ โดยท�ำหน้ำที ่ ขนำดรอง Fomt แต่ใช ้กำร 700m
็
็
ั
่
้
้
่
้
็
เปนเสมือนแอดทริบิวด์ของแทกนนๆ ขยำยชนำดของ Pixe! ขึนเลยท�ำให้ทุกอย่ำงทีแสดงผลอยูใหญ่ขึน
็
ั
็
343 Descendant Seiecior เปนกำรสืบทอดคุณสมบัติ เช่น(li emfcolor.red;) px(Pixel)
่
่
้
จำกโค้ดท�ำงำนโดยจะเลือกทุกๆ e๒ ทีอยูภำยใต้ โดยเลือกทังหมดไมว่ำ en จะซ ้อนด้วยแทกอืนอีกที แต่ต้องมี 1 em (Em Dash)
่
็
่
่
่
้
่
่
่
่
่
็
้
ั
ครอบอยูก่อนหน้ำนน เข่น เปนชนำดทีไมคงทีหรือ Relative ไมสำมำรถระบุชนำดทีแนนอนได้ ขึนอยูกับว่ำ
่
้
ั
ใน Element นนมีกำรก�ำหนด Fo๓t เปนอะไร มีขนำดเท่ำไรโดยขนำดของ I e๒
็
มีค่ำเท่ำกับควำมสูงของตัวอักษร M (ตัวอักษรใหญ่)
ex (x-high)
้
้
่
ั
็
มีขนำดเท่ำกับขนำดควำมสูงของตัว x (ตัวอักษรเลก) ขึนอยูกับว่ำใน Elenemt นน
็
มีกำรก�ำหนด Fo๓t เปนอะไร มีขนำดเท่ำไร
mm (Millimeter)
็
่
มีหนวยเปนมิลลิเมตร
cm(Centimeler)
่
็
มีหนวยเปนเขนติเมตร
In (lach)
้
่
มีหนวยเปนนว
็
ิ
pt(Polmt)
�
ิ
่
มีหนวยเปน Foini นยมนำมำใช ้ก�ำหนดขนำดตัวอักษร
็
36 37
