Image_01 Image_02 Image_03
Krumontree.com Krumontree.com Krumontree.com
Home
Internet and Browser
Create and Design
Basic HTML
Beautiful Images
Control with Table
Links to the others
More tips and Tricks
FTP to Web Hosting
left_bottom

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

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

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

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

    .comic {font-size:24pt;
                font-family:Comic Sans Ms,Cursive; color: #ff0000;
              }

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

บรรทัดล่างเป็นการใช้ Class ในสไตล์ชีต <H1 class="comic">Class is Cool!</H1>

yt ID : การใช้งาน 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; color: #ff0000;
              }

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

บรรทัดล่างเป็นการใช้ ID ในสไตล์ชีต <H1 ID="myID">StyleSheet with ID is Cool!</H1>

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

      A:LINK { color: #0000cc; text-decoration: none}
      A:VISITED { color: #990099; text-decoration: none}
      A:ACTIVE { color: #006600; text-decoration: underline}
      A:HOVER { color: #006600; text-decoration: underline; font-weight: bold}

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

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

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

การใช้ Span ในสไตล์ชีต <SPAN class="comic">Wow! SPAN is Cool & Nice!</SPAN>

เย้!.... สุดยอดเลย
More Technics of StyleSheet » » Class & ID | Grouping | Refference Properties

 

Your visitor no.
Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta     e-M@il : webmaster at krumontree.com