บทเรียน HTML และ CSS สำหรับผู้เริ่มต้น
บทเรียนง่าย ๆ เกี่ยวกับการสร้างเว็บเพจด้วยภาษา HTML และ CSS สำหรับผู้เริ่มต้น พร้อมทฤษฎีโดยละเอียดและชุดแบบฝึกหัด
พื้นฐาน HTML
001
ภาษาสำหรับการสร้างเว็บไซต์
002ภาษา HTML
003แท็ก HTML
004คุณลักษณะในแท็ก HTML
005สไตล์ของแท็ก HTML
006โครงสร้างหลักของหน้า HTML
007การทำงานกับแท็ก HTML พื้นฐาน
008แท็กสำหรับย่อหน้า
009แท็กสำหรับหัวข้อหน้า
010แท็กสำหรับเน้นข้อความด้วยตัวหนา
011แท็กสำหรับเน้นข้อความแบบตัวเอียง
012รายการแบบไม่มีลำดับใน HTML
013รายการลำดับใน HTML
014การทำงานกับลิงก์ใน HTML
015ลิงก์ภายในใน HTML
016การทำงานกับรูปภาพใน HTML
017ความกว้างของรูปภาพใน HTML
018ความสูงของรูปภาพใน HTML
019ความกว้างและความสูงของรูปภาพใน HTML
020ทำงานกับตารางใน HTML
021ความกว้างและความสูงของตารางใน HTML
022เซลล์ส่วนหัวในตาราง HTML
023ฝึกปฏิบัติเกี่ยวกับแท็ก HTML พื้นฐาน
พื้นฐาน CSS
024
พื้นฐานการทำงานกับภาษา CSS
025วิธีการทำงานกับ CSS
026คีย์เวิร์ดสำหรับสีใน CSS
027สีใด ๆ ใน CSS
028ความกว้างและความสูงขององค์ประกอบใน CSS
029การจัดแนวข้อความใน CSS
030การจัดตำแหน่งข้อความชิดขวาใน CSS
031การจัดข้อความให้อยู่กึ่งกลางใน CSS
032การจัดข้อความชิดซ้ายใน CSS
033การจัดข้อความให้ชิดขวาและชิดซ้ายพร้อมกันใน CSS
034ฝึกปฏิบัติการจัดตำแหน่งข้อความใน CSS
035ความหนาของข้อความใน CSS
036ตัวเอียงใน CSS
037ขนาดฟอนต์ใน CSS
038ประเภทฟอนต์ใน CSS
039การเว้นระยะระหว่างบรรทัดใน CSS
040ความหมายของ line-height ที่ไม่มีหน่วยใน CSS
041คุณสมบัติแบบย่อ font ใน CSS
042การย่อหน้าแรกของข้อความใน CSS
043เอฟเฟกต์ข้อความใน CSS
044การขีดเส้นใต้ข้อความใน CSS
045การขีดเส้นข้อความด้านบนใน CSS
046ขีดฆ่าข้อความใน CSS
047การยกเลิกเอฟเฟกต์สำหรับข้อความใน CSS
048แบบฝึกหัดคุณสมบัติ CSS พื้นฐาน
ตัวเลือก
049
ความสัมพันธ์แบบเครือญาติระหว่างแท็กใน HTML
050การสืบทอดคุณสมบัติ CSS
051การจัดกลุ่มตัวเลือกใน CSS
052คุณสมบัติทั่วไปเมื่อจัดกลุ่มตัวเลือกใน CSS
053ตัวเลือก (Selector) ขององค์ประกอบลูกใน CSS
054ซีเล็คเตอร์ลูกใน CSS
055คลาสขององค์ประกอบใน CSS
056แท็ก span สำหรับส่วนข้อความใน HTML
057แท็ก div สำหรับการจัดกลุ่มแท็กใน HTML
058การจัดกลุ่มคลาสใน CSS
059แท็กที่มีคลาสที่กำหนดใน CSS
060CSS Selector ลูกหลานและคลาส
061การรวมกันที่ซับซ้อนของซีเลกเตอร์แบบลูกหลานและคลาสใน CSS
062ข้อผิดพลาดของมือใหม่ในตัวเลือกเซเลคเตอร์ของลูกหลาน
063องค์ประกอบที่มีหลายคลาส CSS
064การเลือกองค์ประกอบด้วย id ที่ไม่ซ้ำใน CSS
065ตัวเลือกตาม id และคลาส CSS
066การใช้งาน id ใน CSS
067การเลือกองค์ประกอบโดยใช้หลายคลาสใน CSS
068การเขียนหลายซีเล็กเตอร์ติดกันใน CSS
069ข้อผิดพลาดเมื่อใช้ตัวเลือก CSS หลายตัว
070การจัดกลุ่มซีเล็กเตอร์ที่ซับซ้อนใน CSS
071ข้อผิดพลาดในการจัดกลุ่มตัวเลือก CSS ที่ซับซ้อน
072ฝึกฝนการผสมซีเล็กเตอร์ CSS
073ลำดับความสำคัญของซีเลกเตอร์ CSS
074หมายเหตุเกี่ยวกับความขัดแย้งของคุณสมบัติ CSS
075กฎความเฉพาะเจาะจงใน CSS
076ลำดับความสำคัญของตัวเลือก CSS ที่เป็นลูกหลาน
077ซีเลกเตอร์เพื่อนบ้านใน CSS
078ซีเลกเตอร์พี่น้องใน CSS
079ซีเล็กเตอร์สากลใน CSS
080ตัวเลือกแอตทริบิวต์ใน CSS
081สถานะของลิงก์ใน CSS
082ความละเอียดอ่อนของลำดับสถานะลิงก์ใน CSS
083สถานะลิงก์ link และ visited ใน CSS
084การใช้งานปกติของสถานะลิงก์ใน CSS
085ตัวเลือก CSS ที่ซับซ้อนพร้อมสถานะของลิงก์
086ลิงก์ที่มีคลาสใน CSS
087การเลือกองค์ประกอบปลายใน CSS
088การเลือกองค์ประกอบตามตำแหน่งใน CSS
089การเลือกเอลิเมนต์ลูกเพียงตัวเดียวใน CSS
090การเลือกองค์ประกอบที่ว่างเปล่าใน CSS
091การเลือกตามตำแหน่งและประเภทขององค์ประกอบใน CSS
092ซีเลคเตอร์การปฏิเสธใน CSS
การตกแต่ง
093
การตั้งค่าสีพื้นหลังใน CSS
094พื้นฐานการทำงานกับเส้นขอบใน CSS
095เส้นขอบแบบทึบใน CSS
096เส้นขอบแบบจุดใน CSS
097เส้นขอบแบบประใน CSS
098เส้นขอบนูนใน CSS
099เส้นขอบสองชั้นใน CSS
100คุณสมบัติชอร์ตแฮนด์สำหรับเส้นขอบใน CSS
101กรอบสำหรับแต่ละด้านใน CSS
102การทำให้ขอบบล็อกโค้งมนใน CSS
103การกำหนดขอบโค้งมนให้กับพื้นหลังใน CSS
104การสร้างวงกลมด้วย CSS
105การกำหนดความโค้งมนให้กับมุมต่างๆ ใน CSS
106ค่าสี่ค่าสำหรับการกำหนดความโค้งมนของมุมต่าง ๆ ใน CSS
107CSS: ค่ามุมโค้งมนสองค่าสำหรับมุมที่ต่างกัน
108ค่าสำหรับมุมสามมุมที่แตกต่างกันใน CSS
109มุมโค้งมนเป็นเปอร์เซ็นต์ใน CSS
110การสร้างวงกลมด้วยการกำหนดความโค้งมนเป็นเปอร์เซ็นต์ใน CSS
111รูปภาพพื้นหลังใน CSS
112การทำซ้ำภาพพื้นหลังใน CSS
113คุณสมบัติอื่นๆ สำหรับพื้นหลังใน CSS
114การทำงานกับมาร์กเกอร์รายการ ul ใน CSS
115เครื่องหมายรายการแบบสี่เหลี่ยมสำหรับ ul ใน CSS
116การกำหนดมาร์กเกอร์รายการ ul เป็นวงกลมใน CSS
117การทำงานกับเครื่องหมายรายการ ul ใน CSS
118การไม่มีเครื่องหมายรายการ ul ใน CSS
119การทำงานกับเครื่องหมายรายการ ol ใน CSS
120กำหนดเลขโรมันตัวพิมพ์เล็กสำหรับรายการ ol ใน CSS
121ตัวเลขโรมันพิมพ์ใหญ่สำหรับรายการ ol ใน CSS
122ตัวอักษรละตินแบบตัวพิมพ์เล็กสำหรับรายการ ol ใน CSS
123ตัวอักษรละตินพิมพ์ใหญ่สำหรับรายการ ol ใน CSS
124ตัวอักษรกรีกตัวพิมพ์เล็กสำหรับรายการ ol ใน CSS
125ตัวเลขนำหน้าด้วยศูนย์สำหรับรายการ ol ใน CSS
แบบจำลองกล่อง
126
การทำงานกับ margin ใน CSS
127การเยื้อง margin สำหรับด้านต่างๆ ใน CSS
128ค่าหลายค่าในคุณสมบัติ margin ใน CSS
129ความหมายสี่ค่าของคุณสมบัติ margin ใน CSS
130ค่าสองค่าในคุณสมบัติ margin ใน CSS
131สามค่าในคุณสมบัติ margin ใน CSS
132การทำงานกับ padding ใน CSS
133การเยื้อง padding สำหรับด้านต่างๆ ใน CSS
134ค่าหลายค่าในคุณสมบัติ padding ใน CSS
135การทำงานกับ padding ใน CSS
136อิทธิพลของเส้นขอบต่อการขยายตัวขององค์ประกอบใน CSS
137อิทธิพลของ padding และเส้นขอบที่มีต่อการขยายองค์ประกอบใน CSS
138การยกเลิกการขยายองค์ประกอบใน CSS
139ลักษณะเฉพาะขององค์ประกอบแบบบล็อกใน CSS
140ความกว้างและความสูงขององค์ประกอบบล็อกใน CSS
141ความกว้างขององค์ประกอบบล็อกใน CSS
142ความสูงขององค์ประกอบบล็อกใน CSS
143ความสูงขององค์ประกอบบล็อกที่ไม่มีเนื้อหาใน CSS
144องค์ประกอบบล็อกหลายตัวเรียงกันใน CSS
145คุณสมบัติขององค์ประกอบแบบอินไลน์ใน CSS
146ความกว้างและความสูงขององค์ประกอบอินไลน์ใน CSS
147องค์ประกอบอินไลน์หลายรายการเรียงกันใน CSS
148การเยื้องระหว่างองค์ประกอบอินไลน์ใน CSS
149การกำหนดบล็อกโมเดลของแท็ก HTML
150ทำงานกับคุณสมบัติ display ใน CSS
151ลักษณะพิเศษของอินไลน์-บล็อกเอเลเมนต์ใน CSS
152ความกว้างและความสูงขององค์ประกอบบล็อกแบบอินไลน์ใน CSS
153ความกว้างขององค์ประกอบแบบอินไลน์-บล็อกใน CSS
154ความสูงขององค์ประกอบอินไลน์-บล็อกใน CSS
155การจัดวางองค์ประกอบแบบ inline-block หลายอันติดกันใน CSS
156การจัดวางบล็อกองค์ประกอบใน CSS
157การจัดวางองค์ประกอบแบบบล็อกโดยมีระยะห่างด้านซ้ายใน CSS
158การจัดวางองค์ประกอบบล็อกด้วยการเยื้องขวาใน CSS
159การจัดตำแหน่งองค์ประกอบอินไลน์ใน CSS
160การจัดองค์ประกอบ inline ให้อยู่กึ่งกลางใน CSS
161การจัดกึ่งกลางองค์ประกอบอินไลน์หลายอัน
162การจัดตำแหน่งองค์ประกอบ inline ตามขอบขวาใน CSS
163การจัดวางองค์ประกอบแบบอินไลน์บล็อกใน CSS
164การจัดกึ่งกลางองค์ประกอบแบบ Inline-block ใน CSS
165การจัดตำแหน่งอินไลน์บล็อกเอลิเมนต์ชิดขวาใน CSS
166องค์ประกอบ Flex ใน CSS
167ความสูงของ parent ขององค์ประกอบ flex ใน CSS
168ความกว้างขององค์ประกอบแม่แบบเฟล็กซ์ใน CSS
169พ่อแม่ขององค์ประกอบ Flex แบบอินไลน์-บล็อกใน CSS
170การเยื้อง padding ของผู้ปกครองขององค์ประกอบ flex ใน CSS
171การเยื้อง margin ให้กับองค์ประกอบลูกใน CSS
172การจัดตำแหน่งองค์ประกอบ flex ใน CSS
173การจัดตัวฟลเลกซ์เอลิเมนต์ให้อยู่กึ่งกลางใน CSS
174การจัดเรียงองค์ประกอบ flex ตามคอนเทนเนอร์หลักใน CSS
175การจัดเรียงองค์ประกอบเฟล็กซ์ตามผู้ปกครองโดยมีระยะห่าง
176การจัดตำแหน่งองค์ประกอบ flex ตาม parent พร้อมระยะห่างเท่ากัน
การจัดตำแหน่ง
177
การจัดวางตำแหน่งแบบสัมบูรณ์ขององค์ประกอบใน CSS
178การจัดวางตำแหน่งแบบสัมพัทธ์ขององค์ประกอบใน CSS
179การจัดตำแหน่งสัมพัทธ์กับผู้ปกครองใน CSS
180การจัดตำแหน่งสัมพัทธ์กับผู้ปกครองแบบ Absolute ใน CSS
181การจัดตำแหน่งแบบสัมบูรณ์โดยไม่ใช้พิกัดใน CSS
182การจัดกึ่งกลางด้วย absolute ใน CSS
183ค่าลบในการจัดตำแหน่งด้วย CSS
184การจัดตำแหน่งแบบตายตัวใน CSS
185บล็อกที่กว้างเต็มหน้าจอใน CSS
186การจัดวางองค์ประกอบตามแนวแกน Z ใน CSS
187การควบคุมการซ้อนทับองค์ประกอบตามแกน Z ใน CSS
188รายละเอียดการใช้งานค่า z-index เป็นลบใน CSS
การลอย
189
การแนะนำคุณสมบัติ float ใน CSS
190การลอยทะลุขององค์ประกอบผ่านแท็กใน CSS
191การใช้ float และ margin ร่วมกันใน CSS
192การผสม float และ padding ใน CSS
193องค์ประกอบแบบลอยใต้แท็กใน CSS
194การทำงานของฟล็อตต่อพาเรนต์ใน CSS
195ความสูงของ parent ของ float ใน CSS
196ข้อความในพาเรนต์ของฟล็อตใน CSS
197การจัดการการลอย (Float) ใน CSS
198การยกเลิกการลอยด้วยคุณสมบัติ clear ใน CSS
199การใช้ Div แยกสำหรับ Clearfix ใน CSS
200กลียร์ฟิกซ์และความสูงของพ่อแม่ใน CSS
201คุณสมบัติ float สำหรับบล็อกใน CSS
202คุณสมบัติ float และหลายบล็อกใน CSS
203คุณสมบัติ float และ parent ที่ไม่มีข้อความใน CSS
เฟล็กซ์
204
การจัดวางองค์ประกอบฟล็กซ์เป็นแถวหรือคอลัมน์ใน CSS
205การจัดวางองค์ประกอบแบบ Flex ในแถวที่กลับด้านใน CSS
206การจัดวางองค์ประกอบแบบ Flex ในคอลัมน์ด้วย CSS
207การพลิกคอลัมน์ด้วยองค์ประกอบ Flex ใน CSS
208แกนหลักและแกนตัดใน Flexbox ของ CSS
209การจัดตำแหน่งองค์ประกอบ Flex ตามแกนหลักใน CSS
210การจัดเรียงบล็อกแบบ Flex ตามแกนขวางใน CSS
211ความหมายของค่า center ในคุณสมบัติ align-items ของ CSS
212การจัดกึ่งกลางโดยไม่มีความสูงของบล็อกใน CSS
213การจัดองค์ประกอบที่มีความสูงต่างกันใน CSS
214ความหมายของค่า stretch ในคุณสมบัติ align-items ใน CSS
215การฝึกฝนเรื่องการจัดแนวตามแกนใน CSS
216การจัดตำแหน่งองค์ประกอบแต่ละชิ้นในโมเดล Flex ของ CSS
217ลำดับของบล็อก flex ใน CSS
กริด
218
ความรู้เบื้องต้นเกี่ยวกับ CSS Grid
219แทร็กและเส้นใน CSS Grid
220การแสดงผลกริดในตัวดีบักเบราว์เซอร์
221จำนวนและความกว้างของคอลัมน์ใน CSS Grid
222หน่วย fr ใน CSS Grid
223หน่วยเศษส่วน fr ใน CSS Grid
224พิกเซลและหน่วย fr ใน CSS Grid
225เปอร์เซ็นต์และหน่วย fr ใน CSS Grid
226ฟังก์ชัน repeat ใน CSS Grid
227ค่าของ auto ใน CSS Grid
228ความหมายของ auto-fill ใน CSS Grid
229ฟังก์ชัน minmax ใน CSS Grid
230ความหมายของ auto-fit ใน CSS Grid
231จำนวนและความกว้างของแถวใน CSS Grid
232การเขียนแบบย่อสำหรับแถวและคอลัมน์ใน CSS Grid
233การรวมแถวใน CSS Grid
234การรวมคอลัมน์ใน CSS Grid
235การรวมคอลัมน์และแถวแบบผสมผสานใน CSS Grid
236การวางซ้อนคอลัมน์ใน CSS Grid
237ระยะห่างระหว่างคอลัมน์ใน CSS Grid
238ระยะห่างระหว่างแถวใน CSS Grid
239ระยะห่างระหว่างคอลัมน์และแถวใน CSS Grid
240การสร้างตารางกริดใน CSS
เลย์เอาต์
241