เนื่องจาก 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
CSS Example 1
จากตัวอย่างเป็นการประกาศ 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 เท่านั้น สำหรับรูปแบบอื่น ๆ จะได้กล่าวถึงต่อไปในบทความอื่น ๆ ในอนาคต...
..................................................................................................................................
อ้างอิง
http://bu.lpc.rmutl.ac.th/naravit/begin-programming/basic_PHP/css_mean.htm
