สไตล์ชีท(style sheet)
สไตล์ชีท (Style Sheet)
หรือ Cascading Style Sheets หรือที่เรียกสั้น ๆ ว่า CSS เป็นภาษาที่ใช้ในการเขียนเว็บเพจเพื่อบอกเว็บเบราว์เซอร์ถึงลักษณะของการจัดรูปแบบเอกสาร HTM ที่จะแสดงผลซึ่งโดยหลักการแล้ว HTML จะเป็นภาษาหลักที่ใช้ในการกำหนดโครงสร้างของเอกสารซึ่งเปรียบเสมือนโครงกระดูกและกล้ามเนื้อเมื่อเราใช้องค์ประกอบทั่วไปในหน้าเว็บเช่นหัวเรื่อง (<h1> ถึง <h6P) และข้อความใน <body> ก็จะดูไม่แตกต่างกันในแต่ละเว็บเพจ แต่เราสามารถใช้ css นี้ช่วยในการกำหนดรูปแบบให้กับองค์ประกอบเหล่านี้เสียใหม่เช่นเปลี่ยนแบบอักษร (font) สี (color) และระยะข้อความ (text indentation) เป็นต้น Css จึงเป็นเหมือนเครื่องมือที่เราใช้ในการแต่งตัวให้กับโครงสร้างที่ถูกสร้างจาก HTML ให้มีรูปแบบและสีสันที่น่าดูชมยิ่งขึ้นนั่นเอง
10.1.1 ประโยชน์ของ css การนำ Css มาใช้จะมีประโยชน์ดังนี้
1. การใช้ css ในการจัดรูปแบบการแสดงผลจะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหาทำให้เข้าใจง่ายขึ้นการแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
2. เมื่อ code ภายในเอกสาร HTML ลดลงทำให้ขนาดไฟล์เล็กลงจึงดาวน์โหลดได้เร็ว
3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกันให้มีผลกับเอกสาร HTML ทั้งหน้าหรือทุกหน้าได้ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่ายไม่ต้องไล่ตามแก้ที่แท็กคำสั่ง HTML ต่างๆทั่วทั้งเอกสาร
4. สามารถควบคุมการแสดงผลให้เหมือนกันหรือใกล้เคียงกันได้ในหลายเว็บเบราว์เซอร์
5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือหรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน
6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐานปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจนั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทนดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเราก็จะทำให้เข้ากับเว็บเบราว์เซอร์ในอนาคตได้เป็นอย่างดี
10.1.2 CSS3 css3 เป็นรุ่นหลักรุ่นที่ 3 (CSS Level 3)
ของการกำหนดข้อมูลจำเพาะของ CSS (CSS specification) ที่ถูกกำหนดโดย W3C โดยเริ่มพัฒนามาตั้งแต่ปี ค.ศ. 2005 CSS3 จะต่างจาก 2 รุ่นก่อนตรงที่ css3 จะถูกแบ่งออกเป็นส่วน ๆ เรียกว่าโมดูล (Module) แทนที่จะรวมเป็นเอกสารยาว ๆ เอกสารเดียวเหมือน CSS1 และ CSS212.1 โดยขณะนี้มีมากกว่า 30 โมดูลแล้วเช่นโมดูล Selectors, Media, Queries, Text, Backgrounds and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, และ Multi-Columns
แต่ละโมดูลจะอยู่ในระดับการพัฒนาและการติดตั้งลงในเบราว์เซอร์ที่แตกต่างกันมีบางโมดูลที่ถูกกำหนดเป็นมาตรฐานแล้วเช่น Color แต่จะมีบางโมดูลจะถูกนำไปพัฒนาต่อในรุ่นที่ 4 ก่อนที่รุ่นที่ 3 จะเสร็จสมบูรณ์มีฟังก์ชั่นและคุณลักษณะเด่นใหม่ ๆ หลากหลายที่ถูกเพิ่มเข้ามาใน CSS3 เช่น border radius, boxshadow, background-origin; การกำหนดสีแบบ HSL, HSLA, และ RGBA; text shadow; text-overflow; word-wrap; box-sizing: attribute selectors; multicolumn layout: Web Fonts, และ speech เป็นต้น
