พื้นฐาน CSS
บทนำเกี่ยวกับการจัดรูปแบบด้วย CSS (ภาพรวมเสริม)
พื้นฐาน CSS เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
พื้นฐาน CSS: บทนำสู่การตกแต่งด้วย CSS
ยินดีต้อนรับสู่โลกของ CSS ครับ วันนี้เราจะเรียนรู้วิธีใช้ Cascading Style Sheets (CSS) เพื่อตกแต่งหน้าเว็บและทำให้หน้าดูน่าทึ่ง
CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้ควบคุมรูปลักษณ์และความรู้สึกของหน้าเว็บครับ
ด้วย CSS คุณสามารถเปลี่ยนสี แบบอักษร โครงร่าง และสิ่งอื่น ๆ ได้อีกมากมายครับ
CSS ทำงานอย่างไร
CSS ทำงานโดยเลือกองค์ประกอบ HTML แล้วนำสไตล์ไปใช้กับองค์ประกอบเหล่านั้น คุณสามารถใช้ CSS ได้สามวิธีครับ:
- อินไลน์: เพิ่มสไตล์โดยตรงภายในองค์ประกอบ HTML
- ภายใน: เพิ่มสไตล์ไว้ในแท็ก
<style>ภายใน<head> - ภายนอก: ใช้ไฟล์ CSS แยกต่างหาก
ในบทเรียนนี้เราจะเน้นสไตล์ภายในและสไตล์ภายนอกครับ
CSS ภายใน
CSS ภายในจะเขียนไว้ในแท็ก <style> ภายใน <head> ของเอกสาร HTML ครับ
ตัวอย่าง:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
CSS ภายนอก
CSS ภายนอกจะเขียนไว้ในไฟล์แยกต่างหากที่มีนามสกุล .css จากนั้นเชื่อมโยงกับเอกสาร HTML โดยใช้แท็ก <link> ครับ
ตัวอย่าง:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
ตัวเลือกใน CSS
ตัวเลือกใช้เพื่อระบุองค์ประกอบ HTML ที่ต้องการตกแต่ง ตัวเลือกที่ใช้กันทั่วไปมีดังนี้:
- ตัวเลือกแท็ก: ระบุองค์ประกอบทั้งหมดที่มีแท็กเฉพาะ ตัวอย่าง:
p - ตัวเลือกคลาส: ระบุองค์ประกอบที่มีคลาสเฉพาะ ตัวอย่าง:
.myClass - ตัวเลือก ID: ระบุองค์ประกอบที่มี ID เฉพาะ ตัวอย่าง:
#myID
มาดูวิธีใช้งานกันครับ!
ตัวเลือกคลาสและ ID
ใช้คลาสเมื่อคุณต้องการตกแต่งองค์ประกอบหลายรายการ ใช้ ID สำหรับองค์ประกอบเดียวที่ไม่ซ้ำกันครับ
ตัวอย่าง:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
ลองทำด้วยตนเอง
มาสร้างหน้าเว็บโดยใช้ CSS ภายในกันครับ ตัวอย่างต่อไปนี้จะช่วยให้คุณเริ่มต้นได้:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
ทำได้ยอดเยี่ยม
ขอแสดงความยินดีครับ คุณได้เรียนรู้พื้นฐานของ CSS และวิธีใช้ CSS เพื่อตกแต่งหน้าเว็บแล้ว CSS ช่วยให้หน้าของคุณดูเป็นมืออาชีพและน่าดึงดูด ในบทเรียนถัดไป เราจะเจาะลึกเรื่องสีและพื้นหลังเพื่อทำให้หน้าของคุณมีชีวิตชีวายิ่งขึ้น เตรียมพร้อมปลดปล่อยความคิดสร้างสรรค์กันครับ!
คำถามที่พบบ่อย
บทเรียน “พื้นฐาน CSS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พื้นฐาน CSS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน CSS”
บทนำเกี่ยวกับการจัดรูปแบบด้วย CSS (ภาพรวมเสริม) คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “พื้นฐาน CSS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ