Page 34 - การสร้างเว็บไซต์
P. 34
็
2.2 ลักษณะกำรใช ้งำน CSS แบ่งออกเปน 3 แบบ คือ 3. รูปแบบของ Selector
่
็
็
2.2.1 แบบ Inline เปนกำรเขียนโค้ด Css ลงไปในแทก HTML ทีต้องกำรให้เกิดกำรแสดง
้
้
ั
็
ั
ผลและจะมีผลต่อแทกนนๆ เท่ำนน โดยมีรูปแบบดังน ี ้
<tag style="property:value; property:value," Seleclor ใน CSS มีกำรเขียนใต้หลำกหลำยรูปแบบหรือเปำหมำยทีแตกต่ำงกันออกไป มี
่
้
่
้
แอfทริบิวด์ style ใช ้ในกำรก�ำหนดค่ำสไตล์พร็อปเพอร ์ตีต่ำงๆ ซึงจะอยูในรูปของ "property- รำยละเอียดดังนและในแต่ละรูปแบบกจะมีวัตถุประสงค์
่
้
็
ี
value" 3.1 Class Selecters เปน Selector ทีต้องก�ำหนดชือของ Selecior ขึนมำเอง โดยที Selecior
่
่
้
่
็
่
่
่
หำกมีมำกกว่ำหนงชุดให้ใช ้เครืองหมำย Semicolon "" คัน ตัวอย่ำงเช่น ในรูปแบบนจะอยูอย่ำงอิสระ ไมมีกำรอ้ำงอิงเกียวข้องกับแทก HTML ใดๆ กำรเรียกใช ้งำนต้องระบุ
ึ
่
้
ี
็
่
่
<id style='font-family courier, padding:spx; border style: solid border-width-lpr ชีอ CksSeledtor กับแทกของ HTML จึงจะสำมำรถใช ้งำนคุณสมบัติของ Class ได้ วิธีกำรเขียน
็
border-color:#000000"> Selector ใพรูปแบบนเขียนได้โดยกำรตังชือ Seleciar ไว้หลังเครืองหมำย จุด ( . ) จำกนนตำม
่
่
้
้
้
ี
ั
่
็
็
่
ในตัวอย่ำงข้ำงต้นก�ำหนดสตล์ให้กับแทก <d> ส�ำหรับกำรเขียนแบบ inline ไมเปนทีนยม ด้วย Properies เช่น
ิ
้
่
ั
มำกนก เนองจำกต้องเขียนโค้ด CSS ลงไปในแทก HTML ดังนนจึงไมสำมำรถนำสไตล์ไปประยุกต์ img-leftf
็
�
ื
ั
่
ใช ้กับแทก border-bottom: Ipx solid #333.
็
็
2.2.2 แบบ Embedded เปนกำรเขียนโค้ด CSS ลงไปในไฟส์ HIML เช่นกัน แต่จะรวมโค้ด border-left: Ipx solid #333,
้
CSS ทังหมดไว้ภำยใต้แทก <head> โดยมีรูปแบบดังน ี ้ padding: 00 4px 4px;
็
<head> doat: left;
<tile></itle>
<style type=*tex/css"> margin: 6px 10px 6px 0
selector ( วิธีกำรเรียกใช ้งำนสำมำรถเรียกใช ้งำน Claas Select๒r ได้โดยกำรใช ้ Aiสbue (Class แล้วตำม
property:value, ด้วย
่
่
property:value, ชือ Class ทีต้องกำรเรียกใช ้งำน เช่น
</style> <p>cing cass="lmg-left" sc:"Images/intro jpg" width="100' height="100/></
</head> p>
็
็
กำรกำหนดสไตล์จะถูกกำหนดไว ้ภำยในเเทก <Style> ซึ่งอยู่ภำยในเเทก<head>กำรกำหนดสไตล์จะ ่ ่ ่
�
�
�
่
็
็
เริ่มต ้นด ้วยกำรระบุเเทกที่ต ้องกำร (Selector) จำกน้นจึงจะเปนสไตล์หรือพรอปเพอร์ตี้ property:value 3.2. ID Seledters เปน Selecior ทีอ้ำงอิงกับ Aเuibate ID ทีอยูภำยในแทกของ HTMI. โดยที
็
็
็
ั
่
่
็
ต่ำงๆภำยในเครื่องปกกำ เเต่ละชุดจะถูกคั่นด ้วยเครื่องหมำย, (Semicolon) ตัวอย่ำงเช่น แทกของ HTML ใดมี ID ตรงตำม ID Selctos ทีเรำก�ำหนดไว้ คุณสมบัติของ CSS ทีเรำก�ำหนด
ี
<head> ไว้กับ Selector
<title> Internal Style sheet </title> กจะมีผลต่อแทกนนทันที วิธีกำรเขียน ID Selectors สำมำรถเชียนได้โดยกำรเขียนชือ Seeclor
้
่
็
ั
็
<style type="lex/css"> ตำมหลัง
body ( ่
color:#000000 เครืองหมำยช"รัป (#) เช่น
background-color:#mnt theader(hackground unil(nages /ransparem giD) repeat
fomt-family:arial, verdana, sans-serif, helght 90px
้
h1 (fomt-size:18pt) วิธีกำรเรียกใช ้งำนสำมำรถเรียกใช ้ ID Selector นใต้โดยก�ำหนด Aแribue ID ภำยในแทก
็
ี
่
p(foml-size:12pt.) ทีต้องกำรเรียกใช ้งำนคุณสมบัติ CSS รำก ID Selectos ให้มีควำมสัมพันธ์กับ Selector เช่น
<head> <div id "header">
่
็
2.2.3 เเบบ External เปนกำรเขียนเเบบเเยกโค้ด CSS ออกมำยังไฟล์ทีเเยกต่ำงหำก ซึง ่ <ing se="images/logo. png" widh="90" height="90'/>
่
่
่
จะอยูคนละทีกับไฟล์ HTML โดยจะมีนำมสกุลไฟล์ CSS ซึงจะมีกำรเรียกร ้องใช ้รูปเเบบ CSS จำก <h1>ชมรมนกพัฒนำเวย HTML.<br />
็
ั
่
ไฟล์ HTML โดยมีรูปเเบบในกำรเขียน คือ จะเเบ่งออกเปน 2 ไฟล์ คือไฟล์ทีเปนหน้ำเวบเพจหรือ <p>1อต้อนรับสูเวไซด์สอนกำรเขียนโปรแกรมภำษำ HTML</spa>
็
็
็
่
็
่
็
ไฟล์ HTML กับไฟล์ทีเปน CSS เช่น </hl>
ส่วนของไฟล์ HTMI: </div>
<head> 3.3 Tag Seeciers เปน Seector ทีอ้ำงอิงกับแทกของ HTML ถ้หำกมีกำรก�ำหนดคุณสมบัติให้แก่
่
็
็
<title></title> Tag Seleciars นแล้วแท็กของ HTML ทีมีชือเดียวกันกับ Sekeclas ชนิตนี ก็จะมีคุณสมบัติของ
้
่
่
้
ี
<link rel="stylesheet" type="tex/css" href="filename.css"/> (0รเหมือนกันทังหมตภำยในวบเพจนน วิธีกำรเขียน Tag Sekciors สมำรถชียนได้โดยกำรเซียน
้
้
็
ั
</head> ชือแทกของHTMLหน้ำเครืองหมำยบิกกำ .... เช่น ต้องกำรก�ำหนดให้แทก fงแ ของ HTML ใน
่
่
็
็
ส่วนของไฟล์ CSS: เวบเพจนนมีคุณสมบัติใช ้ โดย ทีมีรูปแบบเปน โa๓ะ ทังหมด กพิมพ์ชือแทกเพือก�ำหนดคุณสมบัติ
้
่
้
่
่
็
็
็
ั
็
selector, property value; property value; .... ลงไป
34 35
