บทเรียน HTML และ CSS สำหรับผู้เริ่มต้น

พื้นฐาน HTML

การแนะนำ ภาษา HTML แท็ก HTML แอตทริบิวต์ สไตล์ โครงสร้างพื้นฐานของหน้า แท็กพื้นฐาน ย่อหน้า หัวเรื่อง เน้นข้อความตัวหนา เน้นข้อความตัวเอียง รายการไม่เรียงลำดับ รายการเรียงลำดับ ลิงก์ ลิงก์ภายใน รูปภาพ ความกว้างของรูปภาพ ความสูงของรูปภาพ การกำหนดความกว้างและความสูงของรูปภาพ ตาราง ความกว้างและความสูงของตาราง เซลล์หัวเรื่อง ภาคปฏิบัติ

พื้นฐาน CSS

รู้จักกับ CSS วิธีใช้งาน CSS ค่าสีแบบคีย์เวิร์ด สีแบบต่างๆ ความกว้างและความสูง การจัดตำแหน่งข้อความ จัดข้อความชิดขวา จัดข้อความกึ่งกลาง จัดข้อความชิดซ้าย จัดข้อความชิดขอบทั้งสองด้าน แบบฝึกหัดการจัดตำแหน่งข้อความ ความหนาตัวอักษร ตัวเอียง ขนาดฟอนต์ ตระกูลฟอนต์ ระยะห่างระหว่างบรรทัด ค่า line-height แบบไม่มีหน่วย คุณสมบัติแบบย่อ font การเยื้องบรรทัดแรก เอฟเฟกต์ข้อความ ขีดเส้นใต้ข้อความ ขีดเส้นเหนือข้อความ ขีดฆ่าข้อความ ยกเลิกเอฟเฟกต์สำหรับข้อความ ภาคปฏิบัติ

ตัวเลือก

ความสัมพันธ์ระหว่างแท็ก การสืบทอดคุณสมบัติ การจัดกลุ่มตัวเลือก คุณสมบัติทั่วไป ตัวเลือกลูกหลาน ตัวเลือกลูกโดยตรง ตัวเลือกคลาส แท็ก span แท็ก div การจัดกลุ่มคลาส แท็กที่มีคลาสที่กำหนด ตัวเลือกลูกหลานและคลาส ชุดผสมที่ซับซ้อนของตัวเลือกลูกหลานและคลาส ข้อผิดพลาดของมือใหม่ในตัวเลือกลูกหลาน องค์ประกอบที่มีหลายคลาส ตัวเลือกตาม id ตัวเลือกตาม id และคลาส การใช้ id ตัวเลือกตามหลายคลาส หลายตัวเลือกร่วมกัน ข้อผิดพลาดหลายตัวเลือก การจัดกลุ่มตัวเลือกที่ซับซ้อน ข้อผิดพลาดในการจัดกลุ่ม การฝึกหัดชุดผสมของตัวเลือก ลำดับความสำคัญของตัวเลือก หมายเหตุเกี่ยวกับความขัดแย้งของคุณสมบัติ กฎความจำเพาะ ลำดับความสำคัญของตัวเลือกลูกหลาน ตัวเลือกพี่น้องที่อยู่ติดกัน ตัวเลือกพี่น้องทั่วไป ตัวเลือกสากล ตัวเลือกแอตทริบิวต์ สถานะของลิงก์ ความแตกต่างของลำดับสถานะลิงก์ สถานะ link และ visited การใช้สถานะลิงก์ทั่วไป ตัวเลือกที่ซับซ้อนกับลิงก์ ลิงก์ที่มีคลาส การเลือกองค์ประกอบปลายทาง การเลือกตามตำแหน่ง การเลือกลูกคนเดียว การเลือกองค์ประกอบว่าง การเลือกตามตำแหน่งและประเภทขององค์ประกอบ การปฏิเสธ not

การตกแต่ง

สีพื้นหลัง พื้นฐานการทำงานกับเส้นขอบ เส้นขอบทึบ เส้นขอบแบบจุด เส้นขอบแบบเส้นประ เส้นขอบนูน เส้นขอบคู่ คุณสมบัติแบบย่อสำหรับเส้นขอบ เส้นขอบสำหรับด้านต่าง ๆ การทำให้มุมขอบบล็อกโค้งมน การทำให้มุมขอบพื้นหลังโค้งมน การสร้างวงกลม การทำให้มุมโค้งมนสำหรับมุมต่าง ๆ ค่าสี่ค่า ค่าสองค่า ค่าสามค่า การทำให้มุมโค้งมนเป็นเปอร์เซ็นต์ การสร้างวงกลมเมื่อทำให้มุมโค้งมนเป็นเปอร์เซ็นต์ รูปภาพสำหรับพื้นหลัง การทำซ้ำรูปภาพพื้นหลัง คุณสมบัติอื่น ๆ สำหรับพื้นหลัง เครื่องหมายรายการ ul เครื่องหมายรายการ ul แบบสี่เหลี่ยม เครื่องหมายรายการ ul แบบวงกลม เครื่องหมายรายการ ul แบบวงกลมทึบ การไม่มีเครื่องหมายรายการ ul เครื่องหมายรายการ ol ตัวเลขโรมันพิมพ์เล็กสำหรับรายการ ol ตัวเลขโรมันพิมพ์ใหญ่สำหรับรายการ ol ตัวอักษรละตินพิมพ์เล็กสำหรับรายการ ol ตัวอักษรละตินพิมพ์ใหญ่สำหรับรายการ ol ตัวอักษรกรีกพิมพ์เล็กสำหรับรายการ ol ตัวเลขที่มีศูนย์นำหน้าสำหรับรายการ ol

แบบจำลองกล่อง

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

การจัดตำแหน่ง

แบบสัมบูรณ์ แบบสัมพันธ์ สัมบูรณ์เทียบกับ parent สัมบูรณ์เทียบกับ absolute สัมบูรณ์โดยไม่มีพิกัด การจัดกึ่งกลางผ่าน absolute ค่าลบของ absolute การจัดตำแหน่งแบบตายตัว บล็อกความกว้างเต็มหน้าจอ การซ้อนทับองค์ประกอบตามแกน Z การควบคุมการซ้อนทับองค์ประกอบตามแกน Z รายละเอียดการใช้ค่าลบของ z-index

การลอย

บทนำสู่คุณสมบัติ float คุณสมบัติ float และแท็ก การรวม float และ margin การรวม float และ padding องค์ประกอบที่ลอยอยู่ใต้แท็ก ผลของ float ต่อ parent ความสูงของ parent ของ float ข้อความใน parent ของ float การล้อมข้อความ การยกเลิกการล้อมข้อความ div แยกด้วย clearfix ความสูงของ parent และ clearfix คุณสมบัติ float สำหรับบล็อก คุณสมบัติ float และบล็อกหลายอัน คุณสมบัติ float และ parent ที่ไม่มีข้อความ

เฟล็กซ์

จัดวางในแถวหรือคอลัมน์ จัดวางองค์ประกอบเฟล็กซ์ในแถวที่กลับด้าน จัดวางองค์ประกอบเฟล็กซ์ในคอลัมน์ กลับด้านคอลัมน์ที่มีองค์ประกอบเฟล็กซ์ แกนหลักและแกนขวาง การจัดตำแหน่งตามแกนหลัก การจัดตำแหน่งตามแกนขวาง ค่า center ของคุณสมบัติ align-items การจัดกึ่งกลางโดยไม่กำหนดความสูงของบล็อก การจัดกึ่งกลางด้วยบล็อกที่มีความสูงต่างกัน ค่า stretch ของคุณสมบัติ align-items แบบฝึกหัดการจัดตำแหน่งตามแกน การจัดตำแหน่งองค์ประกอบแต่ละตัว ลำดับของบล็อก flex

กริด

รู้จักกับกริด แทร็กและเส้นกริด การแสดงผลในดีบักเกอร์เบราว์เซอร์ คอลัมน์ หน่วย fr หน่วย fr ทศนิยม พิกเซลและ fr เปอร์เซ็นต์และ fr ฟังก์ชัน repeat ค่า auto ค่า auto-fill ฟังก์ชัน minmax ค่า auto-fit แถว ชวเลขสำหรับแถวและคอลัมน์ การรวมแถว การรวมคอลัมน์ การรวมกันแบบผสม การทับซ้อนของคอลัมน์ ระยะห่างระหว่างคอลัมน์ ระยะห่างระหว่างแถว ระยะห่างระหว่างคอลัมน์และแถว การปูกระเบื้อง

เลย์เอาต์

การสร้างเมนู เลย์เอาต์เว็บไซต์แบบคอลัมน์เดียวอย่างง่าย โครงร่างเลย์เอาต์ที่มีแรปเปอร์หลายชั้น บล็อกโครงสร้างของเว็บไซต์ โครงร่างเลย์เอาต์แบบสองคอลัมน์ โครงร่างเลย์เอาต์เว็บไซต์แบบสามคอลัมน์ แท็กพิเศษสำหรับองค์ประกอบเลย์เอาต์ของเว็บไซต์ แท็กหลักของเลย์เอาต์ แท็กสำหรับส่วน แบบฝึกหัดเรื่องเลย์เอาต์
↑
ไทย▼
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣTürkmenTürkçeЎзбекOʻzbekTiếng Việt
เราใช้คุกกี้สำหรับการทำงานของเว็บไซต์ การวิเคราะห์ และการปรับเนื้อหาให้เหมาะสมส่วนบุคคล การประมวลผลข้อมูลเกิดขึ้นตาม นโยบายความเป็นส่วนตัว.
ยอมรับทั้งหมด ปรับแต่ง ปฏิเสธ