สีและพื้นหลัง
เพิ่มสีและพื้นหลังเพื่อทำให้หน้าเว็บโดดเด่น
สีและพื้นหลัง เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
สีและพื้นหลัง
ยินดีต้อนรับสู่บทเรียนถัดไปครับ วันนี้เราจะเรียนรู้วิธีเพิ่มสีและพื้นหลังให้หน้าเว็บ เพื่อทำให้หน้าดูมีชีวิตชีวาและน่าดึงดูดยิ่งขึ้น
ทำไมจึงต้องใช้สีและพื้นหลัง
สีและพื้นหลังช่วยให้คุณ:
- ทำให้หน้าเว็บน่าสนใจยิ่งขึ้น
- เน้นเนื้อหาสำคัญ
- กำหนดบรรยากาศหรือธีมของหน้าเว็บ
มาเรียนรู้วิธีใช้สิ่งเหล่านี้อย่างมีประสิทธิภาพกันครับ!
การเปลี่ยนสีข้อความ
คุณสามารถเปลี่ยนสีข้อความโดยใช้คุณสมบัติ color ได้หลายรูปแบบครับ:
- ชื่อสี: ตัวอย่าง:
red,blue - รหัสเลขฐานสิบหก: ตัวอย่าง:
#ff0000,#0000ff - ค่า RGB: ตัวอย่าง:
rgb(255, 0, 0)
ตัวอย่าง:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
การเพิ่มสีพื้นหลัง
คุณสมบัติ background-color ใช้สำหรับเปลี่ยนสีพื้นหลังขององค์ประกอบครับ
ตัวอย่าง:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
พื้นหลังเต็มหน้า
คุณสามารถเปลี่ยนสีพื้นหลังของทั้งหน้าได้โดยใช้คุณสมบัติ background-color กับแท็ก <body> ครับ
ตัวอย่าง:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
การเพิ่มรูปภาพพื้นหลัง
คุณสามารถกำหนดรูปภาพเป็นพื้นหลังโดยใช้คุณสมบัติ background-image ครับ
ตัวอย่าง:
ในตัวอย่างนี้:
background-size: cover;ทำให้รูปภาพครอบคลุมทั้งหน้าbackground-repeat: no-repeat;ป้องกันไม่ให้รูปภาพซ้ำ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
การรวมสีข้อความและสีพื้นหลัง
คุณสามารถรวมสีข้อความและสีพื้นหลังเพื่อสร้างการออกแบบที่น่าดึงดูดได้ อย่าลืมตรวจสอบให้แน่ใจว่าข้อความอ่านได้ง่ายนะครับ!
ตัวอย่าง:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
ลองทำด้วยตนเอง
มาสร้างหน้าเว็บที่มีสีและพื้นหลังกันครับ ตัวอย่างมีดังนี้:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
ทำได้ยอดเยี่ยม
ขอแสดงความยินดีครับ คุณได้เรียนรู้วิธีใช้สีและพื้นหลังเพื่อทำให้หน้าเว็บมีชีวิตชีวาและน่าดึงดูดยิ่งขึ้นแล้ว ในบทเรียนถัดไป เราจะเจาะลึกเรื่องการจัดรูปแบบข้อความ เพื่อเพิ่มเอฟเฟกต์ตัวหนา ตัวเอียง และเอฟเฟกต์อื่น ๆ ให้ข้อความ เตรียมพร้อมพัฒนาทักษะการออกแบบของคุณกันครับ!
คำถามที่พบบ่อย
บทเรียน “สีและพื้นหลัง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สีและพื้นหลัง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สีและพื้นหลัง”
เพิ่มสีและพื้นหลังเพื่อทำให้หน้าเว็บโดดเด่น คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “สีและพื้นหลัง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- รูปแบบภายในบรรทัด
- พื้นฐาน CSS
- สีและพื้นหลัง
- การจัดรูปแบบข้อความ