Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreCSS - วิธีการใช้งานฉบับสมบูรณ์แบบเจาะลึก (ภาษาไทย)
CSS - วิธีการใช้งานฉบับสมบูรณ์แบบเจาะลึก (ภาษาไทย)
เรียนรู้การพัฒนาเว็บไซต์ ใช้ css ในการตกแต่งความสวยงาม
Created byคาวี พาลีพงษ์
Last updated 8/2024
Thai
What you'll learn
- เรียนรู้ และเข้าใจภาพรวมในหน้าที่ของ css ที่เป็นภาษาที่ใช้ในการกำหนดรูปแบบและการจัดการแสดงผลของเอกสาร HTML
- เรียนรู้ และเข้าใจ css แต่ property แบบเจาะลึก
- ตกแต่งเว็บไซต์ได้อย่างสวยงามงวย css ทำให้มีเว็บไซต์ที่ดูดี
- สามารถเข้าใจและใช้งาน css ได้อย่างเต็มประสิทธิภาพ
Explore related topics
Course content
9 sections • 58 lectures • 3h 31m total length
- CSS คืออะไร1:12
CSS (Cascading Style Sheets) เป็นภาษาที่ใช้สำหรับการตกแต่งและจัดรูปแบบให้กับหน้าเว็บไซต์ที่เขียนด้วย HTML โดย CSS ช่วยกำหนดลักษณะการแสดงผลขององค์ประกอบต่างๆ ในเว็บไซต์
- CSS Syntax1:49
/* กำหนดสีพื้นหลังและสีข้อความให้กับองค์ประกอบ body */
body {
background-color: #f0f0f0; color: #333;
}
/* กำหนดขนาดและสีของหัวข้อ H1 */
h1 {
font-size: 24px; color: #0066cc;
}
- How To Add CSS (วิธีการนำ css มาใช้กับ html)5:59
1. Inline CSS
เป็นการใส่ CSS โดยตรงภายในแท็ก HTML โดยใช้แอตทริบิวต์ style
2. Internal CSS
เป็นการใส่ CSS ภายในไฟล์ HTML เอง โดยการเพิ่มแท็ก <style> ภายในส่วน <head> ของไฟล์ HTML
3. External CSS
เป็นการแยกไฟล์ CSS ออกจากไฟล์ HTML โดยสร้างไฟล์ .css แยกต่างหาก แล้วเชื่อมโยงไฟล์นั้นเข้ากับไฟล์ HTML ผ่านแท็ก <link> ภายใน <head> ของไฟล์ HTML
- Example Code0:30
ชุด source code ตัวอย่างการ coding
- Element Selector (เลือกโดยใช้ชื่อแท็ก HTML)6:01
Element Selector ใน CSS คือการเลือกและกำหนดสไตล์ให้กับองค์ประกอบ (element) ใน HTML ตามชื่อของแท็ก (tag)
- Class Selector (เลือกโดยใช้ชื่อคลาส)4:50
Class Selector ใน CSS คือการเลือกและกำหนดสไตล์ให้กับองค์ประกอบ (element) ที่มีคลาส (class) ที่กำหนดไว้ใน HTML โดยสามารถใช้คลาสซ้ำกันได้ในหลายๆ องค์ประกอบ ทำให้การจัดการสไตล์เป็นเรื่องง่ายและยืดหยุ่นมากขึ้น
- ID Selector (เลือกโดยใช้ชื่อไอดี)4:18
ID Selector ใน CSS คือการเลือกและกำหนดสไตล์ให้กับองค์ประกอบ (element) ที่มีไอดี (id) ที่กำหนดไว้ใน HTML โดยไอดีเป็นตัวระบุที่ไม่ซ้ำกันในแต่ละหน้าเว็บไซต์ ซึ่งหมายความว่าแต่ละไอดีสามารถใช้งานได้เพียงครั้งเดียวต่อหนึ่งหน้า HTML
- Attribute Selector (เลือกโดยใช้แอตทริบิวต์)16:40
Attribute Selector ใน CSS คือการเลือกและกำหนดสไตล์ให้กับองค์ประกอบ (element) ที่มีแอตทริบิวต์ (attribute) เฉพาะเจาะจง หรือที่มีค่าของแอตทริบิวต์ตามที่กำหนดไว้ ซึ่งช่วยให้สามารถเลือกองค์ประกอบได้อย่างละเอียดมากขึ้น
- Pseudo-class Selector (เลือกโดยใช้สถานะหรือการโต้ตอบ)3:35
Pseudo-class Selector ใน CSS คือการเลือกและกำหนดสไตล์ให้กับองค์ประกอบ (element) ที่อยู่ในสถานะหรือเงื่อนไขพิเศษบางอย่างที่ไม่สามารถระบุได้ด้วยการใช้ Selectors ปกติ เช่น การโฟกัสเมาส์อยู่ที่องค์ประกอบ การเลือกองค์ประกอบที่เป็นลำดับแรกของแท็กพ่อแม่ หรือการเยี่ยมชมลิงก์
- Example Code (สำหรับ Element Selector)0:31
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Class Selector)0:29
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ ID Selector)0:24
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Attribute Selector)0:56
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Pseudo-class Selector)0:16
ชุด source code ตัวอย่างการ coding
- Margin (ระยะห่างรอบนอก)6:43
Margin ใน CSS คือพื้นที่ว่างที่อยู่ภายนอกขององค์ประกอบ (element) ใน HTML ซึ่งเป็นการเว้นระยะห่างระหว่างองค์ประกอบนั้นกับองค์ประกอบอื่น ๆ หรือขอบของหน้าจอ
Margin ช่วยในการจัดวางและจัดระยะห่างระหว่างองค์ประกอบต่าง ๆ บนหน้าเว็บไซต์ ทำให้การจัดหน้าเว็บดูมีระเบียบและเป็นไปตามต้องการ
การตั้งค่า Margin:
Margin สามารถตั้งค่าได้ทั้ง 4 ด้าน (บน, ขวา, ล่าง, ซ้าย) โดยสามารถใช้หน่วยวัดต่างๆ เช่น พิกเซล (px), เปอร์เซ็นต์ (%), อีเอ็ม (em) หรือสามารถตั้งค่าเป็น auto เพื่อให้เบราว์เซอร์คำนวณระยะห่างให้อัตโนมัติ
- Border (ขอบของกล่อง)6:24
Border ใน CSS คือเส้นขอบที่อยู่รอบๆ องค์ประกอบ (element) ใน HTML ซึ่งเป็นเส้นที่วาดรอบขอบขององค์ประกอบและสามารถปรับแต่งได้หลากหลาย ทั้งความหนา สี และรูปแบบของเส้น
การตั้งค่า Border:
Border สามารถตั้งค่าได้ทั้ง 4 ด้าน (บน, ขวา, ล่าง, ซ้าย) หรือจะตั้งค่าทั้งหมดพร้อมกันในครั้งเดียวก็ได้ โดยใช้คำสั่ง border ตามด้วยค่าต่างๆ ดังนี้:
ความหนาของเส้นขอบ (width) เช่น 1px, 2px, thin, medium, thick
รูปแบบของเส้นขอบ (style) เช่น solid, dashed, dotted, double, groove, ridge, inset, outset, none
สีของเส้นขอบ (color) เช่น red, #ff0000, rgb(255, 0, 0)
- Padding (ระยะห่างรอบใน)4:47
Padding ใน CSS คือพื้นที่ว่างที่อยู่ภายในขององค์ประกอบ (element) ระหว่างเนื้อหา (content) ขององค์ประกอบและเส้นขอบ (border) ขององค์ประกอบนั้น การกำหนดค่า Padding ช่วยให้เนื้อหาภายในองค์ประกอบมีระยะห่างจากขอบของตัวองค์ประกอบเอง ทำให้เนื้อหาดูไม่ชิดขอบมากเกินไป
การตั้งค่า Padding:
Padding สามารถตั้งค่าได้ทั้ง 4 ด้าน (บน, ขวา, ล่าง, ซ้าย) และสามารถใช้หน่วยวัดเช่น พิกเซล (px), เปอร์เซ็นต์ (%), อีเอ็ม (em) เป็นต้น
- Content (เนื้อหาภายในกล่อง)4:22
ใน CSS, content เป็นคุณสมบัติที่ใช้ในชุดของ ::before และ ::after pseudo-elements เพื่อเพิ่มเนื้อหาหรือข้อมูลลงไปก่อนหรือหลังเนื้อหาหลักขององค์ประกอบ (element) โดยที่ไม่ต้องเพิ่มเนื้อหานั้นลงใน HTML เอง
การใช้งาน content:
content สามารถใช้ในการสร้างเนื้อหาเพิ่มเติมที่ไม่สามารถจัดการได้โดยตรงจาก HTML โดยจะมีประโยชน์ในการสร้างสไตล์ที่มีเนื้อหาพิเศษ เช่น ไอคอน, สัญลักษณ์, ข้อความเพิ่มเติม เป็นต้น
- Example Code (สำหรับ Margin)0:39
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Border)0:28
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Padding)0:28
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Content)0:29
ชุด source code ตัวอย่างการ coding
- Font Family (ประเภทของฟอนต์)5:38
Font Family ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดประเภทหรือกลุ่มของฟอนต์ที่ใช้แสดงข้อความในองค์ประกอบ (element) บนหน้าเว็บ โดยสามารถระบุลำดับของฟอนต์ที่ต้องการใช้ให้เบราว์เซอร์เลือกได้ตามลำดับความสำคัญ
การใช้งาน Font Family:
font-family ช่วยให้คุณสามารถกำหนดชุดของฟอนต์ที่ใช้ในการแสดงข้อความ โดยการระบุฟอนต์หลักและฟอนต์สำรอง ในกรณีที่ฟอนต์หลักไม่สามารถใช้งานได้ ฟอนต์สำรองจะถูกนำมาใช้แทน
- Font Size (ขนาดของฟอนต์)5:42
Font Size ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดขนาดของข้อความในองค์ประกอบ (element) โดยสามารถใช้หน่วยวัดที่แตกต่างกันเพื่อปรับขนาดของฟอนต์ให้เหมาะสมกับการออกแบบหน้าเว็บ
หน่วยวัดที่ใช้สำหรับ Font Size:
พิกเซล (px): หน่วยวัดที่ระบุขนาดฟอนต์เป็นจำนวนพิกเซล
อีเอ็ม (em): หน่วยวัดที่สัมพันธ์กับขนาดฟอนต์ขององค์ประกอบที่เป็น parent หรือค่าขนาดฟอนต์ขององค์ประกอบปัจจุบัน
เปอร์เซ็นต์ (%): หน่วยวัดที่สัมพันธ์กับขนาดฟอนต์ขององค์ประกอบ parent
รีม (rem): หน่วยวัดที่สัมพันธ์กับขนาดฟอนต์ของ root element (<html>)
แคล (pt): หน่วยวัดที่ใช้ในงานพิมพ์และมีขนาดเท่ากับ 1/72 นิ้ว
Viewport Width (vw): หน่วยวัดที่สัมพันธ์กับความกว้างของ viewport (พื้นที่ที่แสดงผลของหน้าเว็บ)
การใช้ Font Size กับ Responsive Design:
การใช้หน่วยวัดเช่น vw, vh, หรือ rem ช่วยให้ขนาดฟอนต์ปรับตัวได้ตามขนาดของหน้าจอหรือ viewport, ทำให้เว็บไซต์สามารถตอบสนองต่ออุปกรณ์ที่มีขนาดหน้าจอแตกต่างกันได้ดี
- Font Weight (น้ำหนักของฟอนต์)5:24
Font Weight ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดความหนาของตัวอักษรในข้อความ โดยการตั้งค่า font-weight สามารถช่วยทำให้ข้อความดูหนาขึ้นหรือลดความหนาได้ตามต้องการ
การใช้งาน Font Weight:
คุณสมบัติ font-weight มีหลายค่าให้เลือกใช้งาน ซึ่งสามารถกำหนดเป็นค่าตัวเลขที่บ่งบอกความหนาของฟอนต์ หรือจะใช้คำศัพท์ที่มีความหมายเฉพาะก็ได้
1.ใช้ค่าเป็นตัวเลข: (100 - 900)
2.ใช้คำศัพท์: (normal, bold)
- Text Alignment (การจัดแนวข้อความ)5:22
Text Alignment ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดตำแหน่งของข้อความภายในองค์ประกอบ (element) การใช้ text-align ช่วยให้คุณสามารถควบคุมการจัดตำแหน่งของข้อความได้ตามต้องการ เช่น จัดกลาง, จัดชิดซ้าย, จัดชิดขวา หรือจัดเต็มบรรทัด
- Example Code (สำหรับ Font Family)0:33
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Font Size)0:37
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Font Weight)0:43
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Text Alignment)0:57
ชุด source code ตัวอย่างการ coding
- Color (สีของข้อความ)4:00
Color ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดสีของข้อความบนหน้าเว็บ การใช้ color ช่วยให้สามารถปรับแต่งสีให้ตรงตามความต้องการของการออกแบบ
- Background Color (สีพื้นหลัง)5:19
Background Color ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดสีพื้นหลังขององค์ประกอบ (element) บนหน้าเว็บ การใช้ background-color ช่วยให้สามารถตั้งค่าค่าสีพื้นหลังเพื่อปรับแต่งลักษณะของการแสดงผลให้ตรงตามการออกแบบ
- Background Image (ภาพพื้นหลัง)4:59
Background Image ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดรูปภาพพื้นหลังสำหรับองค์ประกอบ (element) บนหน้าเว็บ การใช้ background-image ช่วยให้คุณสามารถตั้งค่าภาพพื้นหลังให้กับองค์ประกอบต่างๆ เพื่อปรับแต่งลักษณะการแสดงผล
- Opacity (ความโปร่งแสง)5:31
Opacity ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดความทึบ (หรือความโปร่งใส) ขององค์ประกอบบนหน้าเว็บ โดยสามารถปรับเปลี่ยนระดับความโปร่งใสขององค์ประกอบได้ตามต้องการ
ค่า Opacity:
0: องค์ประกอบจะโปร่งใสมากที่สุด (ซ่อนอยู่ไม่เห็น)
1: องค์ประกอบจะทึบเต็มที่ (มองเห็นได้ปกติ)
ค่าในช่วง 0 ถึง 1: ความโปร่งใสจะอยู่ระหว่างเต็มที่ (1) และโปร่งใสมาก (0) โดยใช้ทศนิยม เช่น 0.1, 0.3, 0.8
- Example Code (สำหรับ Color)0:31
ชุด source code ตัวอย่างการ coding
- Example Code (Background Color)0:50
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Background Image)0:30
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Opacity)0:33
ชุด source code ตัวอย่างการ coding
- Static (การจัดวางตามลำดับธรรมชาติ)6:58
CSS Positioning คือวิธีการกำหนดตำแหน่งขององค์ประกอบในหน้าเว็บไซต์ โดยใช้คุณสมบัติ position เพื่อควบคุมตำแหน่งและการจัดเรียงขององค์ประกอบบนหน้าเว็บ
static (ค่าพื้นฐาน):
การทำงาน: ตำแหน่งขององค์ประกอบจะเป็นไปตามลำดับการจัดเรียงปกติในเอกสาร (flow)
การกำหนดค่า: ไม่สามารถใช้ top, right, bottom, หรือ left ได้
- Relative (การจัดวางตามลำดับธรรมชาติ แต่สามารถปรับตำแหน่งได้)7:39
CSS Positioning คือวิธีการกำหนดตำแหน่งขององค์ประกอบในหน้าเว็บไซต์ โดยใช้คุณสมบัติ position เพื่อควบคุมตำแหน่งและการจัดเรียงขององค์ประกอบบนหน้าเว็บ
relative:
การทำงาน: องค์ประกอบจะถูกจัดเรียงตามตำแหน่งปกติ แต่สามารถย้ายตำแหน่งได้ตามค่า top, right, bottom, และ left ที่ระบุ
การกำหนดค่า: ใช้ top, right, bottom, และ left เพื่อเลื่อนตำแหน่งจากตำแหน่งเริ่มต้น
- Absolute (การจัดวางที่อ้างอิงจากบรรพบุรุษที่มีตำแหน่งสัมพันธ์)11:54
CSS Positioning คือวิธีการกำหนดตำแหน่งขององค์ประกอบในหน้าเว็บไซต์ โดยใช้คุณสมบัติ position เพื่อควบคุมตำแหน่งและการจัดเรียงขององค์ประกอบบนหน้าเว็บ
absolute:
การทำงาน: องค์ประกอบจะถูกจัดเรียงตามตำแหน่งที่ระบุโดยอิงจากตำแหน่งขององค์ประกอบที่มีตำแหน่งพ่อแม่ที่ไม่ใช่ static (พ่อแม่ที่มี relative, absolute, fixed, หรือ sticky)
การกำหนดค่า: ใช้ top, right, bottom, และ left เพื่อกำหนดตำแหน่งที่แน่นอน
- Fixed (การจัดวางที่ยึดติดกับหน้าจอ)6:06
CSS Positioning คือวิธีการกำหนดตำแหน่งขององค์ประกอบในหน้าเว็บไซต์ โดยใช้คุณสมบัติ position เพื่อควบคุมตำแหน่งและการจัดเรียงขององค์ประกอบบนหน้าเว็บ
fixed:
การทำงาน: องค์ประกอบจะถูกจัดเรียงตามตำแหน่งที่ระบุโดยอิงจากขอบของหน้าต่างเบราว์เซอร์ ไม่ว่าจะเลื่อนหน้าเว็บหรือไม่
การกำหนดค่า: ใช้ top, right, bottom, และ left เพื่อกำหนดตำแหน่งที่แน่นอน
- Sticky (การจัดวางที่ผสมผสานระหว่าง relative และ fixed)8:48
CSS Positioning คือวิธีการกำหนดตำแหน่งขององค์ประกอบในหน้าเว็บไซต์ โดยใช้คุณสมบัติ position เพื่อควบคุมตำแหน่งและการจัดเรียงขององค์ประกอบบนหน้าเว็บ
sticky:
การทำงาน: องค์ประกอบจะเปลี่ยนจาก relative เป็น fixed เมื่อถึงตำแหน่งที่กำหนดในหน้าต่างเบราว์เซอร์ ขึ้นอยู่กับการเลื่อนหน้า
การกำหนดค่า: ใช้ top, right, bottom, และ left เพื่อกำหนดตำแหน่งที่ "ติด" เมื่อถึง
- Example Code (สำหรับ Static)0:41
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Relative)0:45
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Absolute)1:09
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Fixed)0:52
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Sticky)0:45
ชุด source code ตัวอย่างการ coding
- Flexbox (จัดวางองค์ประกอบในแนวแกนหลักและแกนขวาง)10:05
CSS Flexbox
Flexbox (Flexible Box Layout) คือเทคนิคการจัดเรียงและจัดตำแหน่งขององค์ประกอบในแถว (row) หรือคอลัมน์ (column) โดยใช้ฟังก์ชันที่ช่วยให้การจัดวางมีความยืดหยุ่นและปรับตัวได้ดี
คุณสมบัติหลักของ Flexbox:
1.การกำหนดคอนเทนเนอร์ (Flex Container):
2.การกำหนดทิศทาง (Flex Direction):
row: จัดเรียงองค์ประกอบในแถว (แนวนอน)
column: จัดเรียงองค์ประกอบในคอลัมน์ (แนวตั้ง)
row-reverse: จัดเรียงในแถวแบบย้อนกลับ
3.การจัดตำแหน่ง (Justify Content):
flex-start: เริ่มต้นที่ต้นทาง
center: จัดกลาง
flex-end: สิ้นสุดที่ปลายทาง
space-between: แบ่งช่องว่างเท่าๆ กันระหว่างองค์ประกอบ
4.การจัดตำแหน่งแนวขวาง (Align Items):
stretch: ขยายให้เต็มพื้นที่
flex-start: เริ่มต้นที่ต้นทาง
center: จัดกลาง
flex-end: สิ้นสุดที่ปลายทาง
5.การจัดตำแหน่งแนวขวางในแถว (Align Self):
ใช้ในการกำหนดตำแหน่งของแต่ละ Flex Item
- Grid (จัดวางองค์ประกอบในรูปแบบกริด)8:27
CSS Grid
CSS Grid (Grid Layout) คือเทคนิคการจัดเลย์เอาต์ที่ใช้ระบบกริด (ตาราง) เพื่อจัดการกับการวางตำแหน่งและจัดเรียงขององค์ประกอบในทั้งแถวและคอลัมน์ โดยมีความยืดหยุ่นในการออกแบบที่สูงกว่า
คุณสมบัติหลักของ Grid:
1.การกำหนดคอนเทนเนอร์ (Grid Container):
2.การกำหนดขนาดของคอลัมน์และแถว (Grid Template Columns and Rows):
grid-template-columns: กำหนดขนาดของคอลัมน์
grid-template-rows: กำหนดขนาดของแถว
3.การกำหนดพื้นที่ของกริด (Grid Area):
grid-area: กำหนดตำแหน่งและขนาดของ Grid Item โดยการระบุชื่อพื้นที่
4.การจัดตำแหน่งใน Grid (Justify Items, Align Items):
justify-items: การจัดแนวแนวนอนของ Grid Items
align-items: การจัดแนวแนวตั้งของ Grid Items
5.การจัดพื้นที่ของกริด (Grid Template Areas):
ใช้เพื่อกำหนดชื่อพื้นที่ในกริดที่ Grid Items จะถูกวาง
- Example Code (สำหรับ Flexbox)0:44
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Grid)1:04
ชุด source code ตัวอย่างการ coding
- Transition (การเปลี่ยนแปลงคุณสมบัติ)6:37
CSS Transition คือฟีเจอร์ที่ช่วยให้คุณสามารถเพิ่มเอฟเฟกต์การเปลี่ยนแปลง (transition) ให้กับคุณสมบัติของ CSS เมื่อเกิดการเปลี่ยนแปลงจากสถานะหนึ่งไปยังอีกสถานะหนึ่ง ตัวอย่างเช่น การเปลี่ยนสี, ขนาด, หรือความโปร่งใส ขององค์ประกอบ
- Animation (การสร้างภาพเคลื่อนไหว)10:10
CSS Animation คือฟีเจอร์ที่ช่วยให้คุณสามารถสร้างและควบคุมการเคลื่อนไหว (animations) ขององค์ประกอบในเว็บเพจโดยใช้ CSS โดยไม่ต้องใช้ JavaScript การใช้ CSS Animation ช่วยให้คุณสามารถสร้างเอฟเฟกต์ที่ซับซ้อน เช่น การเคลื่อนไหว, การเปลี่ยนสี, หรือการขยาย/ย่อขององค์ประกอบได้อย่างราบรื่น
- Example Code (สำหรับ Transition)0:29
ชุด source code ตัวอย่างการ coding
- Example Code (สำหรับ Animation)0:34
ชุด source code ตัวอย่างการ coding
- @media8:10
@media คือคำสั่งใน CSS ที่ใช้เพื่อกำหนดกฎการสไตล์ที่แตกต่างกันตามขนาดของหน้าจอหรือสื่อที่ใช้ เช่น โทรศัพท์มือถือ, แท็บเล็ต, หรือเดสก์ท็อป คำสั่งนี้ช่วยให้สามารถสร้างการออกแบบที่ตอบสนอง (responsive design) ซึ่งปรับให้เหมาะสมกับอุปกรณ์ที่แตกต่างกัน
- Example Code0:59
ชุด source code ตัวอย่างการ coding
Requirements
- รู้จักและมีความเข้าใจ HTML เบื้องต้น
- มีความมุ่งมั่น และชอบในการเขียนโปรแกรม
Description
การสอน CSS เพื่อความเข้าใจและนำไปใช้งานได้ย่างถูกต้องเหมาะสม ได้ทำการจัดหมวดหมู่การสอนดังนี้
1. CSS Introduction (บทนำ)
รู้ว่า CSS คืออะไร หน้าที่ของ CSS คืออะไร และใช้ช่วยในการพัฒนาปรับแต่งเว็บไซต์ได้อย่างไร
2. CSS Selectors (ตัวเลือก)
เรียนรู้และเข้าใจ Selectors ที่ใช้ในการเลือกองค์ประกอบ HTML ที่ต้องการกำหนดสไตล์
3. CSS Box Model (โมเดลกล่อง)
เรียนรู้ และเข้าใจ css ที่ใช้ในการกำหนดลักษณะของกล่องที่ล้อมรอบองค์ประกอบ HTML แต่ละตัว
4. CSS Typography (การจัดการข้อความ)
เรียนรู้ และเข้าใจ css ที่ใช้ในการกำหนดลักษณะและการจัดรูปแบบข้อความ
5. CSS Color and Background (สีและพื้นหลัง)
เรียนรู้ และเข้าใจ css ที่ใช้ในการกำหนดสีและพื้นหลังขององค์ประกอบ
6. CSS Positioning (การจัดวางตำแหน่ง)
เรียนรู้ และเข้าใจ css ที่ใช้ในการจัดวางตำแหน่งขององค์ประกอบในหน้าเว็บ
7. CSS Flexbox and Grid (การจัดวางแบบ Flexbox และ Grid)
เรียนรู้ และเข้าใจ css ที่ใช้ในการจัดวางเลย์เอาต์ของหน้าเว็บ
8. CSS Animation and Transition (การสร้างภาพเคลื่อนไหวและการเปลี่ยนแปลง)
เรียนรู้ และเข้าใจ css ที่ใช้ในการสร้างภาพเคลื่อนไหวและการเปลี่ยนแปลงลักษณะขององค์ประกอบ
9. CSS Media Queries (การตอบสนองต่อขนาดหน้าจอ)
เรียนรู้ และเข้าใจ css ที่ใช้ในการปรับรูปแบบการแสดงผลตามขนาดหน้าจอหรืออุปกรณ์
Who this course is for:
- นักเรียน นักศึกษาที่ต้องการอยากเป็นนักพัฒนาเว็บไซต์ให้มีความสวยงามให้น่าใช้มากขึ้น
- สำหรับนักพัฒนามือที่ต้องการเรียนรู้และเข้าใจทักษะการใช้ css แบบเข้าใจเพื่อนำไปพัฒนาเว็บไซต์ให้ดีขึ้น