ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytสไตล์ชีต (Style Sheet)


ความรู้เบื้องต้นเกี่ยวกับ CSS | การกำหนดกลุ่มของ CSS ด้วย Object Class| การกำหนดกลุ่มของ CSS ด้วย Grouping | คำสั่งอ้างอิง CSS

เราได้เรียนรู้การใช้งานของ 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>

Click to TOP
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>

Click to TOP
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}

Click to TOP
yt SPAN : การใช้งาน SPAN

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

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

Click to TOP


ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP