imkopkap

#3 CSS: รู้จักกับ Class และ ID

ใช้เวลา 6 นาที 10/11/2014

การสร้าง Class และ ID

Class และ ID จำเป็นอย่างมาก ในการที่จะกำหนด CSS ให้กับแท็กนั้นๆ

สำหรับการใช้ Class เราสามารถกำหนดให้แท็กเราได้แบบนี้ครับ แก๊ปใช้แท็กที่ชื่อว่า h1 แล้วเพิ่ม Class ที่ชื่อว่า header เข้าไป

 

 

<h1 class="header">Hello World</h1>

สำหรับการใช้ ID นะครับ จะเป็นแบบนี้ โดยผมกำหนดให้ แท็ก h1 มี ID ที่ชื่อว่า heading

<h1 id="heading">Hello World</h1>

 

การกำหนด CSS ให้กับ Class และ ID

สำหรับการใช้ Class นะครับ เราจะใช้ ” . ” (จุด) เป็นการกำหนดว่า เราจะเพิ่ม CSS โดย Class ให้นะ จากนั้นตามด้วยชื่อ Class ครับ

.header {
    color:#fff;
    background-color:#2980b9;
    padding:10;
}

สำหรับการใช้ ID เราจะใช้ ” # ” (ชาร์ป) เพื่อกำหนดว่าเราจะใช้ ID ในการกำหนด CSS นะ จากนั้นก็ตามด้วยชื่อเช่นกันกับ Class ครับ

#heading {
    color:#fff;
    background-color:#2c3e50;
    padding:10;
}

 

บันทึกแนะนำ