พื้นฐาน CSS

พื้นฐาน CSS

หน้าตาเว็บไซต์ทั้งหมดที่เราเห็นไม่ว่าจะเป็นสี ตำแหน่ง ขนาด การขยับส่วนต่างๆ ทุกอย่างสามารถกำหนดได้ด้วย CSS

รายละเอียดคอร์ส

CSS เป็นส่วนที่สำคัญมากสำหรับเว็บไซต์ เรียกได้ว่าเป็นหัวใจหลักของการทำเว็บไซต์เลยก็ว่าได้ การใช้ CSS อย่างชำนาญจะทำให้เราทำเว็บไซต์ได้หลากหลายรูปแบบมาก ในปัจจุบันความสามารถของ CSS นั้นเพิ่มมากว่าเมื่อก่อนมาก เราสามารถหมด ขยับปรับภาพหรือแม้แต่กระทั่งทำ animation แบบง่ายๆด้วย CSS เลยทีเดียว หัวข้อนี้น่าสนใจมาก และจำเป็นที่จะต้องเรียนรู้อย่างจริงจังเพื่อการทำเว็บไซต์ที่มีคุณภาพ

พื้นฐาน CSS

หน้าตาของเว็บไซต์ทั้งหมดไม่ว่าจะเป็น สี ขนาดตัวหนังสือ ชนิดตัวหนังสือ ขนาดภาพ สีภาพ ความสว่างของภาพ เส้นขอบตาราง พื้นหลัง ตำแหน่งของทุกอย่างที่อยู่ในเว็บเพจ สามารถกำหนดได้โดยใช้ CSS ได้ทั้งหมด ดังนั้นหัวข้อนี้จึงไม่ควรพลาดเป็นอย่างยิ่ง

1

เริ่มต้นกับ CSS

มาดูข้อดีของ CSS กัน

2

CSS syntax

มาศึกษาโครงสร้างของ CSS และดูตัวอย่างวิธีการใช้งานกัน เราอาจลองเขียน CSS ใบบทถัดไปก่อนแล้วค่อยกลับมาอ่านบทนี้อีกครั้งจะเข้าใจมากขึ้น

3

การใช้งาน CSS

ถ้าอ่านที่ผ่ามมาทั้งหมดแล้วไม่เข้าใจก็มาอ่านกันที่บทนี้เลย บางครั้งลองใช้งานจริงๆจะทำให้เราเข้าใจมันได้ง่ายกว่าการอ่านเยอะ

4

คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ

ใส่พื้นหลังให้กับเว็บเพจโดยใช้คำสั่ง CSS นั้นสามารถทำได้หลายแบบมาก

5

คำสั่งที่ใช้กับข้อความ

รวมคำสั่งที่ใช้ร่วมกับข้อความต่าง ไม่ว่าจะเป็นขนาด สี ฟอนต์ การจัดเรียงหน้า

6

คำสั่งจัดการฟอนต์ (font)

ฟอนต์คือรูปแบบตัวอักษรเราจัดฟอนต์เพื่อความสวยงาม และอ่านง่ายของเนื้อหา

7

คำสั่งที่เกี่ยวกับเส้นขอบ

จัดการเส้นขอบต่างๆด้วย CSS

8

Margin

ระยะห่างระหว่าง element เรียกว่า margin สามารถกำหนดได้โดยใช้ CSS

9

Padding

กำหนดระยะห่างระหว่างสิ่งที่อยู่ภายใน element กับขอบของ element

10

เปลี่ยนสัญลักษณ์หน้า list

บทความที่ผ่านๆมาเราได้ลองเขียน list <li> กับบ้างแล้ว ในบทความนี้จะแสดงสัญลักษณ์หน้า list แต่ละแบบให้ดูกัน

11

จัดรูปแบบของตารางด้วยคำสั่ง CSS

เราสามารถจัดรูปแบบของคำสั่งตาราง Table ด้วย CSS ได้ แถมยังสามารถทำได้มากกว่าที่มีใน HTML ซะอีก

12

Overflow

คำสั่งสำหรับควบคุมขนาดของตัวหนังสือและภาพที่อยู่ภายใน element


เลื่อนขึ้นด้านบน