เรากำหนดรูปแบบได้อย่างไร
เรากำหนดรูปแบบได้อย่างไร
เรากำหนดรูปแบบได้อย่างไร เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ
สวัสดีครับ/ค่ะ
เราได้อธิบายเรื่องนี้ไว้บางส่วนในบทเรียนก่อนหน้าแล้ว ตอนนี้มาทบทวนกันอีกครั้ง
ใน CSS สามารถกำหนดรูปแบบได้ 3 วิธี
- รูปแบบอินไลน์
- ระหว่างแท็ก <style>
- ใช้ไฟล์ CSS ภายนอก
รูปแบบอินไลน์
1. รูปแบบอินไลน์
ตามความหมายของชื่อ วิธีนี้หมายถึงรูปแบบที่เรากำหนดโดยส่งแอตทริบิวต์ style ให้แต่ละองค์ประกอบแบบอินไลน์
ไม่แนะนำให้ใช้วิธีนี้ เนื่องจากลดการนำรูปแบบแต่ละรายการกลับมาใช้ใหม่ และอ่านทำความเข้าใจได้ยากมาก
ในตัวอย่างด้านล่าง รูปแบบระยะห่างระหว่างตัวอักษรทำให้เกิดช่องว่าง 15px ระหว่างตัวอักษรแต่ละตัวในข้อความ
<p style="letter-spacing:15px">
Inline Style
</p>ด้วยแท็ก style
2. ระหว่างแท็ก <style>
สามารถกำหนดรูปแบบระหว่างแท็ก style ได้เช่นกัน แต่ไม่แนะนำให้ใช้การกำหนดรูปแบบนี้ ยกเว้นในบางกรณี (เช่น พื้นที่เนื้อหาที่อยู่เหนือส่วนที่ต้องเลื่อนหน้าจอ)
เราจะยังใช้แท็ก style เพื่อให้ตัวอย่างของเราเป็นระเบียบ อย่างไรก็ตาม ผม/ดิฉันไม่แนะนำให้ใช้วิธีนี้ในแอปพลิเคชันของคุณ (ยกเว้นกรณีพิเศษที่กล่าวถึง)
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>ไฟล์ CSS ภายนอก
3. ไฟล์ CSS ภายนอก
ตอนนี้มาเรียนรู้วิธีใช้ไฟล์ CSS ภายนอกกัน
นี่คือการกำหนดรูปแบบที่เราจะใช้บ่อยที่สุด ก่อนอื่น จะสร้างไฟล์ที่มีเฉพาะตัวเลือก CSS
จากนั้นจึงกำหนดไฟล์ CSS ที่เกี่ยวข้องให้กับองค์ประกอบลิงก์ระหว่างแท็ก head
ในตัวอย่างด้านล่าง ไฟล์ style.css ถูกกำหนดให้กับองค์ประกอบลิงก์ผ่านแอตทริบิวต์ href
<link rel = "stylesheet" href = "styles.css">
คุณสมบัตินี้เป็นวิธีที่ดีที่สุดในการเรียกใช้ไฟล์ CSS เดียวกันจากหลายไฟล์ และช่วยเพิ่มการนำกลับมาใช้ใหม่
ในตัวอย่างด้านล่าง มีการสร้างการกำหนดรูปแบบที่เลือกคลาสภายนอก
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
ในตัวอย่างด้านล่าง มีการสร้างการกำหนดรูปแบบที่เลือกคลาสภายนอก
มาบันทึกคำสั่งนี้ไว้ในไฟล์ชื่อ test 1.css และกำหนดให้กับองค์ประกอบลิงก์
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>ขอแสดงความยินดี
ขอแสดงความยินดี 🎉
ในส่วนนี้ เราได้เรียนรู้ประเภทของการกำหนดรูปแบบใน CSS
ในส่วนถัดไป เราจะเรียนรู้เกี่ยวกับตัวเลือก id
คำถามที่พบบ่อย
บทเรียน “เรากำหนดรูปแบบได้อย่างไร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เรากำหนดรูปแบบได้อย่างไร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ