สีและพื้นหลัง
สีและพื้นหลัง
สีและพื้นหลัง เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ
สวัสดีค่ะ/ครับ
เราสามารถเปลี่ยนสีของข้อความได้ด้วยคุณสมบัติ Color
เราสามารถกำหนดค่าให้คุณสมบัตินี้เป็นประเภท RGB, HEX, HSL, RGBA หรือ HSLA ได้
ที่ผ่านมาเราใช้คุณสมบัติ color ในตัวอย่างมาหลายครั้งแล้ว ตอนนี้มาดูการใช้งานโดยใช้ค่าประเภทต่าง ๆ กัน
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>พื้นหลัง
เราสามารถกำหนดรูปแบบให้พื้นหลังขององค์ประกอบได้โดยใช้คุณสมบัติ Background
ตอนนี้มาเรียนรู้คุณสมบัติพื้นหลังที่แสดงด้านล่างกัน
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
เป็นคุณสมบัติที่ใช้เปลี่ยนสีพื้นหลังขององค์ประกอบ
มาดูตัวอย่างกัน
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>ความทึบ
เป็นคุณสมบัติที่ใช้เปลี่ยนความทึบของพื้นหลังขององค์ประกอบ
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>ความทึบ - 2
การเปลี่ยนแปลงความทึบของ CSS แสดงอยู่ในภาพด้านบน
ภาพพื้นหลัง
คุณสมบัติ background-image ใช้เพิ่มภาพลงในพื้นหลังขององค์ประกอบ
ภาพของเราอยู่ที่ https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png
ตอนนี้มากำหนดองค์ประกอบ div และเพิ่มภาพลงในพื้นหลังกัน
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
หากสังเกตจากตัวอย่างด้านบน จะเห็นว่าเราไม่สามารถจัดวางภาพได้พอดี เพราะขนาดมาตรฐานของภาพใหญ่กว่าพื้นที่ที่เราจะเพิ่มภาพลงไป
เราจะใช้คุณสมบัติ background-size เพื่อแก้ปัญหานี้
คุณสมบัติ Background-size สามารถรับค่า เช่น cover, contain และ auto ได้ นอกจากนี้เรายังสามารถกำหนดค่าเฉพาะสำหรับความกว้างและความสูงได้
มาอัปเดตตัวอย่างของเราอีกครั้ง
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
ตอนนี้มากำหนดค่าเป็นเปอร์เซ็นต์ให้กับคุณสมบัติ background-position กัน
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
อย่างไรก็ตาม ยังมีปัญหาอยู่ เนื่องจากขนาดภาพเล็กกว่าขนาดพื้นหลังขององค์ประกอบ ภาพจึงถูกใช้ซ้ำมากกว่าหนึ่งครั้งเพื่อเติมเต็มพื้นที่
เพื่อป้องกันปัญหานี้ ให้ใช้คุณสมบัติ background-repeat (โดยกำหนดค่าเป็น repeat, repeat-x, repeat-y, initial, inherit หรือ no-repeat)
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
คุณสมบัติพื้นหลังอีกอย่างหนึ่งคือ background-attachment คุณสมบัตินี้ใช้กำหนดว่าภาพพื้นหลังจะเลื่อนตามหน้าเว็บหรือไม่
คุณสมบัตินี้รับค่า fixed หรือ scroll
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>การเขียนคุณสมบัติพื้นหลังแบบย่อ
เมื่อต้องการใช้คุณสมบัติพื้นหลังที่เราเรียนรู้จากตัวอย่างข้างต้น เราอาจต้องเขียนนิพจน์ 4–5 บรรทัด
เราสามารถใช้คุณสมบัติพื้นหลังแบบย่อเพื่อกำหนดค่าทั้งหมดในบรรทัดเดียว
มาดูตัวอย่างกัน
ในคุณสมบัติ background มีการกำหนดการไม่ทำซ้ำ ขนาด ตำแหน่งภายในหน้าเว็บ และ URL ของภาพต้นฉบับ
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>ขอแสดงความยินดี
ขอแสดงความยินดี 🎉
ในส่วนนี้ เราได้เรียนรู้เรื่องสีและพื้นหลัง
ในส่วนถัดไป เราจะเรียนรู้แนวคิดเรื่องกล่อง บล็อก และอินไลน์
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 16
- บทเรียน
- 35
คำถามที่พบบ่อย
บทเรียน “สีและพื้นหลัง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สีและพื้นหลัง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สีและพื้นหลัง”
สีและพื้นหลัง คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน
บทเรียน “สีและพื้นหลัง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ