การใช้ id และ class ใน CSS

| ไอที | CSS | 31035

วิธีการใช้ id และ class ใน CSS

แต่ก่อนเราใช้ HTML ในการกำหนดคุณลักษณะ เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้ แต่เดี๋ยวนี้เรายังสามารถกำหนด ลักษณะให้กับ เอกสาร HTML ได้ โดยใช้สคลิปที่เรียกว่า CSS ซึ่งได้รับความนิยมอย่างมากและคาดว่า ในปัจจุบัน การกำหนดลักษณะของเอกสาร HTML จะย้ายมาอยู่ในสคลิป CSS ทั้งหมด ซึ่งการกำหนดลักษณะนั้น จะกำหนดผ่าน id และ class

การเลือกใช้ id 
- การเลือกใช้ id จะใช้เพื่อกำหนดลักษณะสำหรับองค์ประกอบเดียว ที่ไม่ซ้ำกัน
- การใช้ id จะใช้ในแอททริบิว id ของ html
- การใช้ id ใน CSS จะถูกกำหนดด้วยเครื่องหมาย #

ตัวอย่างการใช้งาน id

#myid
{
  color:#FF0000;
}

คำสั่ง color นี้เป็นคำสั่งสำหรับกำหนดสีของตัวอักษร ซึ่ง #FF0000 จะทำให้ตัวอักษรมีสีเป็นสีแดง
คำว่า myid คือชื่อ id ที่เราตั้งขึ้น เราสามารถตั้งเป็นชื่ออะไรก็ได้ เมื่อต้องการเรียกใช้ ให้เขียนโค้ดตามนี้

<div id="mydiv">นี่คือ id</div>

เมื่อรันแล้วจะได้ดังนี้

นี่คือ id

ตัวอย่างต่อไปของการใช้งาน id

#myid2
{
  color:#FF0000;
  text-decoration:underline;
}

คำสั่ง color นี้เป็นคำสั่งสำหรับกำหนดสีของตัวอักษร ซึ่ง #FF0000 จะทำให้ตัวอักษรมีสีเป็นสีแดง
คำสั่ง text-decoration เป็นการกำหนดการแต่งตัวอักษร ซึ่ง underline เป็นการบอกให้มีขีดเส้นใต้ ใต้ตัวอักษร

คำว่า myid2 คือชื่อ id ที่เราตั้งขึ้น เราสามารถตั้งเป็นชื่ออะไรก็ได้ เมื่อต้องการเรียกใช้ ให้เขียนโค้ดตามนี้

<div id="myid2">นี่คือ id2</div>

เมื่อรันแล้วจะได้ดังนี้

นี่คือ id2

** เราสามารถใส่ลักษณะกี่ลักษณะก็ได้ในหนึ่งไอดี **

การเลือกใช้ class
- การเลือกใช้ class จะใช้เพื่อกำหนดลักษณะรูปแบบที่เป็นมีลักษณะองค์ประกอบเป็นกลุ่ม ซึ่งแตกต่างจาก id
- การใช้ class จะใช้ในแอททริบิว class ของ html
- การใช้ class ใน CSS จะถูกกำหนดด้วยเครื่องหมายจุด .

ตัวอย่างการใช้งาน class

.myclass
{
  color:#00FF00;
}

คำสั่ง color นี้เป็นคำสั่งสำหรับกำหนดสีของตัวอักษร ซึ่ง #00FF00 จะทำให้ตัวอักษรมีสีเป็นสีเขียว 
คำว่า myclass คือชื่อ class ที่เราตั้งขึ้น เราสามารถตั้งเป็นชื่ออะไรก็ได้ เมื่อต้องการเรียกใช้ ให้เขียนโค้ดตามนี้

<div class="myclass">นี่คือ class</div>

เมื่อรันแล้วจะได้ดังนี้

นี่คือ class

ตัวอย่างต่อไปของการใช้งาน class

.myclass2
{
  color:#00FF00;
  text-decoration:underline;
}

คำสั่ง color นี้เป็นคำสั่งสำหรับกำหนดสีของตัวอักษร ซึ่ง #00FF00 จะทำให้ตัวอักษรมีสีเป็นสีเขียว
คำสั่ง text-decoration เป็นการกำหนดการแต่งตัวอักษร ซึ่ง underline เป็นการบอกให้มีขีดเส้นใต้ ใต้ตัวอักษร
คำว่า myclass2 คือชื่อ class ที่เราตั้งขึ้น เราสามารถตั้งเป็นชื่ออะไรก็ได้ เมื่อต้องการเรียกใช้ ให้เขียนโค้ดตามนี้

<div class="myclass2">นี่คือ class2</div>

เมื่อรันแล้วจะได้ดังนี้

นี่คือ class2

** เราสามารถใส่ลักษณะกี่ลักษณะก็ได้ในหนึ่งคลาส **

แล้วเมื่อไหร่ควรจะใช้ class เมื่อไหร่ควรจะใช้ id ละ

เวลาเขียนใหม่ ๆ หลายคนอาจจะงง ๆ และเขียนตามที่อยากเขียน บางคนก็เขียนคลาสอย่างเดียว บางคนก็เขียนเฉพาะไอดีอย่างเดียว หรือบางคนก็ใช้มั่ว คลาสบ้างไอดีบ้าง ตามอารมณ์ แต่เราควรเขียนให้ถูกตามหลักจะดีกว่า เพราะการเลือกใช้นั้นไม่ยากเลย

เวลาใช้ไอดี ควรเป็นการกำหนดลักษณะใช้เพียงครั้งเดียว ไม่ซ้ำกัน เช่น การใช้กับแท็ก div span และอื่น ๆ
เวลาใช้คลาส ควรเป็นการกำหนดลักษณะที่ใช้บ่อย ๆ ซ้ำ ๆ กัน หรือกำหนดลักษณะที่เป็นกลุ่ม เช่น การใช้กับแท็ก a p และอื่น ๆ

comments




เว็บเพื่อนบ้าน
DoesystemDevcodeMathMySelfHowToClicksBlogJavaExample