StyleSheet » » Class & ID | Grouping | Refference Properties

เราได้เรียนรู้การใช้งานของ StyleSheet ไปแล้วจะเห็นว่า มีข้อดีในการควบคุมเว็บเพจให้เป็นไปดังความต้องการของเรา และเป็นรูปแบบเดียวกันทั้งเว็บ แต่ก็ยังมีข้อเสียอยู่ที่เราต้องเสียคำสั่ง HTML ไป 1 คำสั่งทีเดียว เช่น เมื่อมีการกำหนดให้ <H1> มีขนาด 16 พอยต์ และเป็นสีแดง ถ้าเราอยากให้บางหน้าคำสั่งนี้แสดงผลแตกต่างจากนี้ไม่ได้ แต่เราก็มีทางแก้ด้วยการใช้ Class & ID ในสไตล์ชีตของเรา

Class : การใช้งาน Class

Class ในความหมายของ CSS ก็คือ กลุ่มของ Object ที่เราจะกำหนดให้ใช้ Style เดียวกัน ซึ่ง Object ที่ว่านี้ก็คือ Tag ใน HTML นั่นเอง การใช้ Class จะทำให้เราสามารถกำหนดลักษณะพิเศษสำหรับ Object ที่ถูกกำหนดให้อยู่ใน Class นั้นได้โดยไม่ไปรบกวน Object ที่ไม่ได้อยู่ใน Class เช่น ถ้าเรากำหนด <H1 class="A"> ซึ่งอยู่ใน Class A ให้มีสีแดง ก็จะไม่ทำให้ <H1> ธรรมดามีสีแดงไปด้วย

วิธีกำหนด Style Sheet ให้ Class ให้ใช้จุด "." นำหน้าชื่อ class ซึ่งชื่อ class เป็นชื่อที่ท่านสามารถตั้งได้ตามความพอใจ เช่น

วิธีการนำ Class มาใช้ ให้เพิ่มคุณสมบัติชื่อ "class=" ลงไปใน Tag แล้วใส่ชื่อคลาสลงไป โดยจะมีเครื่องหมายคำพูด "..." หรือไม่ก็ได้

ID : การใช้งาน ID

การใช้ ID จะให้ผลเหมือนกับการใช้ Class แต่เราจะใช้กับ Object เพียง Object เดียวเท่านั้น ดังนั้น ในเวบเพจ หน้าหนึ่งๆ ไม่ควรมี Tag ที่ระบุ ID เดียวกันมากกว่า 1 Tag การใช้ ID จะมีประโยชน์มากเมื่อท่านใช้ CSS ร่วมกับ JavaScript ซึ่งมีการกำหนดให้ Object คลื่อนย้ายตำแหน่ง หรือใช้ในการซ่อน/แสดง Object

วิธีกำหนด Style Sheet ให้ ID ให้ใช้เครื่องหมาย "#" นำหน้าชื่อ ID ซึ่งชื่อ ID เป็นชื่อที่ท่านสามารถตั้งได้ตามความพอใจ เช่น

วิธีการนำ ID มาใช้ ให้เพิ่ม Attribute ชื่อ "id=" ลงไปใน Tag แล้วใส่ชื่อ ID ลงไป โดยจะมีเครื่องหมายคำพูด "..." หรือไม่ก็ได้

Pseudo Class : การใช้งาน Pseudo Class

Pseudo Class เป็นคลาสที่มีอยู่แล้วใน CSS มีอยู่ 4 ตัวคือ A:link, A:visited, A:active, A:hover ซึ่ง Style ที่ถูกกำหนดใน Pseudo Class จะถูกนำมาใช้โดยอัตโนมัติเมื่อเกิดเหตุการณ์ที่ตรงกับ Pseudo Class นั้น เช่น A:visited จะไปกำหนด Style ให้กับ Links ที่เคยไปมาแล้ว เป็นต้น ส่วนวิธีกำหนด Style ให้กับ Pseudo Class นั้น สามารถทำได้ดังตัวอย่างข้างล่าง

SPAN : การใช้งาน SPAN

ในการนำ Style Sheet มาใช้นั้น เราจำเป็นต้องใช้ Tag ใน HTML ซึ่ง Tag เหล่านั้นจะมีผลกับตัวอักษรและข้อความ เช่น <P> จะทำให้เกิดการขึ้นบรรทัดใหม่ ปัญหาก็คือ ถ้าเราต้องการกำหนด Style ของตัวอักษรเพียงบางส่วนของย่อหน้า โดยไม่ต้องการให้มีผลกระทบกับการวางตัวของข้อความจะทำได้อย่างไร

คำตอบของปัญหานี้ก็คือ เราต้องใช้ Tag ของ HTML ที่ไม่ทำให้เกิดผลใดๆ ต่อตัวอักษรและข้อความ แล้วเราค่อยใส่ Style ให้มันด้วยการใช้ Class หรือ ID เพื่อกำหนดรูปแบบที่เราต้องการ และ Tag นั้นก็คือ <SPAN> นั่นเองครับ