Cascading Style Sheet
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

บทที่ 2 การใช้ Class และ ID

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

การใช้ Class

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

วิธีกำหนด Style Sheet ให้ Class

          ให้ใช้จุด "." นำหน้าชื่อ class ซึ่งชื่อ class เป็นชื่อที่ท่านสามารถตั้งได้ตามความพอใจ เช่น .myclass {font-size:24pt; font-family:Comic Sans Ms,Cursive; }

วิธีการนำ Class มาใช้

          ให้เพิ่ม Attribute ชื่อ "class=" ลงไปใน Tag แล้วใส่ชื่อคลาสลงไป โดยจะมีเครื่องหมายคำพูด "..." หรือไม่ก็ได้ <H1 class=myclass>CSS Cool!</H1>

การใช้ ID

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

วิธีกำหนด Style Sheet ให้ ID

          ให้ใช้เครื่องหมาย "#" นำหน้าชื่อ ID ซึ่งชื่อ ID เป็นชื่อที่ท่านสามารถตั้งได้ตามความพอใจ เช่น #myID {font-size:24pt; font-family:Comic Sans Ms,Cursive; }

วิธีการนำ ID มาใช้

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

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 นั้น สามารถทำได้ดังตัวอย่างข้างล่าง

a:hover { color:green; font-weight: bold; text-decoration: underline; } a:hover.myClass { color:blue; font-weight: bold; text-decoration: underline; } a:hover#myID { color:red; font-weight: bold; text-decoration: underline; }

ขอแนะนำ <SPAN>

ในการนำ Style Sheet มาใช้นั้น เราจำเป็นต้องใช้ Tag ใน HTML ซึ่ง Tag เหล่านั้นจะมีผลกับตัวอักษรและข้อความ เช่น <P> จะทำให้เกิดการขึ้นบรรทัดใหม่ ปัญหาก็คือ ถ้าเราต้องการกำหนด Style ของตัวอักษรเพียงบางส่วนของย่อหน้า โดยไม่ต้องการให้มีผลกระทบกับการวางตัวของข้อความจะทำได้อย่างไร คำตอบของปัญหานี้ก็คือ เราต้องใช้ Tag ของ HTML ที่ไม่ทำให้เกิดผลใดๆต่อตัวอักษรและข้อความ แล้วเราค่อยใส่ Style ให้มันด้วยการใช้ Class หรือ ID เพื่อกำหนดรูปแบบที่เราต้องการ และ Tag นั้นก็คือ <SPAN> นั่นเองครับ Wow! <span ID=myID>CSS Cool!</span> Real Cool!

Back to top | Next Charpter >>





© copyright 2001 Sorrawut Korsuwansiri