Page 34 - การสร้างเว็บไซต์
P. 34
่
2. รูปเเบบค�าสัง css 3. รูปแบบของ Selector
่
้
่
2.1 รูปเเบบของค�าสัง css จะประกอบไปด้วย 2 ส่วนใหญ่ๆ คือ Seleclor ใน CSS มีการเขียนใต้หลากหลายรูปแบบหรือเปาหมายทีแตกต่างกันออกไป มี
้
ี
่
็
่
2.1.1 Selector คือ ส่วนของค�าสัง HTML หรือ Tag ทีเราต้องการให้เเสดงผล เช่น table รายละเอียดดังนและในแต่ละรูปแบบกจะมีวัตถุประสงค์
่
้
่
่
็
็
็
็
กจะเเสดงในส่วนของตาราง, a กจะเปนการลิงก์, h1 กจะเปนขนาดตัวอักษร เปนต้น 3.1 Class Selecters เปน Selector ทีต้องก�าหนดชือของ Selecior ขึนมาเอง โดยที Selecior
็
็
็
้
่
่
็
่
ี
2.1.2 Declaration คือ ส่วนของการก�าหนดค่าให้กับ Selector ประกอบไปด้วย 2ส่วน ในรูปแบบนจะอยูอย่างอิสระ ไมมีการอ้างอิงเกียวข้องกับแทก HTML ใดๆ การเรียกใช ้งานต้องระบุ
็
ได้เเก่ ชีอ CksSeledtor กับแทกของ HTML จึงจะสามารถใช ้งานคุณสมบัติของ Class ได้ วิธีการเขียน
่
้
้
่
้
ั
่
ี
1) Property คือ ส่วนของคุณสมบัติทีเราต้องการให้เเสดง เช่น สีตัวอักษร, ชนดตัวอักษร, ขนาด Selector ใพรูปแบบนเขียนได้โดยการตังชือ Seleciar ไว้หลังเครืองหมาย จุด ( . ) จากนนตาม
ิ
้
ตัวอักษร, สี, พืนหลัง เปนต้น ด้วย Properies เช่น
็
่
่
2) Value คือ ค่าทีเราต้องก�าหนดให้กับ Property หรือเปนค่าทีเราต้องการให้เเสดง เช่น ตัว img-leftf
็
็
อักษรสีเขียว,ตัวอักษรเเบบ Tahoma, ตัวอักษรขนาด 10pt เปนต้น border-bottom: Ipx solid #333.
2.2 ลักษณะการใช ้งาน CSS แบ่งออกเปน 3 แบบ คือ border-left: Ipx solid #333,
็
่
็
2.2.1 แบบ Inline เปนการเขียนโค้ด Css ลงไปในแทก HTML ทีต้องการให้เกิดการแสดง วิธีการเรียกใช ้งานสามารถเรียกใช ้งาน Claas Select๒r ได้โดยการใช ้ Aiสbue (Class แล้วตาม
็
้
้
ั
ผลและจะมีผลต่อแทกนนๆ เท่านน โดยมีรูปแบบดังน ี ้ ด้วย
็
ั
่
่
<tag style="property:value; property:value," ชือ Class ทีต้องการเรียกใช ้งาน เช่น
้
แอfทริบิวด์ style ใช ้ในการก�าหนดค่าสไตล์พร็อปเพอร ์ตีต่างๆ <p>cing cass="lmg-left" sc:"Images/intro jpg" width="100' height="100/></
2.2.2 แบบ Embedded เปนการเขียนโค้ด CSS ลงไปในไฟส์ HIML เช่นกัน แต่จะรวมโค้ด p>
็
่
่
้
่
็
็
CSS ทังหมดไว้ภายใต้แทก <head> โดยมีรูปแบบดังน ี ้ 3.2. ID Seledters เปน Selecior ทีอ้างอิงกับ Aเuibate ID ทีอยูภายในแทกของ HTMI. โดยที ่
็
่
่
็
<head> แทกของ HTML ใดมี ID ตรงตาม ID Selctos ทีเราก�าหนดไว้ คุณสมบัติของ CSS ทีเราก�าหนด
<tile></itle> ไว้กับ Selector
้
<style type=*tex/css"> วิธีการเรียกใช ้งานสามารถเรียกใช ้ ID Selector นใต้โดยก�าหนด Aแribue ID ภายในแทก
ี
็
่
็
2.2.3 เเบบ External เปนการเขียนเเบบเเยกโค้ด CSS ออกมายังไฟล์ทีเเยกต่างหาก ซึง ่ ทีต้องการเรียกใช ้งานคุณสมบัติ CSS ราก ID Selectos ให้มีความสัมพันธ์กับ Selector เช่น
่
่
่
่
จะอยูคนละทีกับไฟล์ HTML โดยจะมีนามสกุลไฟล์ CSS ซึงจะมีการเรียกร ้องใช ้รูปเเบบ CSS จาก <div id "header">
่
็
็
ไฟล์ HTML โดยมีรูปเเบบในการเขียน คือ จะเเบ่งออกเปน 2 ไฟล์ คือไฟล์ทีเปนหน้าเวบเพจหรือ <ing se="images/logo. png" widh="90" height="90'/>
็
่
ไฟล์ HTML กับไฟล์ทีเปน CSS เช่น <h1>ชมรมนกพัฒนาเวย HTML.<br />
็
ั
็
ส่วนของไฟล์ HTMI: 3.3 Tag Seeciers เปน Seector ทีอ้างอิงกับแทกของ HTML ถ้หากมีการก�าหนดคุณสมบัติให้
่
็
็
<head> แก่ Tag Seleciars นแล้วแทกของ HTML ทีมีชือเดียวกันกับ Sekeclas ชนตน กจะมีคุณสมบัติ
่
้
่
้
ี
็
็
ี
ิ
<title></title> ของ (0รเหมือนกันทังหมตภายในวบเพจนน
้
้
็
ั
่
้
่
<link rel="stylesheet" type="tex/css" href="filename.css"/> วิธีการเรียกใช ้งาน Selector ชนดน เราไมจ�าเปนต้องมีการเรียกใช ้งาน เนองจากเมือจุดใด
ี
็
ิ
ื
่
่
่
</head> ทีเวบเพจมีการเรียกใช ้งานแทกชอง HTML ทีเปนชือเดียวกันกับ Selectors ทีเราก�าหนดไว้
่
่
็
็
็
้
ั
็
็
คุณสมบัติของ CSSกจะถูกก�าหนดให้แก่แทกนนโดยอัตโนมัติ เช่น
<head>
<title> Internal Style Sheet</title>
<style type="lext/css">
fomt (fomt-family: Tahoma;)
</style>
</head>
<body>
<fom>รูปแบบตัวอักษร</foml>
</body>
34 35
