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

ิ
ู
ู
3. รปแบบของ Selector จำกโปรแกรมจะแสดงผลค�ำว่ำ รปแบบตัวอักษรที่ได้จะเปนรปแบบชนด Tahoma
็
ู
ู
3.4 selecter อื่นๆ นอกจำกจะมรปแบบ Selectar ใน 3 รปแบบที่ได้กล่ำวไปแล้วนั้น ยังม ี
ี
ู
็
ุ
ี
ุ
ู
ู
ิ
ี
ู
้
ี
Seleclor ใน CSS มกำรเขยนใต้หลำกหลำยรปแบบหรือเปำหมำยที่แตกต่ำงกันออกไป ม ี กำรระบ Selector ในรปแบบอื่น ๆ อีกหลำยรปแบบ ซึ่งจะเปนกำรเพ่มควำมยืดหย่นในกำรเขยน
ี
้
ู
ี
้
ี
ุ
ู
็
รำยละเอียดดังนและในแต่ละรปแบบกจะมวัตถประสงค์ ไค้ CSS โดยจะเริ่มต้นจำกกำรผสมชื่อแท็กและ Clas เข้ำด้วยกัน ในที่นจะยกตัวอย่ำงบำงรปแบบ
ี
ึ
3.1 Class Selecters เปน Selector ที่ต้องก�ำหนดชื่อของ Selecior ขนมำเอง โดยที่ Selecior เท่ำนั้น มดังน ้ ี
้
็
็
ในรปแบบนจะอยู่อย่ำงอิสระ ไม่มกำรอ้ำงอิงเก่ยวข้องกับแท็ก HTML ใดๆ กำรเรียกใช้งำนต้อง 3.4.1 Grouping Seledter เข่น ถ้ำเรำสร้ำง Selectar เปนดังน ้ ี
ี
ี
ู
้
ี
ระบชีอ CksSeledtor กับแท็กของ HTML จึงจะสำมำรถใช้งำนคุณสมบัติของ Class ได้ วิธีกำร hl(font-family: Helvetica)
ุ
เขยน Selectorในรปแบบนเขยนได้โดยกำรตั้งชื่อ Seleciar ไว้หลังเครื่องหมำย จุด ( . ) จำกนั้น h2(font-family: Helvetica)
ี
ี
ี
้
ู
ตำมด้วย Properies เช่น h3(fonl-family. Helvetica)
ี
ู
ุ
img-leftf เรำสำมำรถเขยนให้อยู่ในรปแบบ Selector แบบกล่มได้ ดังน ้ ี
border-bottom: Ipx solid #333. hl, h2, h3(font-family: Helvetica)
ึ
้
้
็
็
ู
ี
border-left: Ipx solid #333, กำรท�ำแบบนเปนลักษณะที่ท�ำให้โค้ดสั้นขนซึ่งจะท�ำให้ผลที่ใด้ทั้ง b1, h2, 13 เปนรปแบบฟอนด์
วิธีกำรเรียกใช้งำนสำมำรถเรียกใช้งำน Claas Select๒r ได้โดยกำรใช้ Aiสbue (Class แล้วตำม แบบเดียวกันทั้งหมด
ด้วย
ชื่อ Class ที่ต้องกำรเรียกใช้งำน เช่น
<p>cing cass="lmg-left" sc:"Images/intro jpg" width="100' height="100/></p>
3.2. ID Seledters เปน Selecior ที่อ้ำงอิงกับ Aเuibate ID ที่อยู่ภำยในแท็กของ HTMI. โดย
็
ที่แท็กของ HTML ใดม ID ตรงตำม ID Selctos ที่เรำก�ำหนดไว้ คุณสมบัติของ CSS ที่เรำ
ี
ก�ำหนดไว้กับ Selector
้
ี
วิธีกำรเรียกใช้งำนสำมำรถเรียกใช้ ID Selector นใต้โดยก�ำหนด Aแribue ID ภำยในแท็ก
ที่ต้องกำรเรียกใช้งำนคุณสมบัติ CSS รำก ID Selectos ให้มควำมสัมพันธ์กับ Selector เช่น
ี
<div id "header">
<ing se="images/logo. png" widh="90" height="90'/>
<h1>ชมรมนักพัฒนำเว็ย HTML.<br />
3.3 Tag Seeciers เปน Seector ที่อ้ำงอิงกับแท็กของ HTML ถ้ำหำกมกำรก�ำหนดคุณสมบัติให้
็
ี
ิ
้
ี
ี
้
ี
็
แก่ Tag Seleciars นแล้วแท็กของ HTML ที่มชื่อเดียวกันกับ Sekeclas ชนตน กจะมคุณสมบัติ
ี
ของเว็บเพจนั้น
ี
วิธีกำรเรียกใช้งำน Selector ชนดน เรำไม่จ�ำเปนต้องมกำรเรียกใช้งำน เน่องจำกเม่อจุดใด
ิ
้
ื
ื
ี
็
ที่เว็บเพจมกำรเรียกใช้งำนแท็กชอง HTML ที่เปนชื่อเดียวกันกับ Selectors ที่เรำก�ำหนดไว้
ี
็
40 41