เรียนรู้พื้นฐานของ CSS | Web development 101 – EP. 3
สวัสดีครับท่านผู้ที่สนใจในการพัฒนาเว็บไซต์ทุกท่าน ในบทเรียน Web development 101 EP.3 นี้ เราจะมาทำความรู้จักกับ CSS หรือ Cascading Style Sheets ซึ่งเป็นภาษาที่ใช้ในการตกแต่งเว็บไซต์ให้สวยงามและน่าสนใจยิ่งขึ้น หลังจากที่เราได้สร้างโครงสร้างเว็บไซต์ด้วย HTML ในบทเรียนก่อนหน้านี้ CSS จะเข้ามามีบทบาทในการกำหนดรูปแบบ สีสัน ขนาดตัวอักษร และการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บเพจของเรา
CSS คืออะไร
CSS คือภาษาที่ใช้ในการกำหนดรูปแบบการแสดงผลของ HTML โดย CSS จะทำงานร่วมกับ HTML เพื่อควบคุมลักษณะต่างๆ ของเว็บไซต์ เช่น สี ขนาดตัวอักษร ระยะห่างระหว่างองค์ประกอบ และการจัดวางเลย์เอาต์ CSS ช่วยให้เราสามารถแยกส่วนของการออกแบบออกจากเนื้อหา ทำให้การจัดการและปรับปรุงเว็บไซต์ทำได้ง่ายขึ้น
ความสำคัญของ CSS ในการตกแต่งเว็บไซต์
CSS มีความสำคัญอย่างยิ่งในการสร้างเว็บไซต์ที่สวยงามและใช้งานง่าย CSS ช่วยให้เราสามารถควบคุมรูปลักษณ์ของเว็บไซต์ได้อย่างละเอียด ทำให้เว็บไซต์ดูน่าสนใจและดึงดูดผู้เข้าชม นอกจากนี้ CSS ยังช่วยให้เว็บไซต์ของเรามีความเป็นระเบียบและง่ายต่อการบำรุงรักษา
CSS อยู่ภายใต้ HTML
CSS ทำงานร่วมกับ HTML โดย CSS จะถูกนำไปใช้เพื่อกำหนดรูปแบบการแสดงผลของ HTML CSS สามารถถูกนำไปใช้ได้หลายวิธี เช่น การใส่ CSS code ภายใน tag <style> ในส่วน <head> ของ HTML หรือการเชื่อมโยงไฟล์ CSS ภายนอกกับ HTML
CSS Simple Easy
CSS เป็นภาษาที่เรียนรู้ได้ง่ายและใช้งานง่าย แม้ว่าคุณจะไม่มีประสบการณ์ในการเขียนโค้ดมาก่อน คุณก็สามารถเรียนรู้และนำ CSS ไปใช้ในการตกแต่งเว็บไซต์ของคุณได้ CSS มีไวยากรณ์ที่เรียบง่ายและมีคำสั่งต่างๆ ที่หลากหลาย ทำให้คุณสามารถสร้างสรรค์เว็บไซต์ในแบบที่คุณต้องการได้
โครงสร้าง CSS
โครงสร้างของ CSS ประกอบด้วยส่วนสำคัญ 2 ส่วน คือ การ Comment และ การ Select DOM และการแต่งอะไร (Properties)
การ Comment ใน CSS
การ Comment ใน CSS คือการใส่ข้อความที่ไม่ถูกประมวลผลโดยเบราว์เซอร์ การ Comment มีประโยชน์ในการอธิบายโค้ด CSS ของคุณ ทำให้ง่ายต่อการทำความเข้าใจและบำรุงรักษาโค้ดในภายหลัง การ Comment ใน CSS ใช้เครื่องหมาย /* และ */ เพื่อเริ่มต้นและสิ้นสุดการ Comment ตัวอย่างเช่น /* นี่คือ Comment */
การ Select DOM (แต่งใคร)
การ Select DOM คือการเลือก HTML element ที่คุณต้องการตกแต่ง CSS ช่วยให้คุณสามารถเลือก HTML element ต่างๆ ได้หลายวิธี เช่น การเลือกโดยใช้ tag, ID, class หรือ attribute อื่นๆ เมื่อคุณเลือก HTML element ได้แล้ว คุณสามารถใช้ CSS properties เพื่อกำหนดรูปแบบให้กับ element นั้นๆ
การแต่งอะไร (Properties)
การแต่งอะไร (Properties) คือการกำหนดรูปแบบให้กับ HTML element ที่คุณเลือกไว้ CSS properties คือคำสั่งต่างๆ ที่ใช้ในการกำหนดลักษณะของ element เช่น สี ขนาดตัวอักษร ระยะห่าง และการจัดวางเลย์เอาต์ คุณสามารถใช้ CSS properties หลายอย่างร่วมกันเพื่อสร้างรูปแบบที่ซับซ้อนได้
การ Select DOM
การ Select DOM เป็นขั้นตอนสำคัญในการใช้ CSS คุณต้องเลือก HTML element ที่คุณต้องการตกแต่งก่อนที่คุณจะสามารถกำหนดรูปแบบให้กับ element นั้นได้ CSS มีวิธีการเลือก HTML element หลายวิธี ซึ่งแต่ละวิธีก็มีข้อดีและข้อเสียแตกต่างกันไป
ID
ID ใช้ในการเลือก HTML element ที่มี attribute id ที่ตรงกัน ID จะต้องไม่ซ้ำกันในหน้าเว็บเพจเดียว การเลือกโดยใช้ ID ทำได้โดยใช้เครื่องหมาย # ตามด้วยชื่อ ID ตัวอย่างเช่น #myElement
Class
Class ใช้ในการเลือก HTML element ที่มี attribute class ที่ตรงกัน Class สามารถใช้ได้กับหลาย element ในหน้าเว็บเพจเดียวกัน การเลือกโดยใช้ class ทำได้โดยใช้เครื่องหมาย . ตามด้วยชื่อ class ตัวอย่างเช่น .myClass
Tag
Tag ใช้ในการเลือก HTML element ที่มี tag name ที่ตรงกัน การเลือกโดยใช้ tag ทำได้โดยใช้ชื่อ tag โดยตรง ตัวอย่างเช่น p, h1, div
W3School
W3School เป็นเว็บไซต์ที่ให้บริการข้อมูลและบทเรียนเกี่ยวกับการพัฒนาเว็บไซต์ W3School มีบทเรียนเกี่ยวกับ CSS ที่ครอบคลุมทุกหัวข้อ ตั้งแต่พื้นฐานไปจนถึงขั้นสูง คุณสามารถใช้ W3School เพื่อเรียนรู้ CSS และอ้างอิงข้อมูลต่างๆ ได้
ประเภทของการแต่ง CSS
CSS มีประเภทของการแต่งที่หลากหลาย ซึ่งแต่ละประเภทก็มีหน้าที่ในการควบคุมลักษณะต่างๆ ของเว็บไซต์
Text Styling
Text Styling ใช้ในการกำหนดรูปแบบของข้อความ เช่น สี ขนาดตัวอักษร รูปแบบตัวอักษร และการจัดวางข้อความ
Box Model
Box Model เป็นแนวคิดที่สำคัญในการทำความเข้าใจ CSS Box Model อธิบายว่า HTML element แต่ละ element ถูกมองว่าเป็นกล่องที่มีส่วนประกอบต่างๆ เช่น content, padding, border และ margin
Display
Display ใช้ในการควบคุมวิธีการแสดงผลของ HTML element Display มีค่าต่างๆ เช่น block, inline, inline-block, flex และ grid
Position
Position ใช้ในการกำหนดตำแหน่งของ HTML element Position มีค่าต่างๆ เช่น static, relative, absolute, fixed และ sticky
Float
Float ใช้ในการจัดวาง HTML element ในแนวนอน Float มักใช้ในการสร้างเลย์เอาต์แบบคอลัมน์
Text Styling
Text Styling เป็นการกำหนดรูปแบบของข้อความบนเว็บไซต์ CSS มี properties หลายอย่างที่ใช้ในการควบคุมลักษณะของข้อความ
Font Size
Font Size ใช้ในการกำหนดขนาดของตัวอักษร คุณสามารถใช้หน่วยวัดต่างๆ เช่น px, em, rem หรือ %
Color
Color ใช้ในการกำหนดสีของตัวอักษร คุณสามารถใช้ชื่อสี, รหัสสี RGB หรือรหัสสี Hex
Font Weight
Font Weight ใช้ในการกำหนดความหนาของตัวอักษร คุณสามารถใช้ค่าต่างๆ เช่น normal, bold หรือเลข 100-900
Font Family
Font Family ใช้ในการกำหนดรูปแบบตัวอักษร คุณสามารถระบุชื่อ font family ที่คุณต้องการใช้
Box Model
Box Model เป็นแนวคิดที่สำคัญในการทำความเข้าใจ CSS Box Model อธิบายว่า HTML element แต่ละ element ถูกมองว่าเป็นกล่องที่มีส่วนประกอบต่างๆ
Padding
Padding คือพื้นที่รอบๆ content ของ element Padding จะอยู่ภายใน border
Margin
Margin คือพื้นที่รอบๆ border ของ element Margin จะอยู่ภายนอก border
Border
Border คือเส้นขอบรอบๆ element คุณสามารถกำหนดสี ความหนา และรูปแบบของ border ได้
Inspect Element
Inspect Element เป็นเครื่องมือที่ช่วยให้คุณตรวจสอบและแก้ไข CSS ของเว็บไซต์ได้ Inspect Element มีอยู่ในเบราว์เซอร์ส่วนใหญ่ คุณสามารถใช้ Inspect Element เพื่อดู CSS ที่ถูกนำไปใช้กับ element ต่างๆ และแก้ไข CSS ได้โดยตรง
Display
Display ใช้ในการควบคุมวิธีการแสดงผลของ HTML element
Block
Block ทำให้ element แสดงผลเป็น block element Block element จะใช้พื้นที่เต็มความกว้างของ parent element และเริ่มต้นบรรทัดใหม่
Inline
Inline ทำให้ element แสดงผลเป็น inline element Inline element จะใช้พื้นที่เท่าที่จำเป็นและไม่เริ่มต้นบรรทัดใหม่
Inline-Block
Inline-Block ทำให้ element แสดงผลเป็น inline-block element Inline-block element จะมีคุณสมบัติบางอย่างของ block element และ inline element
Flex
Flex ใช้ในการสร้างเลย์เอาต์แบบยืดหยุ่น Flexbox ช่วยให้คุณสามารถจัดวาง element ในแนวนอนหรือแนวตั้งได้อย่างง่ายดาย
Grid
Grid ใช้ในการสร้างเลย์เอาต์แบบตาราง Grid layout ช่วยให้คุณสามารถสร้างเลย์เอาต์ที่ซับซ้อนได้อย่างง่ายดาย
Flex
Flexbox เป็นโมดูลการจัดวางเลย์เอาต์ใน CSS ที่ออกแบบมาเพื่อจัดวางองค์ประกอบในหนึ่งมิติ (แถวหรือคอลัมน์)
Flex Direction
Flex Direction ใช้ในการกำหนดทิศทางการจัดวางของ flex items คุณสามารถใช้ค่าต่างๆ เช่น row, row-reverse, column และ column-reverse
Flex Gold
Flex Gold (น่าจะหมายถึง Flex Grow) ใช้ในการกำหนดว่า flex item จะขยายตัวอย่างไรเมื่อมีพื้นที่ว่างเหลืออยู่
Grid
Grid layout เป็นระบบการจัดวางเลย์เอาต์ใน CSS ที่ออกแบบมาเพื่อจัดวางองค์ประกอบในสองมิติ (แถวและคอลัมน์)
Grid Template Column
Grid Template Column ใช้ในการกำหนดขนาดของคอลัมน์ใน grid
Grid Item
Grid Item คือองค์ประกอบที่อยู่ใน grid container
Position
Position ใช้ในการกำหนดตำแหน่งของ HTML element
Static
Static เป็นค่าเริ่มต้นของ position element ที่มี position: static จะถูกจัดวางตามปกติ
Relative
Relative ทำให้ element ถูกจัดวางตามตำแหน่งปกติ แต่คุณสามารถใช้ properties top, right, bottom และ left เพื่อปรับตำแหน่งของ element ได้
Absolute
Absolute ทำให้ element ถูกจัดวางโดยสัมพันธ์กับ parent element ที่มี position: relative หรือ position: absolute
Fixed
Fixed ทำให้ element ถูกจัดวางโดยสัมพันธ์กับหน้าจอ Element ที่มี position: fixed จะไม่เลื่อนตามการ scroll
Sticky
Sticky ทำให้ element มีพฤติกรรมเหมือน relative จนกว่าจะถึงตำแหน่งที่กำหนดไว้ จากนั้นจะเปลี่ยนเป็น fixed
Float
Float ใช้ในการจัดวาง HTML element ในแนวนอน
Float Left
Float Left ทำให้ element ลอยไปทางซ้าย
Float Right
Float Right ทำให้ element ลอยไปทางขวา
Clear Both
Clear Both ใช้ในการเคลียร์ผลกระทบจาก float
CSS Image
CSS Image ใช้ในการตกแต่งรูปภาพบนเว็บไซต์ คุณสามารถใช้ properties ต่างๆ เช่น width, height, border-radius และ object-fit เพื่อปรับแต่งรูปภาพ
💬 ปรึกษาการเงินฟรีกับผู้เชี่ยวชาญ คลิกเพื่อแอดไลน์
หรือสแกน QR เพื่อแอด
Leave a Reply