บทนำสู่ CSS
บทนำสู่ CSS
บทนำสู่ CSS เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ 1
สวัสดีครับ/ค่ะ
ในบทก่อนหน้านี้ เราได้เรียนรู้ว่า CSS คืออะไรและทำไมเราจึงควรใช้ ตอนนี้ผม/ดิฉันอยากแนะนำอย่างรวดเร็วด้วยตัวอย่างง่าย ๆ
มานิยาม หน้า HTML อย่างง่ายกัน
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>รูปแบบอินไลน์
ตอนนี้ลองเปลี่ยนสีหัวข้อ Hello CSS เป็นสีแดงกัน สำหรับเรื่องนี้ เราจะใช้ แอตทริบิวต์ style ที่สามารถเพิ่มลงในแท็ก HTML เกือบทุกแท็กได้
ด้วยแอตทริบิวต์นี้ เราสามารถกำหนดรูปแบบให้แต่ละองค์ประกอบแบบอินไลน์ได้
เมื่อดูส่วนแสดงตัวอย่าง เราจะเห็นว่าสีของหัวข้อเปลี่ยนเป็นสีแดง
color: red;
เราได้กำหนดรูปแบบให้สีตัวอักษรขององค์ประกอบเป็นสีที่ต้องการแล้ว
<h1 style="color:red;">Hello CSS</h1>รูปแบบอินไลน์ 2
คุณคงจำได้ว่าเราเคยกล่าวว่า เราใช้แอตทริบิวต์เพื่อกำหนดพฤติกรรมและคุณสมบัติให้แท็กใน HTML
หนึ่งในแอตทริบิวต์ที่สำคัญที่สุดของรูปแบบคือ เราใช้แอตทริบิวต์ style เพื่อกำหนดรูปแบบให้แท็ก
รูปแบบอินไลน์ 3
ตอนนี้มาเพิ่มรูปแบบใหม่กัน เราสามารถเพิ่มขนาดข้อความด้วย font-size
เมื่อกำหนดรูปแบบหลายรายการ เราต้องคั่นรูปแบบแต่ละรายการด้วยเครื่องหมายอัฒภาค
ในตัวอย่างด้านล่าง รูปแบบสีและขนาดตัวอักษรถูกคั่นด้วยเครื่องหมายอัฒภาค
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>การกำหนดรูปแบบ
ไวยากรณ์มีความสำคัญเมื่อเพิ่มรูปแบบ
styleName: styleValue;
มาทบทวนกันอีกครั้งว่าเราต้องกำหนดรูปแบบตามที่แสดงด้านบน
ตัวอย่าง
ตอนนี้มาขยายตัวอย่างของเราให้มากขึ้นอีกเล็กน้อย
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>ตัวอย่าง 2
ในตัวอย่างนี้ เราต้องการเปลี่ยนสีข้อความทั้งหมดเป็นสีแดง เราสามารถกำหนดรูปแบบให้แต่ละแท็กได้ดังนี้
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>ตัวเลือก CSS
แต่ทำแบบนั้นแล้วดูไม่ค่อยดีใช่ไหม
เพราะตอนนี้เรามีองค์ประกอบ 3 รายการบนหน้าเว็บ และเราเปลี่ยนสีข้อความของแต่ละรายการเป็นสีแดง แต่หากจำนวนนี้เพิ่มเป็น 3,000 รายการ การกำหนดรูปแบบให้แต่ละรายการก็ไม่สมเหตุสมผล
แทนที่จะกำหนดรูปแบบแบบอินไลน์ให้แต่ละองค์ประกอบ เราควรใช้ตัวเลือก CSS
บทนำ 12
ตอนนี้มาเรียนรู้แนวคิดเรื่องตัวเลือกกัน
ตัวเลือก CSS มีหน้าที่เลือกองค์ประกอบ HTML ที่เกี่ยวข้องในเอกสาร เพื่อกำหนดรูปแบบให้องค์ประกอบ HTML
ดังนั้น จากชื่อของมัน เราจึงเข้าใจได้ว่าตัวเลือกทำหน้าที่เลือกองค์ประกอบ HTML 😂
ต้องกำหนดตัวเลือก CSS ไว้ระหว่าง แท็ก <style> ในเอกสาร HTML หรือในไฟล์ CSS ภายนอก
ในตัวอย่างของเรา เราจะใช้รูปแบบที่มักอยู่ระหว่างแท็ก style อย่างไรก็ตาม การกำหนดรูปแบบไว้ในไฟล์ CSS ภายนอกนั้นถูกต้องแม่นยำกว่า
บทนำ 13
ตัวดำเนินการจุดและชื่อคลาสใช้เพื่อกำหนดคลาสระหว่างแท็ก style ส่วนการกำหนดรูปแบบจะทำภายในวงเล็บปีกกา
.class-name {
font-size:22px;
color:red;
}
ในตัวอย่างด้านล่าง เรากำหนดคลาสชื่อ my-component ไว้ระหว่างแท็ก style และกำหนดรูปแบบ font-size ให้กับคลาสดังกล่าว
<style>
.my-component{
font-size:22px;
}
</style>
ตอนนี้มากำหนดองค์ประกอบย่อหน้าสององค์ประกอบกัน
ตอนนี้มากำหนดองค์ประกอบย่อหน้าสององค์ประกอบที่มีคลาส my-component กัน
หลังจากกำหนดแล้ว เนื่องจากย่อหน้าทั้งสองมีชื่อคลาสเดียวกัน ตัวเลือก CSS จะเลือกทั้งคู่ และขนาดตัวอักษรจะถูกอัปเดตเป็น 22px
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>บทนำ 6
เราสามารถกำหนดรูปแบบมากกว่าหนึ่งรายการให้ตัวเลือกได้
ในตัวอย่างด้านล่าง รูปแบบขนาดตัวอักษรและสีถูกกำหนดไว้ในตัวเลือกเดียวกัน
<style>
.my-component{
font-size:22px;
color:red;
}
</style>การซ้อนตัวเลือก CSS
มาวิเคราะห์โค้ด HTML ด้านล่างกัน
มีการกำหนดองค์ประกอบ ย่อหน้า และเพิ่ม องค์ประกอบ span ที่มีเนื้อหา 'Hello CSS Selectors' ไว้ภายในองค์ประกอบนี้
ในกรณีนี้ เรากล่าวได้ว่า องค์ประกอบย่อหน้าเป็นองค์ประกอบแม่ของ span
ในทางกลับกัน span ก็จะเป็นองค์ประกอบลูกขององค์ประกอบ pเช่นกัน
เช่นเดียวกับสิ่งมีชีวิต เราจะใช้องค์ประกอบ HTML ในความสัมพันธ์ระหว่างองค์ประกอบแม่กับองค์ประกอบลูกตามตำแหน่งในบล็อกโค้ด
<p>
<span>Hello CSS Selectors</span>
</p>ตัวเลือก CSS แบบซ้อน 2
มาขยายตัวอย่างของเราเพิ่มเติมอีกเล็กน้อย และวิเคราะห์ลำดับชั้นระหว่างองค์ประกอบต่าง ๆ อีกครั้ง
- จากตัวอย่างด้านล่าง
- องค์ประกอบ <span> และ <a> เป็นองค์ประกอบพี่น้องกัน
- องค์ประกอบ <span> และ <a> เป็นองค์ประกอบสืบทอดขององค์ประกอบ div
- <span> และ <a> เป็นองค์ประกอบลูกขององค์ประกอบ <p>
- องค์ประกอบ <p> เป็นองค์ประกอบลูกขององค์ประกอบ <div>
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>แบบจำลองต้นไม้สำหรับการวิเคราะห์
มาดูภาพด้านบนให้ละเอียดยิ่งขึ้น
ตัวอย่างโค้ด HTML ต่อไปนี้ถูกแปลงเป็นแบบจำลองต้นไม้
โปรดสังเกตว่าแบบจำลองต้นไม้แท้จริงแล้วคือภาพสะท้อนของลำดับชั้นระหว่างองค์ประกอบแม่กับองค์ประกอบลูก
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
แล้วเราจะใช้ความสัมพันธ์ตามลำดับชั้นนี้เมื่อใด
แล้วเราจะใช้ความสัมพันธ์ตามลำดับชั้นนี้เมื่อใด
มาทำตัวอย่างและตั้งปัญหากันก่อน จากนั้นเราจะดูว่าเราสามารถใช้ลำดับชั้นนี้เพื่อหาวิธีแก้ปัญหาได้อย่างไร
มาดูตัวอย่างโค้ดด้านล่าง
สมมติว่าเราต้องการระบายสีข้อความทั้งหมดเป็นสีแดง ในกรณีนี้ เราได้เรียนรู้วิธีใช้มาแล้วสองแบบ
- แบบแรกและแย่ที่สุดคือ เราจะกำหนดแอตทริบิวต์รูปแบบ (style = "color: red") แบบอินไลน์ให้แต่ละองค์ประกอบ
- แบบที่สองคือ เราจะกำหนดคลาสชื่อ red-txt และกำหนดให้แต่ละองค์ประกอบเป็นแอตทริบิวต์ (class = "red-txt")
แต่มีวิธีที่ง่ายกว่านั้น 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>แล้วเราจะใช้ความสัมพันธ์ตามลำดับชั้นนี้เมื่อใด 2
มาดูโค้ดด้านบนอีกครั้ง
เมื่อพิจารณาองค์ประกอบ div ที่มีคลาสชื่อ root เราจะเห็นว่าแท้จริงแล้วองค์ประกอบนี้เป็นบรรพบุรุษขององค์ประกอบทั้งหมดในตัวอย่างของเรา
ลักษณะทางพันธุกรรมของมนุษย์ถูกส่งต่อจากบรรพบุรุษไปยังลูกหลาน รูปแบบที่กำหนดให้กับบรรพบุรุษใน CSS ก็สะท้อนไปยังองค์ประกอบสืบทอดเช่นกัน
ในกรณีนี้ เมื่อเรากำหนดรูปแบบที่เลือกองค์ประกอบ div ที่เกี่ยวข้อง เราสามารถคาดหวังได้ว่าองค์ประกอบสืบทอดทั้งหมดจะได้รับผลจากการกำหนดนี้
มาลองทำกัน
แล้วเราจะใช้ความสัมพันธ์ตามลำดับชั้นนี้เมื่อใด 3
มากำหนดคลาส ชื่อ root โดยใช้ ตัวดำเนินการจุด และกำหนดรูปแบบ (ด้วย color: red) ไว้ภายในคลาสนี้
ตัวเลือกนี้จะเลือกองค์ประกอบทั้งหมด ที่มีคลาส root และเปลี่ยนสีข้อความขององค์ประกอบเหล่านั้นรวมถึงองค์ประกอบสืบทอดเป็นสีแดง
เมื่อดูส่วนแสดงตัวอย่าง เราจะเห็นว่าข้อความทั้งหมดเปลี่ยนเป็นสีแดง
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>การสืบทอด
ใน CSS เราเรียกแนวคิดนี้ว่า การสืบทอด และเราได้เรียนรู้การเขียนโค้ดให้สั้นลงโดยใช้คุณสมบัตินี้แล้ว
เช่นเดียวกับตัวอย่างก่อนหน้านี้ แทนที่จะกำหนดคุณสมบัติเดียวกันให้แต่ละองค์ประกอบทีละรายการ เรากำหนดคุณสมบัตินี้ให้กับองค์ประกอบบรรพบุรุษ และป้องกันการเขียนโค้ดซ้ำ
การวางองค์ประกอบ Head
ในตัวอย่างก่อนหน้านี้ เราเพิ่มองค์ประกอบ style ไว้ถัดจากองค์ประกอบ HTML ที่เราเขียน
อย่างไรก็ตาม ตำแหน่งที่ถูกต้องสำหรับแทรกแท็ก style คือระหว่างแท็ก head
ดังนั้นการใช้งานที่ถูกต้องกว่าจะเป็นดังนี้
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>เขียนโค้ดให้สั้นและนำกลับมาใช้ใหม่ได้มากที่สุด
ขณะเขียนโค้ด เราต้องเขียนโค้ดให้สั้นที่สุดเท่าที่จะทำได้และนำกลับมาใช้ใหม่ได้
ขอแสดงความยินดี
ขอแสดงความยินดี 🎉
ในส่วนนี้ เราได้เรียนรู้แนวคิดเรื่องตัวเลือกและการสืบทอดไปพร้อมกัน
ในส่วนถัดไป เราจะเรียนรู้ประเภทของการกำหนดรูปแบบใน CSS
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 16
- บทเรียน
- 35
คำถามที่พบบ่อย
บทเรียน “บทนำสู่ CSS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “บทนำสู่ CSS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “บทนำสู่ CSS”
บทนำสู่ CSS คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน
บทเรียน “บทนำสู่ CSS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ