css-learning: id และ class

id และ class

นอกจากการกำหนดค่า กำหนดรูปแบบให้เอกสาร html แล้ว css ยังสามารถให้คุณระบุ selectors ของคุณเองได้ นั้นก็คือการกำหนด id และ class

id selector

id selector ใช้ระบุคุณสมบัติเพียงหนึ่งเดียว ที่ไม่ซ้ำกันกับ element อื่นๆ นั้นหมายถึง id ที่มีชื่อเหมือนกันหนึ่ง id สามารถเรียกใช้ได้ครั้งเดียวในหนึ่งเอกสาร html
การตั้งชื่อ id ในไฟล์ css นั้นจะต้องนำหน้าด้วยเครื่องหมาย "#" และตามด้วยชื่อของ id ดังตัวอย่างด้านล่างนี้

การเขียน id ในเอกสาร css

#idname{color:#FF0000; font-size:12px;}

* การเขียน id ต้องขึ้นต้นด้วยเครื่องหมาย "#"
* ถัดมาจากเครื่องหมาย "#" นั้นเป็น ชื่อของ id ซึ่งในที่นี้ก็คือ "idname"

การเรียกใช้ id บน element ของ html จะเรียกใช้ดังตัวอย่างด้านล่างนี้

การเรียกใช้ id ในเอกสาร html

...

* ในที่นี้จะเรียกใช้ id บน tag ... ซึ่งเป็น element หนึ่งของเอกสาร html
* การเรียกใช้ id ทำไ้ด้ดังนี้คื่อ id="ชื่อของ id ใน css" ซึ่งในที่นี้ก็คือ "idname"

class selectors

class selector ใช้ระบุกลุ่มคุณสมบัติ ซึ่งแตกต่างจาก id selector ตรงที่เรียกใช้ class ที่มีคุณสมบัติเหมือนกันได้ใน element ต่างๆ ของเอกสาร html
การตั้งชื่อ class ในไฟล์ css นั้นจะต้องนำหน้าด้วยเครื่องหมาย "." และตามด้วยชื่อของ class ดังตัวอย่างด้านล่างนี้

การเขียน class ในเอกสาร css

.classname{color:#FF0000; font-size:12px;}

* การเขียน class ต้องขึ้นต้นด้วยเครื่องหมาย "."
* ถัดมาจากเครื่องหมาย "." นั้นเป็น ชื่อของ class ซึ่งในที่นี้ก็คือ "classname"

การเรียกใช้ class บน element ของ html จะเรียกใช้ดังตัวอย่างด้านล่างนี้

การเรียกใช้ class ในเอกสาร html

...

* ในที่นี้จะเรียกใช้ class บน tag ... ซึ่งเป็น element หนึ่งของเอกสาร html
* การเรียกใช้ class ทำไ้ด้ดังนี้คื่อ class="ชื่อของ class ใน css" ซึ่งในที่นี้ก็คือ "classname"

ทำความรู้จักกับ css ก่อนเริ่มเขียน css syntax และส่วนประกอบของ css id และ class รูปแบบการเขียน css การกำหนดลักษณะของ html โดยใช้ css background การกำหนดลักษณะพื้นหลัง text การกำหนดลักษณะข้อมูล font การกำหนดลักษณะตัวอักษร link การกำหนดลักษณะลิงค์ list การกำหนดลักษณะลิสต์ table การกำหนดลักษณะตาราง css model แบบจำลองของ css องค์ประกอบของ css model border ขอบเขตของข้อมูล margin padding