รูปแบบภายในบรรทัด
เปลี่ยนรูปลักษณ์ขององค์ประกอบโดยตรงใน HTML
รูปแบบภายในบรรทัด เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
การเพิ่มสีพื้นหลัง
คุณสามารถทำให้องค์ประกอบโดดเด่นขึ้นได้โดยใช้คุณสมบัติ background-color ครับ
ตัวอย่าง:
<p style="background-color: yellow;">This text has a yellow background.</p>
สไตล์แบบอินไลน์: เพิ่มการตกแต่งอย่างง่ายให้ HTML
ยินดีต้อนรับสู่บทเรียนเรื่องสไตล์แบบอินไลน์ครับ วันนี้คุณจะได้เรียนรู้วิธีตกแต่งองค์ประกอบโดยตรงใน HTML โดยใช้แอตทริบิวต์ style
สไตล์แบบอินไลน์คืออะไร
สไตล์แบบอินไลน์ช่วยให้คุณเพิ่ม CSS ลงในแท็ก HTML ได้โดยตรงโดยใช้แอตทริบิวต์ style นี่เป็นวิธีที่ง่ายที่สุดในการตกแต่งหน้าเว็บของคุณครับ
ตัวอย่าง:
<p style="color: red;">This is red text!</p>
color: red; จะเปลี่ยนสีข้อความเป็นสีแดงครับ
การเปลี่ยนขนาดตัวอักษร
ใช้คุณสมบัติ font-size เพื่อเปลี่ยนขนาดข้อความของคุณครับ
ตัวอย่าง:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
การรวมสไตล์หลายแบบ
สไตล์แบบอินไลน์ช่วยให้คุณรวมคุณสมบัติ CSS หลายรายการเข้าด้วยกันได้ ให้คั่นแต่ละคุณสมบัติด้วยอัฒภาค ; ครับ
ตัวอย่าง:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
การตกแต่งองค์ประกอบอื่น
สไตล์แบบอินไลน์ใช้งานได้กับองค์ประกอบ HTML ทั้งหมด เช่น หัวเรื่อง ปุ่ม และรูปภาพครับ
ตัวอย่าง:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
ลองทำด้วยตนเอง
มาสร้างหน้าเว็บโดยใช้สไตล์แบบอินไลน์กันครับ ตัวอย่างต่อไปนี้จะช่วยให้คุณเริ่มต้นได้:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
ทำได้ยอดเยี่ยม
ขอแสดงความยินดีครับ คุณได้เรียนรู้วิธีใช้สไตล์แบบอินไลน์เพื่อเพิ่มการตกแต่งที่เรียบง่ายและมีประสิทธิภาพให้กับองค์ประกอบ HTML แล้ว สไตล์แบบอินไลน์เหมาะสำหรับการเปลี่ยนแปลงอย่างรวดเร็ว แต่เมื่อหน้าเว็บของคุณมีขนาดใหญ่ขึ้น คุณจะต้องใช้เทคนิคการตกแต่งที่ซับซ้อนยิ่งขึ้น ในบทเรียนถัดไป เราจะสำรวจพื้นฐาน CSS เตรียมพร้อมออกแบบหน้าเว็บระดับมืออาชีพกันครับ!
การใช้แอตทริบิวต์ style
สไตล์แบบอินไลน์คืออะไร
สไตล์แบบอินไลน์ช่วยให้คุณเพิ่ม CSS ลงในแท็ก HTML ได้โดยตรงโดยใช้แอตทริบิวต์ style นี่เป็นวิธีที่ง่ายที่สุดในการตกแต่งหน้าเว็บของคุณครับ
ตัวอย่าง:
<p style="color: red;">This is red text!</p>
color: red; จะเปลี่ยนสีข้อความเป็นสีแดงครับ
<p style="color: red;">This is red text.</p>
คำถามที่พบบ่อย
บทเรียน “รูปแบบภายในบรรทัด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปแบบภายในบรรทัด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบภายในบรรทัด”
เปลี่ยนรูปลักษณ์ขององค์ประกอบโดยตรงใน HTML คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “รูปแบบภายในบรรทัด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- รูปแบบภายในบรรทัด
- พื้นฐาน CSS
- สีและพื้นหลัง
- การจัดรูปแบบข้อความ