Page 44 - การสร้างเว็บไซต์
P. 44
่
็
ิ
3. รูปแบบของ Selector จากโปรแกรมจะแสดงผลค�าว่า รูปแบบตัวอักษรทีได้จะเปนรูปแบบชนด Tahoma
่
้
่
3.4 selecter อืนๆ นอกจากจะมีรูปแบบ Selectar ใน 3 รูปแบบทีได้กล่าวไปแล้วนน ยังมีการระบุ
ั
่
่
่
่
Selector ในรูปแบบอืน ๆ อีกหลายรูปแบบ ซึงจะเปนการเพิมความยืดหยุนในการเขียนไค้ต CSS
็
่
่ ้
่
้
ี
ั
็
่
้
Seleclor ใน CSS มีการเขียนใต้หลากหลายรูปแบบหรือเปาหมายทีแตกต่างกันออกไป มี โดยจะเริมต้นจากการผสมชือแทกและ Clas เข้าด้วยกัน ในทีนจะยกตัวอย่างบางรูปแบบเท่านน มี
้
ี
ดังน
้
ี
็
รายละเอียดดังนและในแต่ละรูปแบบกจะมีวัตถุประสงค์ 3.4.1 Grouping Seledter เข่น ถ้าเราสร ้าง Selectar เปนดังน ี ้
็
่
่
่
้
็
3.1 Class Selecters เปน Selector ทีต้องก�าหนดชือของ Selecior ขึนมาเอง โดยที Selecior hl(font-family: Helvetica)
่
้
ี
่
็
ในรูปแบบนจะอยูอย่างอิสระ ไมมีการอ้างอิงเกียวข้องกับแทก HTML ใดๆ การเรียกใช ้งานต้องระบุ h2(font-family: Helvetica)
่
็
ชีอ CksSeledtor กับแทกของ HTML จึงจะสามารถใช ้งานคุณสมบัติของ Class ได้ วิธีการเขียน h3(fonl-family. Helvetica)
่
้
้
้
่
ี
Selector ใพรูปแบบนเขียนได้โดยการตังชือ Seleciar ไว้หลังเครืองหมาย จุด ( . ) จากนนตาม เราสามารถเขียนให้อยูในรูปแบบ Selector แบบกลุมได้ ดังน ี ้
ั
่
่
ด้วย Properies เช่น hl, h2, h3(font-family: Helvetica)
img-leftf การท�าแบบนเปนลักษณะทีท�าให้โค้ดสันขึนซึงจะท�าให้ผลทีใด้ทัง b1, h2, 13 เปนรูปแบบฟอนด์
้
้
่
้
่
่
้
็
็
ี
border-bottom: Ipx solid #333. แบบเดียวกันทังหมด คือ ฟอนด์แบบ Helveica
้
border-left: Ipx solid #333, 3.4.2 Atribute Seiecdor เปนการแทรกค�าสัง CSร ลงในส่วนของแทกนนๆ โดยท�าหน้าที ่
้
่
็
็
ั
วิธีการเรียกใช ้งานสามารถเรียกใช ้งาน Claas Select๒r ได้โดยการใช ้ Aiสbue (Class แล้วตาม เปนเสมือนแอดทริบิวด์ของแทกนนๆ
้
ั
็
็
ด้วย 343 Descendant Seiecior เปนการสืบทอดคุณสมบัติ เช่น(li emfcolor.red;)
็
่
่
่
่
้
ชือ Class ทีต้องการเรียกใช ้งาน เช่น จากโค้ดท�างานโดยจะเลือกทุกๆ e๒ ทีอยูภายใต้ โดยเลือกทังหมดไมว่า en จะซ ้อนด้วยแทกอืนอีกที แต่ต้องมี 1
่
็
่
้
ั
่
<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 ชนตน กจะมีคุณสมบัติ
็
ิ
้
้
็
ั
ของ (0รเหมือนกันทังหมตภายในวบเพจนน
่
้
่
วิธีการเรียกใช ้งาน Selector ชนดน เราไมจ�าเปนต้องมีการเรียกใช ้งาน เนองจากเมือจุดใด
ิ
ี
่
ื
็
่
่
่
่
็
ทีเวบเพจมีการเรียกใช ้งานแทกชอง HTML ทีเปนชือเดียวกันกับ Selectors ทีเราก�าหนดไว้
็
็
้
คุณสมบัติของ CSSกจะถูกก�าหนดให้แก่แทกนนโดยอัตโนมัติ เช่น
็
็
ั
<head>
<title> Internal Style Sheet</title>
<style type="lext/css">
fomt (fomt-family: Tahoma;)
</style>
</head>
<body>
<fom>รูปแบบตัวอักษร</foml>
</body>
40 41
