CSS--Cascading Style sheet

Credit : W3Shool สามารถเรียนรู้ได้
Web Knowledge

CSS ใช้ในการควบคุมรูปแบบ (style) และรูปแบบ (layout) ของเว็บเพจ CSS3 เป็นมาตรฐานล่าสุดสำหรับ CSS

# เริ่มรู้จัก CSS

CSS (Cascading Style Sheet) จัดเป็นภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออก จากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กำหนดโดย องค์กร World Wide Web Consortium หรือ W3C

# การสร้างรูปแบบ (Style) การแสดงผลเอกสาร HTML โดยใช้ CSS

รูปแบบทั่วไปของการกำหนดรูปแบบ (Style) ด้วย CSS

รูปแบบทั่วไปของการจัดรูปแบบการแสดงผลเอกสาร HTML ด้วย CSS ประกอบด้วย ส่วนประกอบ 3 ส่วน ได้แก่ ตัวเลือก (Selector), คุณลักษณะ (Property) และ ค่าคุณลักษณะ (value) สามารถแสดงรูปแบบทั่วไปได้ดังนี้

selector { property: value }

ส่วนของ Selector อาจเป็นแท็ก HTML ที่ต้องการกำหนดรูปแบบ หรือชื่อคลาสที่กำหนดขึ้น ให้แท็กเรียกใช้เพิ่มเติมเป็นรูปแบบย่อย

ในส่วนของ Property จะมีชื่อของ Property ซึ่งอาจเป็น แอ็ททริบิวต์ของแท็กที่ต้องการกำหนด ตามด้วยเครื่องหมาย “:” (Colon) และค่า (value) ของคุณลักษณะ ซึ่ง Property เครื่องหมาย “:” และ Value นั้น ทั้งหมดถูกล้อมรอบด้วยเครื่องหมาย { และ } ดังตัวอย่างต่อไปนี้เป็นการกำหนด Style ของแท็ก <body> ที่กำหนดให้มีสี (Color) เป็นสีดำ (black)

body { color: black }

ค่าคุณลักษณะหรือ Value ที่กำหนดให้กับ Property ใดๆ อาจเป็นค่าที่มีช่องว่างแทรกอยู่ระหว่างคำ กรณี Value มีช่องว่างระหว่างคำ ให้ใส่เครื่องหมาย “ ” ล้อมรอบ ดังตัวอย่างต่อไปนี้เป็นการกำหนด Style ของแท็ก <p> ที่ให้มีรูปแบบตัวอักษร (font-family) เป็น “sans serif”

p { font-family: "sans serif" }

หากต้องการกำหนด Property ให้กับ Selector มากกว่า 1 Property ให้แยกแต่ละ Property ออกจากกันด้วยเครื่องหมาย ; ดังตัวอย่างต่อไปนี้เป็น Style ของแท็ก <p> ที่กำหนดจัดรูปแบบข้อความให้อยู่กึ่งกลาง (Center) และเป็นสีแดง (red)

p { text-align:center; color:red }

# การเขียนคำอธิบาย (Comment)

นอกจากนั้น ยังสามารถกำหนดคำอธิบาย (Comment) เอกสาร HTML เพื่อช่วยอธิบาย ซอสโค้ด (Source Code) ของเอกสาร HTML โดยโปรแกรมเว็บบราวเซอร์ จะไม่แปลความหมายในส่วนของ Comment ซึ่งการเขียน Comment ใน CSS ทำได้โดยใช้สัญลักษณ์ /* และ */ ล้อมรอบข้อความที่เป็น Comment

/* This is a comment */

ตัวอย่างการใช้ CSS3

CSS3 Transforms