สี ตัวอักษร และโมเดลกล่อง
ใช้สีด้วยค่า hex, rgb และ hsl เลือกแบบอักษร กำหนดขนาดและความสูงบรรทัด และใช้ระยะขอบ เส้นขอบ กับช่องว่างภายในเพื่อจัดระยะองค์ประกอบ
สี ตัวอักษร และโมเดลกล่อง เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
ค่าสี CSS
CSS รองรับรูปแบบสีหลายแบบ เลือกรูปแบบที่ชัดเจนที่สุดสำหรับบริบทของคุณ เช่น รหัสเลขฐานสิบหกสำหรับสีแบรนด์ hsl() สำหรับปรับสีได้ง่าย rgb() สำหรับค่าที่สร้างด้วยโปรแกรม และชื่อสีสำหรับการทำต้นแบบอย่างรวดเร็ว
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */สีและรูปภาพพื้นหลัง
กำหนดพื้นหลังขององค์ประกอบด้วย background-color ใช้ background-image ร่วมกับการไล่ระดับสีหรือ URL ส่วนคำสั่งย่อ background จะรวมสี รูปภาพ ตำแหน่ง ขนาด และการทำซ้ำไว้ในการประกาศเดียว
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;คุณสมบัติแบบอักษร
ควบคุมรูปแบบตัวอักษรด้วย font-family (แบบอักษร), font-size (em, rem, px), font-weight (100–900), font-style (ตัวเอียง), line-height (อัตราส่วนเพื่อให้อ่านง่าย) และ letter-spacing (ระยะห่างระหว่างตัวอักษร)
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}คุณสมบัติข้อความ
การกำหนดสไตล์ข้อความเพิ่มเติม ได้แก่ text-align (ซ้าย กึ่งกลาง ขวา จัดชิดขอบทั้งสองด้าน), text-decoration (ขีดเส้นใต้ ขีดฆ่า ไม่มี), text-transform (ตัวพิมพ์ใหญ่ ทำตัวแรกเป็นตัวพิมพ์ใหญ่) และ text-overflow: ellipsis สำหรับตัดข้อความ
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}หน่วย rem เทียบกับ em และ px
px เป็นหน่วยสัมบูรณ์ em สัมพันธ์กับขนาดแบบอักษรขององค์ประกอบนั้นเองและสืบทอดต่อกัน ส่วน rem สัมพันธ์กับขนาดแบบอักษรของรากเอกสารและให้ผลที่คาดเดาได้ ควรใช้ rem สำหรับการกำหนดขนาดส่วนใหญ่ เพื่อเคารพการตั้งค่าแบบอักษรของผู้ใช้
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */โมเดลกล่อง
องค์ประกอบ HTML ทุกตัวเป็นกล่องสี่เหลี่ยมที่มีสี่ชั้น ได้แก่ เนื้อหา (ขนาดจริงขององค์ประกอบ), พื้นที่ด้านใน (พื้นที่ภายในเส้นขอบ), เส้นขอบ และ ระยะขอบ (พื้นที่ภายนอกเส้นขอบ)
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
โดยค่าเริ่มต้น (content-box) พื้นที่ด้านในและเส้นขอบจะถูกบวกเพิ่มจากความกว้างที่ประกาศไว้ เมื่อใช้ box-sizing: border-box พื้นที่ด้านในและเส้นขอบจะถูกรวมอยู่ในความกว้างที่ประกาศไว้ ซึ่งเกือบจะเป็นสิ่งที่คุณต้องการเสมอ
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}การยุบรวมระยะขอบ
ระยะขอบแนวตั้งระหว่างองค์ประกอบบล็อกที่อยู่ติดกันจะยุบรวมกัน ทำให้ใช้เฉพาะระยะขอบที่มากกว่า ระยะขอบขององค์ประกอบแม่กับองค์ประกอบลูกตัวแรกหรือตัวสุดท้ายก็ยุบรวมเช่นกัน แต่องค์ประกอบลูกของ Flexbox และ Grid จะไม่ยุบรวมระยะขอบ
คำสั่งย่อสำหรับพื้นที่ด้านใน
คำสั่งย่อ padding: top right bottom left ใช้กำหนดทุกด้าน ค่าสองค่าจะกำหนดแนวตั้งและแนวนอน ส่วนสามค่าจะกำหนดด้านบน แนวนอน และด้านล่าง
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */คุณสมบัติเส้นขอบ
กำหนดเส้นขอบด้วยคำสั่งย่อ border: width style color หากต้องการกำหนดทีละด้าน ให้ใช้ border-top และคำสั่งอื่นในลักษณะเดียวกัน ใช้ border-radius เพื่อทำมุมโค้ง ส่วน outline มีลักษณะคล้ายกัน แต่ไม่ส่งผลต่อการจัดวาง
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}เนื้อหาล้น
overflow: hidden จะตัดเนื้อหาที่เกินขนาดขององค์ประกอบ overflow: scroll จะเพิ่มแถบเลื่อน ส่วน overflow: auto จะเพิ่มแถบเลื่อนเมื่อจำเป็นเท่านั้น ใช้ overflow-x และ overflow-y เพื่อควบคุมแต่ละแกนแยกกัน
ตรวจสอบความเข้าใจ
เมื่อใช้ box-sizing: border-box พร้อมกับ width: 300px; padding: 20px; border: 2px solid ความกว้างทั้งหมดที่แสดงผลขององค์ประกอบจะเป็นเท่าใด
สรุป: สี รูปแบบตัวอักษร และโมเดลกล่อง
กำหนดสีด้วยรูปแบบเลขฐานสิบหก ค่าช่องสีแดง-เขียว-น้ำเงิน หรือค่าฮิว-ความอิ่มตัว-ความสว่าง กำหนดแบบอักษรด้วย font-family ขนาด น้ำหนัก และ line-height องค์ประกอบทุกตัวเป็นกล่องที่ประกอบด้วยเนื้อหา + พื้นที่ด้านใน + เส้นขอบ + ระยะขอบ เปิดใช้ box-sizing: border-box ทั่วทั้งหน้าเพื่อให้การกำหนดขนาดคาดเดาได้
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “สี ตัวอักษร และโมเดลกล่อง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สี ตัวอักษร และโมเดลกล่อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สี ตัวอักษร และโมเดลกล่อง”
ใช้สีด้วยค่า hex, rgb และ hsl เลือกแบบอักษร กำหนดขนาดและความสูงบรรทัด และใช้ระยะขอบ เส้นขอบ กับช่องว่างภายในเพื่อจัดระยะองค์ประกอบ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “สี ตัวอักษร และโมเดลกล่อง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวเลือกและการเรียงซ้อน
- สี ตัวอักษร และโมเดลกล่อง
- พื้นฐาน display: block inline flex grid
- การกำหนดตำแหน่ง: relative absolute fixed sticky