HTML Classes and Id

1.Classes

คลาสเป็นแอตทริบิวต์หรือ คุณสมบัติที่ใช้ในการระบุ element ซึ่งคลาสหนึ่งคลาสสามารถใช้ร่วมกันได้หลาย element โดยปกติมีการใช้คุณสมบัติคลาสเพื่อระบุ element ให้กับ stylesheet อีกทั้งยังช่วยให้ javaScript เข้าถึงและจัดการกับ element ได้ด้วย

ตัวอย่างที่ 1 Single Class การใช้คุณสมบัติคลาส (คลาสเดียว)

<html>
 <head>
  <style>
   .animal{
   	border:6px dotted orange;
    margin: 12px;
    padding: 10px;
   }
   h1{
   	color:grey;
   	text-shadow:2px 2px 3px white;
   }
   p{
    color:red;
   	text-shadow:1px 1px 3px white;
   }
  </style>
 </head>
 
 <body>
 
  <div class="animal">
   <h1>สิงโต</h1>
   <p>เจ้าป่า</p>
  </div>
  
  <div class="animal">
   <h1>เสือชีตาห์</h1>
   <p>เจ้าความเร็ว</p>
  </div>
  
  <div class="animal">
   <h1>เหยี่ยว</h1>
   <p>เจ้าเวหา</p>
  </div>
  
 </body>
</html>

ไฟล์ที่ 1 การใช้คุณสมบัติคลาส

จากไฟล์ที่ 1 เป็นการใช้คุณสมบัติคลาสเพื่อระบุ element ในการจัดรูปแบบด้วย CSS ซึ่งจะสังเกตได้ว่า ในแท็ก <div> ใช้คุณสมบัติคลาส ที่มีค่าเป็น “animal” เหมือนกันทั้งหมด ซึ่งจะทำให้รูปแบบการแสดงผลที่ใช้ CSS ในการกำหนดจะเหมือนกันทั้งหมด

  • <div> เป็นแท็กที่่เปรียบเสมือนเป็นภาชนะสำหรับบรรจุ element ต่างๆ นั่นเอง

 

ตัวอย่างที่ 2 Multiple Class การใช้คุณสมบัติคลาส (หลายคลาส)

<html>
 <head>
  <style>
   .animal{
   	border:6px dotted orange;
    margin: 12px;
    padding: 10px;
   }
   .last{
   	text-align:center;
    background-color:lightgreen;
   }
   h1{
   	color:grey;
   	text-shadow:2px 2px 3px white;
   }
   p{
    color:red;
   	text-shadow:1px 1px 3px white;
   }
  </style>
 </head>
 
 <body>
 
  <div class="animal">
   <h1>สิงโต</h1>
   <p>เจ้าป่า</p>
  </div>
  
  <div class="animal">
   <h1>เสือชีตาห์</h1>
   <p>เจ้าความเร็ว</p>
  </div>
  
  <div class="animal last">
   <h1>เหยี่ยว</h1>
   <p>เจ้าเวหา</p>
  </div>
  
 </body>
</html>

ไฟล์ที่ 2 ใช้คุณสมบัติคลาส (หลายคลาส)

ไฟล์ที่ 2 ในบรรทัดที่ 36 ได้มีการเพิ่มคลาสให้กับ element เป็น 2 คลาส ด้วยการเว็นวรรค จากนั้นพิมพ์ชื่อคลาส เพื่อสร้างความแตกต่างในการแสดงผล (หากต้องการ)

 

2.Id

Id หรือไอดี เป็นคุณสมบัติที่คล้ายกับ คลาส เพียงแต่ไอดีจะควรระบุ element แบบเฉพาะเจาะจง ตัวอย่างการใช้ไอดี

ตัวอย่างที่ 3 การใช้ไอดี

<html>
  <head>
    <style>
      #i01 {
        background-color: lightgreen;
        color: black;
        text-shadow:3px 3px 2px grey;
        padding: 40px;
        text-align: center;
      } 
      #i02 {
        background-color: pink;
        color: black;
        text-shadow:3px 3px 2px grey;
        padding: 40px;
        text-align: center;
      } 
  </style>
  </head>
  
  <body>
    <h1 id="i01">ID : 1</h1>
    <h1 id="i02">ID : 2</h1>
  </body>
</html>

ไฟล์ที่ 3 การใช้ไอดีเพื่อระบุ element

 

สรุป Class และ Id

จากตัวอย่างทั้งหมดที่มีการใช้งาน class และ id จะสังเกตได้ว่า

กรณีที่มีการใช้ style

  • เมื่อต้องการชี้ไปยัง id จะต้องขึ้นต้นด้วย  # 
  • ส่วนถ้าหากต้องการชี้ไปที่ class จะขึ้นต้นด้วย  .  

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: