Translate this blog to...
พื้นฐานการเขียน CSS เบื้องต้น สำหรับปรับแต่งหน้าเว็บไซต์อย่างง่ายด้วยตัวเอง
ออกตัวก่อนว่า สรุปการเรียนรู้พื้นฐาน CSS อันนี้ เป็นการประมวลจากประสบการณ์การทำงาน ซึ่งอาจไม่ตรงกับหลักการเรียน ผู้อ่านที่สนใจเรื่องการเขียน CSS ควรหาข้อมูลเพิ่มเติมประกอบการศึกษาด้วยตัวเองเพิ่มเติมด้วย
CSS เป็นคำย่อมาจาก Cascading Style Sheets เป็นการเขียนชุดคำสั่งที่เกี่ยวกับการตกแต่งหน้าตาเว็บไซต์ โดยเป็นโค้ดส่วนที่แยกออกมาจากโค้ด HTML
ในไอเดียของผมเอง มองว่า HTML เอาไว้ทำ Markup ของเนื้อหา จัดลำดับความสำคัญของข้อมูล ว่าตำแหน่งไหนเป็นข้อมูลสำคัญ ส่วนไหนเป็นหัวข้อหลัก พวกแท็ก <h1> <p> <div> โดยมุ่งเน้น "ให้เครื่องอ่าน" -- ส่วน CSS เป็นการจัดการกับสีสัน ตำแหน่งการจัดวาง มุ่งเน้น "ให้คนดู" เพื่อความสวยงาม
การเขียน CSS ทำได้ใน 3 ลักษณะ
- Inline คือการแทรกโค้ดคำสั่ง CSS เข้าไปในแท็ก HTML โดยตรง เช่น <div style="padding: 10px;"> เป็นต้น
- Internal เป็นการนำชุดคำสั่ง CSS ที่ใช้ทั้งหมด เอามารวมไว้ในส่วนของ <head> ของหน้าเพจนั้นๆ เพื่อสะดวกในการแก้ไข โดยจะมีการใช้ id และ class ในการอ้างอิงคำสั่ง (ดูภาพประกอบ 1)
- External เป็นการแยกเอาชุดคำสั่ง CSS ทั้งหมด ออกไปเป็นอีกไฟล์ .css ภายนอก แล้วทำการ link กลับมาที่ตัว HTML ด้วยคำสั่ง <link> (ดูภาพประกอบ 2)
ภาพประกอบ 1 การเขียน CSS แบบ Internal
ภาพประกอบ 2 การเขียน CSS แบบ External
- poakpong's blog
- 1923 reads
Copyright Notice
© ปกป้อง POAKPONG.com ผลงานเขียนในเว็บบล็อกนี้ ใช้สัญญาอนุญาตครีเอทีฟคอมมอนส์แบบแสดงที่มา 3.0 ประเทศไทย
Disclaimer
เนื้อหา ข้อความ ความเชื่อ ในเว็บไซต์นี้ เป็นความคิดเห็นของผู้เขียน ผู้อ่านโปรดใช้วิจารณญาณในการอ่าน และคิดหาเหตุผลเพิ่มเติมด้วยตัวเอง รวมทั้งรูปภาพ ภาษา ซึ่งอาจไม่ถูกต้องตามหลักภาษา และวัฒนธรรมที่ดีงาม ผู้อ่านต้องใช้วิจารณญาณเช่นกัน