CSS คืออะไร ?
หลายคนอาจจะเคยได้ยินคำนี้กันมาบ้าง โดยเฉพาะถ้าคุณเป็นแฟนเว็บ dwthai.com ต้องเคยผ่านตามาบ้าง เพราะในเว็บจะมีการเอ๋ยถึงการใช้เทคนิคต่าง ๆ ที่ต้องเข้าไปกำหนดค่าในหน้าต่าง CSS ของ Dremweaaver อยู่เสมอ แต่มีใครเคยคิดสงสัยบ้างหรือไม่ว่า CSS ที่เคยใช้หรือเคยได้ยินมามันคืออะไร ? ทำไมต้องใช้งานมันด้วย ลองทำความเข้าใจกันกับบทความนี้ น่าจะพอจะทำให้ท่านเข้าใจ CSS มากขึ้น
....................................................................................................................................
CSS คือ ชุดคำสั่งที่ใช้สำหรับการกำหนดการแสดงผลข้อมูลหน้าเว็บพจ ซึ่งคำเต็ม ๆ ของ CSS คือ Cascading Style Sheets เป็นมาตราฐานหนึ่งของ W3C ที่กำหนดขึ้นมา เพื่อใช้ในการตบแต่งหน้าเอกสารเว้บเพจโดยเฉพาะ การใช้งาน CSS จะเข้ามาช่วยเพิ่มความสามารถให้กับ HTML เดิมที่เราใช้งานกันอยู่ในปัจจุบัน ซึ่งในปัจจุบันนี้ CSS ได้มาอยู่บนมาตราฐานที่เวอร์ชั่น 2.0 (CSS2.0)
โดยในปัจจุบันเว็บไซต์ส่วนใหญ่จะนิยมใช้งาน CSS กันเพิ่มมากขึ้น ทั้งนี้เนื่องจาก CSS มีความสามารถในการตบแต่งการแสดงผลข้อมูลหน้าเว็บเพจที่เหนือกว่า HTML โดยปรกติอยู่มาก บางเว้บไซต์ที่เราเห็นกันใน Internet แถบจะเรียกได้ว่าใช้ CSS ล้วน ๆ ในการออกแบบ Layout หน้าเซ้บเพจเลยทีเดียว ยกตัวอย่างที่เว็บเพจที่ท่านกำลังอ่านบทความกันอยู่นี้ ก็ใช้ความสามารถของ CSS ในการตบแต่งแสดงผลข้อมูล การเลย์เอาท์จัดวาง Object ต่าง ๆ บนหน้าเว็บเพจ (ให้ท่านลองทำการ View Source Code ดูได้ครับ)
ความสามารถของ CSS
ความสามารถของ CSS ถ้าจะยกตัวอย่างให้เห็นภาพกันชัด ๆ ผมก็ขอยกตัวอย่างดังนี้แล้วกันครับ
- CSS สามารถทำให้ TEXT ที่เป็นจุด Link ไม่ให้มีการขีดเส้นใต้ได้
- CSS สามารถกำหนดการ Fix ขนาดของ Font อักษรได้ นั้นคือ เมื่อผู้เยี่ยมชมปรับขนาด Font ที่ Browser ที่ขนาดเท่าใด CSS ก็ยังคงแสดงผลขนาด Font ที่ขนาดที่เรากำหนดไว้เสมอ ส่งผลให้ทำให้เว็บเพจเราไม่เละตามขนาดของFont ที่ผู้ใช้ปรับเปลี่ยนที่ Browser
- CSS สามารถทำการกำหนดภาพพื้นหลัง (Image Background) ให้ได้ตำแหน่งและมีรูปแบบตามที่เราต้องการได้
- CSS ทำให้การปรับปรุงเว็บเพจในส่วนของการแสดงผลทำได้อย่างรวดเร็วขึ้น เนื่องจากเราสามารถปรับปรุงคุณสมบัติของการแสดงผลได้จากจุด ๆ เดียวแล้วส่งผลให้ทั้งหน้าเพจที่มีการใช้งาน CSS นั้นปรับปรุงให้เป็นไปตามที่เราแก้ไข
- CSS ทำให้เว็บเพจเราโหลดเร็วขึ้น
- อื่น ๆ อีกมากมาย...รอคุฯเรียนรู้และใช้งานจาก CSS
จะใช้งาน CSS ได้อย่างไร ?
เนื่องจาก CSS จะทำงานร่วมกับ HTML เป็นหลัก ดังนั้นเราจึงสามารถพิมพ์โค้ดของ CSS แทรกไปยังโค้ดของ HTML ได้ (แต่ยังมีรูปแบบอื่นอีก ไว้จะแนะนำกันต่อไปกับบทความอื่น ๆ นะ) เช่น
CSS กับโปรแกรม Dreamweaver
หากท่านใช้งานโปรแกรม Dreamweaver อยู่แล้ว ท่านอาจจะเรียกใช้งานหรือสร้าง CSS ได้จาก CSS Panel ของโปรแกรม ดังรูป
รูปแบบไวยากรณ์ของ CSS เบื้องต้น
CSS ไม่ว่าคุณจะเขียนด้วยรูปแบบใดก็ตาม ต้องยึดหลักไวยากรณ์ของรูปแบบภาษา ตามที่จะได้อธิบายในบทความนี้เหมือน ๆ กัน นั้นคือ
1. CSS จะประกอบไปด้วย ชื่อ Class หรือชื่อ ID หรือชื่อ TAG Html ใน CSS จะเรียกว่า Selector ที่ใช้สำหรับการอ้างถึง
2. มีชื่อ Properties หรือชื่อคุณสมบัติ และตามด้วย Value เพื่อกำหนดค่าให้แก่คุณสมบัตินั้น และระหว่างชื่อ Properties กับ Value จะถูกคั่นด้วยเครื่องหมาย colon ( properties:value )
3. คุณสมบัติภายใน 1 คลาส จะมีได้มากกว่า 1 ตามที่เรากำหนด และ properties ในแต่ละ properties จะถูกคั่นด้วยเครื่องหมาย semi-colon ( ; )
4. ต้องเขียนคุณสมบัติของ CSS นั้นไว้ภายในเครื่องหมายปีกกา { .... } เท่านั้น
ตัวอย่างการเขียน CSS โดยการกำหนดชื่อ Class
จากตัวอย่างเป็นการประกาศ Class ชื่อว่า font18red โดยหลักการของการตั้งชื่อ Class มีหลักการดังนี้
1. ชื่อ Class ต้องนำหน้าด้วยเครื่องหมาย dot หรือ จุด ( . )
2. ชื่อ Class ห้ามขึ้นต้นด้วยตัวเลข เช่น เขียน 18fontred แบบนี้ไม่ได้
3. ชื่อ Class ห้ามมีการเว้นวรรค เช่น จะเขียนเป็น font 18red แบบนี้ไม่ได้
4. ชื่อ Class ห้ามเป็นภาษาไทย (ไม่มีใครเข้าตั้งชื่อแบบนี้กัน)
การเรียกใช้งาน CSS ที่มีการสร้างในแบบ Class
การเรียกใช้งาน CSS ที่มีลักษณะการตั้งชื่อ Class ข้างต้น หากเราต้องการเรียกใช้งานคุณสมบัติของคลาสใด เราสามารถเรียกใช้งานคลาสนั้นได้จากทุก TAG ของ HTML โดยผ่าน Attribute ที่ชื่อว่า class ดังตัวอย่างต่อไปนี้
จากตัวอย่างข้างต้น เราเรียกใช้ Class ที่ชือว่า font18red จาก Tag div โดยใช้ Attribute ที่ชื่อว่า class แล้วอ้างถึงชื่อ Class ที่เราต้องการเรียกใช้คุณสมบัติ (สังเกตที่รูปข้างต้น) เมื่อเราลองดูผลลัพธ์ของโค้ดนี้กับ Browser เราจะได้การแสดงผลเป็นข้อความที่มีสีแดง ตัวอักษรตัวหนา มีขนาดที่ 18 pixel
.................................................................................................................................
ที่จริงการเขียนคุณสมบัติของ CSS ยังมีอีกหลายวิธีที่สามารถเขียนและนำไปใช้งานได้ เช่น การเขียนแบบกำหนดคุณสมบัติให้แก้ TAG ของ HTML หรือการเขียนโดยอ้างอิงจาก Tag ของ HTML เป็นต้น แต่สำหรับบทความนี้ผมขอแนะนำไว้เพียงเท่านี้ก่อน เนื่องจากวัตถุประสงค์ของบทความนี้ ต้องการให้ท่านได้รู้จักกับไวยากรณ์ของ CSS เบื้อนต้นเสียก่อน นั้นก็คือ ต้องรู้ว่าจะเขียน CSS ไว้ที่ไหน มีการเขียน properties กับ value ด้วยวิธีใด ต่าง ๆ เหล่านี้คือวัตถุประสงค์ของบทความนี้ครับ ไว้อ่านต่อกับบทความหน้า ว่าด้วยเรื่องของการเขียน CSS กับการอ้างถึงคุณสมบัติในรูปแบบต่าง ๆ
CSS Selectors เบื้องต้นในรูปแบบพื้นฐานที่ควรรู้
บทความที่ผ่านมาเป็นบทความว่าด้วย ไวยากรณ์พื้นฐานของ CSS ดังที่เราได้เรียนรู้ไป และผมยกตัวอย่างการตั้งชื่อ Class ไป มาบทความนี้เราจะมาทำความรู้จักเกี่ยวกับ Selector เบื้องต้นที่เราควรรู้กันเสียก่อน สำหรับใครที่งง ๆ กับคำว่า Selector ก็ไม่ต้องตกใจนะครับ เพราะว่า Selector ที่กล่าวถึงในบทความนี้ต่อไป แท้จริงแล้วเราได้เรียนรู้ผ่านมาแล้วจากบทความก่อน เพราะอะไรผมถึงบอกแบบนี้ ก็เพราะว่าชื่อ Class ที่คุณกำหนดหน้าเครื่องหมายปีกกา {...} นะแหละครับที่ทาง CSS เขาเรียกกันว่า Selector ดังรูป
ซึ่ง Selectors นี้ใน CSS มีการเขียนได้หลากหลายรูปแบบ และในแต่ละรูปแบบก็จะมีวัตถุประสงค์หรือเป้าหมายที่แตกต่างกันออกไป ดังมีรายละเอียด ดังนี้
.......................................................................................................................
1. Class Selectors
Class Selectors เป็น Selector ที่เราต้องกำหนดชื่อของ Selector ขึ้นมาเอง โดยที่ Selector ในรูปแบบนี้จะอยู่อย่างอิสระ ไม่มีการอ้างอิงเกี่ยวข้องกับ TAG HTML ใด ๆ การเรียกใช้งานต้องระบุชื่อ Class Selectors กับ TAG ของ HTMLจึงจะสามารถใช้งานคุณสมบัติของ Class ได้
วิธีการเขียน Selector ในรูปแบบนี้ เขียนได้โดยการ ตั้งชื่อ Selector ไว้หลังเครื่องหมาจุด หรือ Dot ( . ) จากนั้นตามด้วย Properties วิธีการเรียกใช้งาน เราสามารถเรียกใช้งาน Class Selector ได้โดยการใช้ Attribute class แล้วตามด้วยชื่อ Class ที่เราต้องการเรียกใช้งาน ดังรูป
2. ID Selectors
ID Selectors เป็น Selector ที่อ้างอิงกับ Attribute ID ที่อยู่ภายใน TAG ของ HTML โดยที่ TAG ของ HTML ใดมี ID ซึ่งตรงตาม ID Selectors ที่เรากำหนดไว้ คุณสมบัติของ CSS ที่เรากำหนดไว้กับ Selector ก็จะมีผลต่อ TAG นั้นทันที
วิธีการเขียน Selector การเขียน ID Selectors เราสามารถเขียนได้โดยการเขียนชื่อ Selector ตามหลังเครื่องหมายชาร์ป (# ) วิธีการเรียกใช้งาน เราสามารถเรียกใช้ ID Selector นี้ได้โดยที่เรากำหนด Attribute ID ภายใน TAG ที่เราต้องการเรียกใช้งานคุณสมบัติ CSS จาก ID Selectors ให้มีความสัมพันธ์กับ Selector ดังรูป
3. TAG Selectors
TAG Selectors สำหรับ Selector ในรูปแบบสุดท้ายที่จะกล่าวถึงในเบื้องต้นนี้เป็น Selector ที่อ้างอิงกับ TAG ของ HTML โดยตรง นั่นหมายถึง ถ้าหากคุณกำหนดคุณสมบัติให้แก่ TAG Selectors นี้แล้ว TAG ของ HTML ที่มีชื่อเดียวกับ Selectors ชนิดนี้ ก็จะมีคุณสมบัติของ CSS เหมือนกันหมดทุก TAG ภายในเว็บเพจนั้น
วิธีการเขียน Selector การเขียน TAG Selectors เราสามารถเขียนได้โดยการเขียนชื่อ TAG ของ HTML ลงไปตรง ๆ หน้าเครื่องหมายปีกกา { ..... } เช่นต้องการกำหนดให้ TAG Font ของ HTML ในเว็บเพจนั้นมีคุณสมบัติใช้ Font ที่ชื่อว่า Tahoma ทั้งหมด ก็พิมม์ชื่อเพื่อกำหนดคุณสมบัติลงไปลักษณะนี้
font{font-family: Tahoma;} เป็นต้น วิธีการเรียกใช้งาน การใช้งาน Selector ชนิดนี้เราไม่จำเป็นต้องมีการเรียกใช้งาน เนื่องจากเมื่อจุดใดที่เว็บเพจมีการเรียกใช้งาน TAG ของ HTML ที่สัมพันธ์กับ Selectors ที่เรากำหนดไว้ คุณสมบัติของ CSS ก็จะถูกกำหนดให้แก่TAG นั้นโดยอัตโนมัติ
...........................................................................................................................
การกำหนด Selectors ยังมีรูปแบบอีกหลากหลายที่เราจะต้องเรียนรู้กันต่อไปในอนาคต บทความนี้เพียงแค่เกริ่นนำและปูพื้นฐานของท่านในเรื่องของ CSS เท่านั้น สำหรับรูปแบบอื่น ๆ จะได้กล่าวถึงต่อไปในบทความอื่น ๆ ในอนาคต...3 รูป
การเขียน CSS มีได้หลายรูปแบบในการเก็บโค้ด หลัก ๆ ก็จะมีอยู่ 3 รูปแบบ คือ
1. Inline Style Sheet
2. Embed Style Sheet
3. External Style Sheet
ซึ่งในแต่ละแบบก็จะมีวัตถุประสงค์ในการใช้งานแตกต่างกันไป แต่รูปแบบไวยากรณ์ของภาษา CSS ยังคงเหมือนกัน เพียงแต่เปลี่ยนรูปแบบการจัดเก็บโค้ด CSS ไว้แตกต่างกันเท่านั้นเอง เราจะมาทำความรู้จักกับ CSS ทั้ง 3 รูปแบบข้างต้นนี้กัน ดังนี้
Inline Style Sheet
เป็นรูปแบบการเขียน CSS โดยการฝั่งลงไปใน line บรรทัดของ TAG HTML โดยการใช้ Attribute style แล้วตามด้วย value ดังตัวอย่าง เช่น
จากตัวอย่าง เมื่อมีการแสดงผลที่หน้า Browser จะได้เป็น
ตัวอย่างการใช้ Inline Style Sheet
นั้นคือจะแสดงผลตัวอักษรในโทนสีแดง และมีลักษณะตัวอักษรตัวหนา ดังตัวอย่างข้างต้น
** การเขียนในรูปแบบ Inline นี้จะให้ผลกับข้อมูลหรือ Object ที่ tag ที่มีการเขียน CSS ลงไปเท่านั้น จะไม่ส่งผลต่อข้อมูลอื่นที่อยู่นอก tag ที้มี css คลุมอยู่ **
Embed Style Sheet
เป็นการเขียน CSS โดยการฝั่งรวมไปกับโค้ดของ HTML ซึ่งโค้ดของ CSS จะอยู่ในไฟล์เดียวกันกับเว็บเพจที่มีการเรียกใช้งาน CSS นั้น แต่มีการแยกออกมาอยู่ภายใน TAG style ดังตัวอย่าง ต่อไปนี้
** การเขียน css ในรูปแบบ Embed นี้ เราจะสามารถอ้างถึง css ได้จากทุก tag ของ html ภายในไฟล์ และ 1 ชื่อของ css หรือ 1 class จะสามารถเรียกซ้ำ ๆ ไช้งานได้ตามต้องการ **
External Style Sheet
สำหรับรูปแบบการเขียนในลักษณะ External Style Sheet จะเป็นรูปแบบที่เราสามารถเขียนโค้ดของ CSS แยกเก็บออกไปเป็นไฟล์ข้างนอกได้ โดยที่เราสามารถเรียกใช้โค้ดจาก css ในรูปแบบนี้ได้ 2 รูปแบบ คือ
1. Linking Style Sheet
2. Import Style Sheet
ไฟล์ css ที่เราแยกเก็บไว้นี้จะมีนามสกุลไฟล์เป็น *.css
การเรียกใช้ CSS ในแบบ Linking Style Sheet
เราสามารถเรียกใช้ไฟล์ css ที่เราแยกเก็บเป็นไฟล์ต่างหากได้ในรูปแบบ link โดยใช้โค้ดต่อไปนี้
ที่ไฮไลท์ไว้ดังรูปคือตัวอย่างโค้ดการอ้างถึงไฟล์ CSS ในรูปแบบ Linking เมื่อมีการอ้างถึงไฟล์ CSS แล้ว เว็บเพจที่อ้างถึงไฟล์ CSS นั้นจะสามารถเรียกใช้งาน CSS หรือ Class ต่าง ๆ ที่มีอยู่ภายในไฟล์ css นั้นได้ เปรียบเสมือมมีโค้ดCSS นั้นฝั่งอยู่ในไฟล์ที่เรียกใช้งาน
การเรียกใช้ CSS ในแบบ Import Style Sheet
การเรียกใช้งานไฟล์ css ในแบบ Import มีหลักการและ Concept เช่นเดียวกับการใช่ในแบบ Linking นั้นคือมีการแยกโค้ด css ออกมาเก็บไว้เป็นไฟล์ เมื่อต้องการจะเรียกใช้งาน css ที่ไฟล์เว็บเพจใด ก็ให้ทำการอ้างถึงไฟล์ css นั้น การอ้างถึงในแบบ import จะกระทำภายใต้ Tag Style ดังรูป
เมื่อเรามีการ import เข้ามาภายในไฟล์เว็บเพจแล้ว หากเราต้องการสร้าง Style เพิ่มเราสามารถทำการเพิ่มเติมลงไปได้ทันทีภายใน Tag Style นั้น ดังรูปข้างต้น ซึ่งในจุดนี้นี่เองที่ทำให้ การเรียกใช้งานไฟล์ CSS ในแบบ Linking และImport มีการทำงานที่แตกต่างกัน
** การใช้งาน CSS ในแบบ External จะทำให้เราสามารถสร้าง CSS 1 ชุด แต่สามารถเรียกใช้งานได้ในหลาย ๆ เว็บเพจ เมื่อต้องการแก้ไข เราก็สามารถแก้ไขได้จากไฟล์ ๆ เดียว แล้วจะส่งผลต่อทุกเว็บเพจที่มีการเรียกใช้ CSS จากไฟล์นี้ ซึ่งเป็นประโยชน์มากกับนักพัฒนาเว้บไซต์ **
Cr.http://bu.lpc.rmutl.ac.th/naravit/begin-programming/basic_PHP/css_mean.htm
