CSS3 คืออะไร มีประโยชน์อย่างไร

By | September 18, 2013

วันนี้ผมจะมาแนะนำให้รู้จักกับเทคโนโลยีอีกหนึ่งตัวที่เรา siam-webdesign.com ได้นำมาใช้ทำเว็บไซต์ให้กับลูกค้าของเรานั้นก็คือ css3

css3_logo_by_heskinradiophonic-d39llgs

 

CSS ย่อมาจาก Cascading style sheet  คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เช่น สีอักษร สีพื้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ ให้สวยงามและอื่นๆ ปัจจุบันได้พัฒนาขึ้นถึงเวอร์ชั่นที่ 3 หรือที่เรียกกันว่า CSS3
ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module) CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors  ซึ่งใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลย

ขั้นตอนการเรียนรู้ CSS3

CSS3 แตกต่างไปจาก CSS2 แบบยกเครื่อง การเริ่มต้นเรียนรู้จึงจำเป็นต้องปรับเปลี่ยนรูปแบบไปด้วย ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ ของใครของมัน รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module)

CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors

ใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลยครับ

CSS3 Modules ที่จำเป็นต้องเรียนรู้ก่อนเมื่อมีเวลา

  1. CSS Selectors
  2. CSS Background and Borders
  3. CSS Color
  4. CSS Fonts
  5. CSS Basic Box model
  6. CSS Multi-column layout
  7. CSS 2D Transformations
  8. CSS Transitions
  9. CSS Animation
  10. CSS Basic user interface
  11. CSS Values and Units

ตัวอย่างการเริ่มต้นศึกษาก็เช่น CSS Basic Box Model คืออะไร และมันมีอะไรบ้าง

boxmodel

ส่วนประกอบ (Properties) ของ Module นี้ มีอะไรบ้าง คือคำถามหลักที่เกิดขึ้น เมื่อเราได้ยินคำว่า “Box Model” ให้จดจำเอาไว้ว่า มันมีประมาณนี้

  1. ประเภทของ Box
    1. Display
    2. Block-Level
    3. Run-in การสั่ง run-in นั้น กระทำก็ต่อเมื่อ เราต้องการเอา Element ที่เป็น formattedBlock มาเรียงต่อกันกัน ให้สั่ง display: run-in;
    4. Compact
  2. Padding
  3. Margin ซึ่ง Margin แยกออกเป็น 2 แบบ
    1. Margin properties ปรกติ
    2. Collapsing Margins ใน Collapsing นี้ มันจะอยู่ใน <table>
  4. Width และ Height
  5. min-width, min-height, max-width, max-height
  6. กฎการคำนาณ ความกว้าง สูงและ margins
  7. Float
  8. Overflow
  9. Visibility

 

ข้อมูลอ้างอิง
www.w3schools.com

www.thaicss.com

Category: CSS