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

่
็
ิ
็
จากโปรแกรมจะแสดงผลค�าว่า รูปแบบตัวอักษรทีได้จะเปนรูปแบบชนด Tahoma 4. เเทก<div> และ <span>
่
่
้
ั
3.4 selecter อืนๆ นอกจากจะมีรูปแบบ Selectar ใน 3 รูปแบบทีได้กล่าวไปแล้วนน ยังมีการระบุ
่
่
่
Selector ในรูปแบบอืน ๆ อีกหลายรูปแบบ ซึงจะเปนการเพิมความยืดหยุนในการเขียนไค้ต CSS
่
็
่
่ ้
้
่
็
โดยจะเริมต้นจากการผสมชือแทกและ Clas เข้าด้วยกัน ในทีนจะยกตัวอย่างบางรูปแบบเท่านน มี ในการจัดรูปแบบเอกสารนนอาจมีการจัดหลายรูปแบบ ซึงแต่ละแบบต้องมีการก�าหนดชอบเขตว่า
ี
ั
้
่
ั
่
่
้
่
้
้
ดังน ี ้ จะเริมต้นตรงไหนและสินสุดตรงไหน ซึงแทก <dง> และ <sp.> นนเปนแทกทีมีไว้แบ่งส่วนเนอหาของ
็
็
ื
็
ั
็
3.4.1 Grouping Seledter เข่น ถ้าเราสร ้าง Selectar เปนดังน ี ้ HTML ออกจากกันเปนส่วนๆ โดยมีข้อแตกต่างดังน ี ้
็
่
่
่
็
็
็
็
็
็
hl(font-family: Helvetica) 4.1 แทก <div> เปนแทกแบบ Block ซึงเปนแทกทีใช ้ในการแยกบรรทัดของข้อความ เมือมีแทก<div> อยู ่
่
่
่
h2(font-family: Helvetica) ระหว่างข้อความ เมือรันแล้วข้อความจะต้องถูกแยกไปอยูในบรรทัดใหมต่างหาก
่
็
็
็
็
็
่
h3(fonl-family. Helvetica) 4.2 แทก <span> เปนแทกแบบ Inlne คือ เปนแทกทีให้ข้อความสามารถอยูในบรรทัดเดียวกันได้
่
การแทรกค�าอธิบายการท�างานของค�าสัง
่
่
เราสามารถเขียนให้อยูในรูปแบบ Selector แบบกลุมได้ ดังน ี ้ - การแทรกค�าอธิบาย (Comment) ในเอกสาร HTMI เพือช่วยอธิบาย Source Code tองเอกสาร
่
hl, h2, h3(font-family: Helvetica) HTML โดยโปรแกรมเวบเบราว์ชอร ์จะไมประมวลผลการท�างานในส่วนของ Commen! ซึงการเขียน
่
็
่
่
้
้
้
่
่
้
้
ี
การท�าแบบนเปนลักษณะทีท�าให้โค้ดสันขึนซึงจะท�าให้ผลทีใด้ทัง b1, h2, 13 เปนรูปแบบฟอนด์ Commment ไว้ในระหว่างแทก <stye...</syle> ใน CSS นนจะต้องเขียนไว้ระหว่าง /" และ " ล้อมรอบ
็
็
็
ั
่
้
็
แบบเดียวกันทังหมด คือ ฟอนด์แบบ Helveica ข้อความทีเปน Comment โดยมีรูปแบบดังน ี ้
่
่
้
่
ั
3.4.2 Atribute Seiecdor เปนการแทรกค�าสัง CSร ลงในส่วนของแทกนนๆ โดยท�าหน้าที ่ /*ข้อความทีต้องการอธิบายการท�างานของค�าสังใน CSS "
็
็
้
็
็
ั
เปนเสมือนแอดทริบิวด์ของแทกนนๆ
่
343 Descendant Seiecior เปนการสืบทอดคุณสมบัติ เช่น(li emfcolor.red;) 5. ก�าหนดหนวย
็
่
่
้
่
่
็
จากโค้ดท�างานโดยจะเลือกทุกๆ e๒ ทีอยูภายใต้ โดยเลือกทังหมดไมว่า en จะซ ้อนด้วยแทกอืนอีกที แต่ต้องมี 1
้
ครอบอยูก่อนหน้านน เข่น
ั
่
่
CSS จะต้องมีการก�าหนดขนาดอยูหลายอย่างเพือให้เหมาะสมกับการออกแบบเวบเพจ เช่น
็
่
่
็
่
ชนาดตัวอักษร ความกว้าง ความสูง ระยะห่าง เปนต้น ซึงใน CSS มีหนวยให้เลือกใช ้หลายแบบ
px(Pixel)
่
้
่
็
เปนหนวยทีใช ้กันมากทีสุดทังการก�าหนดขนาด Fom หรือขนาดของ
่
็
Layat ไมควรก�าหนดขนาดของ Fo๓! เปน Pize! เพราะการก�าหนดขนาดเปน Fisel
็
่
้
่
ู
่
ั
นนจะไมสามารถปรับเพิมหรือขยายชนาดได้ ซึงโดยส่วนใหญ่แล้วผ้ใช ้งานไมได้ปรับ
่
้
ั
ใน Boewser แทน ดังนนการ 700m จะท�าการ
ขนาดรอง Fomt แต่ใช ้การ 700m
้
่
้
่
ขยายชนาดของ Pixe! ขึนเลยท�าให้ทุกอย่างทีแสดงผลอยูใหญ่ขึน
px(Pixel)
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 นยมนามาใช ้ก�าหนดขนาดตัวอักษร
38 39