Css3 Chapter3 : Class and ID Introduction เปิดโลกใหม่

Css3 Chapter3 : Class and ID Introduction เปิดโลกใหม่

Css3

Chapter3 : Class and ID Introduction 

ในChapter1 เราได้รู้วิธีการใช้ 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> ธรรมดามีสีแดงไปด้วย

คนที่ทำเว็บคงน่าจะรู้จัก css กันเป็นอย่างดีอยู่แล้วซึ่งเป็นสิ่งสำคัญที่ขาดไม่ได้ในการออบแบบเว็บไซต์

ซึ่งผมก็รู้จักแต่ไม่ได้รู้ลึกซึ้งส่วนใหญ่ก็จะหา css สวยๆ ที่มีแจกมาใช้งาน ก็เลยลองมาเริ่มศึกษา css อย่างลึกซึ้ง
เพื่อเอาไปใช้ในการออกแบบเว็บ เพราะความสามารถมันไม่มีขีดจำกัดจริงๆ ลองมาทำความรู้ css กันก่อนครับ

CSS ย่อมาจาก Cascading Style Sheets เป็นตัวกำหนดรูปแบบการแสดงของ tag html
ซึ่งการเขียน css จะอยู่ในส่วนของ head อยู่ระหว่าง <style type=”text/css”> …. </style>

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

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

CODE

.testClass {font-size:15pt; font-family:Tahoma; }

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

CODE

<H1 class=testClass>CSS Class Object Test....</H1>

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

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

CODE

#TestID {font-size:15pt; font-family:Tahoma; }

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

หลักไวยากรณ์ของ CSS Pseudo-classes

หลักการประกาศค่าใน pseudo-classes

CODE

selector:pseudo-class {property: value}

หลักการประกาศค่าเมื่อต้องการนำ CSS Class มาใช้กับ pseudo-classes

CODE

selector.class:pseudo-class {property: value}

ตัวอย่าง pseudo-classes

CODE

a:link {color: #FF0000}     /* unvisited link */ a:visited {color: #00FF00}  /* visited link */ a:hover {color: #FF00FF}   /* mouse over link */ a:active {color: #0000FF}   /* selected link */

ตัวอย่างเมื่อต้องการนำ CSS Class มาใช้กับ pseudo-classes

CODE

a.red:visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syntax</a>

เอาพอแค่นี้ก่อนนะครับ ขอให้มีความสุขกับเทคโนโลยีสมัยใหม่กรุณาใช้ไปในทางที่ดีๆด้วยนะครับอย่าลืม... ตอนต่อไปจะเป็นการสอนเกี่ยวกับCss แบบใดไว้มาติดตามกันนะครับ

ติดตาม เพิ่มเพื่อนและติดตาม Webmaster Pocky GunSanguine.