การใช้งาน CSS ร่วมกับ HTML มีด้วยกัน 3 วิธี ขึ้นอยู่กับความเหมาะสมของงานผสมกับความขี้เกียจของเราเอง ได้แก่

  • External Style Sheet
  • Internal Style Sheet
  • Inline Style

External Style Sheet

External Style Sheet เป็นวิธีที่สามารถประยุกต์ใช้ได้หลายๆหน้าเว็บ และในขั้นตอนแก้ไขก็จะสามารถแก้ไขได้ทั้งเว็บไซต์ในที่เดียว ไฟล์เดียว โดยแต่ละหน้าจะต้องเชื่อมกับ Style Sheet ด้วย <link> ภายใน <head> ประมาณนี้

และจะเก็บคำสั่งทั้งหมดไว้ในไฟล์ที่มีนามสกุล *.css โดยไม่ต้องมีคำสั่งของ HTML ควบคุม
“myStyle.css” :

เหมาะสำหรับใช้เก็บ Style ที่ใช้ได้กับหลายๆหน้า

Internal Style Sheet

Internal Style Sheet เป็นการแทรก Style Sheet ลงในภาษา HTML แบบอยู่ในไฟล์เดียวกันโดยจะต้องแทรกไว้ใน <style> ซึ่งจำเป็นต้องอยู่ใน <head> อีกที ประมาณนี้

Inline Styles

Inline Style เป็นการแทรก Style ลงใน Tag ของ HTML โดยตรงซึ่งจะทำให้สูญเสียความสามารถพิเศษของ CSS ลงไป ไม่ต่างกับการใช้ HTML แบบดั้งเดิม โดยส่วนมากแล้วผมใช้เมื่อไม่มีทางเลือกหรือเพื่อทดสอบเท่านั้นครับ ถ้าลงตัวแล้วผมจะย้ายไปใช้ 2 วิธีด้านบนแทน (บางครั้งเวลาขี้เกียจก็มีลืมย้ายบ้าง ใช้มันแบบนี้นี่แหละ แล้วปัญหาก็ตามมาทีหลัง)

การแทรกหลาย Style Sheet ในหน้าเว็บเดียวกัน

ในบางครั้งของการเขียนเว็บ มีการแทรก Style จากหลายๆที่และเกิดการซ้ำกันของ Selector และบังเอิญมีการกำหนดค่าที่เหมือนกัน เช่น ต้องการเปลี่ยนสีตัวอักษรเหมือนกัน คำถามคือ HTML จะเลือกใช้ Style อันไหน?

HTML จะให้ความสำคัญกับ Style ที่มีความเฉพาะเจาะจงมากกว่า ถ้าจะให้เรียงลำดับก็คือ Inline, Internal และ External ตัวอย่างเช่น มีการกำหนด Style แบบ External ดังนี้

จากนั้น มีการกำหนด Style แบบ Internal ดังนี้

เมื่อพิจารณาลำดับความสำคัญแล้ว <h1> จะมีค่าดังนี้

Left Margin ถูกสืบทอดมาจาก External Style และ Color ถูกเปลี่ยนเป็น Orange ตาม Internal Style

แต่เดี๋ยวก่อน!!! ถ้ามีการแทรก External Style Sheet หลังจาก Internal Style Sheet ภายใน <head> External Style Sheet จะมีความสำคัญมากกว่า


Reference Sourceby Chicago Referencing Style

About The Author

นายนภดล แข็งการนา

นักวิชาการคอมพิวเตอร์ - กลุ่มงานพัฒนาระบบสารสนเทศ
สำนักวิทยบริการและเทคโนโลยีสารสนเทศ
มหาวิทยาลัยราชภัฏนครสวรรค์

Leave Comment