CSS

สำหรับค่า Property ของการเขียน CSS นั้นมากมายหลากหลาย ซึ่งผู้ที่สนใจสามารถหาอ่านได้ทั่วไป แต่ส่วนตัวที่ใช้งานบ่อยๆ จะประกอบด้วย

• font-size = ขนาดตัวอักษร
• color = สีตัวอักษร
• background = พื้นหลัง
• float = การไหลต่อกัน
• overflow = การครอบทั้งหมด
• width = ความกว้าง
• height = ความสูง
• margin = ระยะห่างจากขอบไปทางด้านนอก
• padding = ระยะห่างจากขอบถึงเนื้อหาด้านใน

การซ้ำของ CSS

การเขียน CSS ในหลายครั้งเมื่อเราได้เขียนมาได้ระยะหนึ่ง เราอาจเผลอเขียนคุณสมบัติ Property ของ CSS ซ้ำซ้อนใน CSS ชุดเดียวกัน

ซึ่งการทำงานของ CSS นั้น จะเลือกใช้ Property ตัวที่ประกาศล่าสุดมาใช้งาน เช่น

h3 {
  color: #ff000;
  text-align: left;
  font-size: 1.5em;
}

h3 {
  text-align: right;
  font-size: 1.25em;
}

ในการเริ่มต้นเขียน CSS จะต้องทำความเข้าใจกับ Syntax พื้นฐานของ CSS เสียก่อน

รูปตัวอย่างจาก w3schools.com/css/css_syntax.asp

จากตัวอย่างรูปภาพด้านบน ประกอบด้วย

• Selector = Tag ต่างๆ จากโค้ด HTML เพื่อใช้อ้างอิงว่าจะกำหนด CSS กับส่วนไหน เช่น <h1> <p> หรือ <div> เป็นต้น
• Declaration = ชุดคำสั่งทั้งหมด ที่มีผลกับ Selector ที่กำหนด โดยจะอยู่ในปีกกา { และ }
• Property = คุณสมบัติ หากมีหลายตัวใช้เครื่องหมาย (semicolon) ; คั่นแต่ละคุณสมบัติ
• Value = กำหนดค่าต่างๆ ในแต่ละคุณสมบัติ

ออกตัวก่อนว่า สรุปการเรียนรู้พื้นฐาน CSS อันนี้ เป็นการประมวลจากประสบการณ์การทำงาน ซึ่งอาจไม่ตรงกับหลักการเรียน ผู้อ่านที่สนใจเรื่องการเขียน CSS ควรหาข้อมูลเพิ่มเติมประกอบการศึกษาด้วยตัวเองเพิ่มเติมด้วย

CSS เป็นคำย่อมาจาก Cascading Style Sheets เป็นการเขียนชุดคำสั่งที่เกี่ยวกับการตกแต่งหน้าตาเว็บไซต์ โดยเป็นโค้ดส่วนที่แยกออกมาจากโค้ด HTML

ในไอเดียของผมเอง มองว่า HTML เอาไว้ทำ Markup ของเนื้อหา จัดลำดับความสำคัญของข้อมูล ว่าตำแหน่งไหนเป็นข้อมูลสำคัญ ส่วนไหนเป็นหัวข้อหลัก พวกแท็ก <h1> <p> <div> โดยมุ่งเน้น "ให้เครื่องอ่าน" -- ส่วน CSS เป็นการจัดการกับสีสัน ตำแหน่งการจัดวาง มุ่งเน้น "ให้คนดู" เพื่อความสวยงาม

การเขียน CSS ทำได้ใน 3 ลักษณะ