HTML for Kids · บทเรียน

คุณสมบัติ CSS ที่ใช้บ่อยที่สุด

คุณสมบัติ CSS ที่ใช้บ่อยที่สุด เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน

บทนำ

สวัสดีค่ะ/ครับ

ในส่วนนี้ เราจะเรียนรู้คุณสมบัติ CSS ที่ใช้บ่อยที่สุด

จนถึงตอนนี้ เรามักสร้างตัวอย่างด้วยคุณสมบัติพื้นฐาน เช่น color และ font-size

ความกว้างและความสูง

ความสูง - ความกว้าง

เราจะใช้คุณสมบัติ width และ height เพื่อกำหนดค่าความกว้างและความสูงขององค์ประกอบ

มีสองประเด็นที่ควรทราบ

เราไม่สามารถกำหนดความกว้างและความสูงให้กับองค์ประกอบประเภท inline ได้
โดยค่าเริ่มต้น คุณสมบัติความกว้างและความสูงที่เรากำหนดจะไม่ขึ้นต่อคุณสมบัติอื่น เช่น ระยะขอบ ระยะห่างภายใน และเส้นขอบ และจะใช้เฉพาะกับพื้นที่ภายในองค์ประกอบเท่านั้น

เราจะให้ข้อมูลเพิ่มเติมเกี่ยวกับข้อยกเว้นข้างต้นในภายหลัง

<!DOCTYPE html>
<html>
<head>
<style>

.my-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
}

</style>
</head>
<body>

<div class="my-box">My Box</div>

</body>
</html>

ความกว้างและความสูง 2

ในตัวอย่างก่อนหน้านี้ เรากำหนดค่าความกว้างและความสูงแบบคงที่ อย่างไรก็ตาม ค่าที่กำหนดได้นั้นไม่ได้จำกัดอยู่เพียงตัวเลขตายตัว

ตอนนี้มาดูวิธีกำหนดความกว้างด้วยเปอร์เซ็นต์ในตัวอย่างของเรา

<style>

.box1 {
  height: 200px;
  width: 200px;
  background-color: #1cac84;
}

.box2 {
  height: 200px;
  width: 70%;
  background-color: powderblue;
}

.box3 {
  background-color: #c974af;
}

</style>

<div class="box1">First Box</div>

<div class="box2">Second Box</div>

<div class="box3">This box takes 
the auto value for the width and height 
properties by default.</div>

Content-box เทียบกับ Border-box

คุณสมบัติ box-sizing จะใช้ค่า content-box เป็นค่าเริ่มต้น

และโดยค่าเริ่มต้น ระบบจะใช้ค่า width และ height เพื่ออ้างอิงเนื้อหา

ค่าของเส้นขอบและระยะห่างภายในจะถูกบวกเพิ่มจากค่าความกว้างและความสูง

สมมติว่ากล่องมีความกว้าง 100px

เมื่อเราเพิ่มระยะห่างภายใน 10px และเส้นขอบ 20px ให้กับกล่องนี้ ความกว้างรวมขององค์ประกอบจะเป็น 100px + 10px + 20px = 130px

ความกว้างสูงสุด

ด้วยคุณสมบัติ max-width เราสามารถกำหนดความกว้างสูงสุดที่องค์ประกอบจะมีได้

ในตัวอย่างด้านล่าง เนื่องจากกำหนดค่า max-width เป็น 100px แม้ว่าค่า width เริ่มต้นจะเป็น auto (องค์ประกอบควรครอบคลุม 100% ขององค์ประกอบแม่) แต่องค์ประกอบก็ใช้พื้นที่ 100px และเนื้อหาล้นออกนอกกล่อง

<style>

.box {
  height: 200px;
  max-width: 100px;
  background-color: #1cac84;
}

</style>

<div class="box">
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>

การตกแต่งข้อความ

เราสามารถกำหนดการตกแต่งข้อความด้วยคุณสมบัติ text-decoration ได้

ผม/ดิฉันคิดว่าการดูคุณสมบัตินี้จากตัวอย่างจะเข้าใจได้ง่ายกว่า ลองดูผลลัพธ์ของโค้ดตัวอย่างในหน้าตัวอย่าง

<style>

.head1 {
  text-decoration: overline;
}

.head2 {
  text-decoration: line-through;
}

.head3 {
  text-decoration: underline;
}

.head4 {
  text-decoration: underline overline;
}

</style>

<h1 class="head1">
   Text-decoration is overline
</h1>
<h1 class="head2">
   Text-decoration is line-through
</h1>
<h1 class="head3">
   Text-decoration is underline
</h1>
<h1 class="head4"> 
   Text-decoration is both underline 
    and overline
</h1>

text-indent

เราอาจต้องการเว้นระยะห่างไว้ที่จุดเริ่มต้นของข้อความ โดยใช้คุณสมบัติ text-indent

<style>
.indent-txt{
  text-indent: 20px;
}
</style>

<p class="indent-txt">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat
</p>

text-align

เราใช้คุณสมบัติ text-align เพื่อกำหนดการจัดวางข้อความในแนวนอน

มาสร้างตัวอย่าง HTML กัน

<style>

.h1-center {
  text-align: center;
}

.h1-left {
  text-align: left;
}

.h1-right {
  text-align: right;
}
</style>

<h1 class="h1-center">
   Lorem ipsum (center)
</h1>
<h1 class="h1-left">
   Lorem ipsum  (left)
</h1>
<h1 class="h1-right">
   Lorem ipsum (right)
</h1>

font-family

เรากำหนดรูปแบบ font-family เพื่อเลือกประเภทแบบอักษรที่ต้องการใช้กับข้อความ

มีประเด็นสำคัญบางประการที่เราควรทราบ

แบบอักษรที่กำหนดต้องติดตั้งอยู่ในระบบของผู้ใช้ สำหรับกรณีนี้ เราควรใช้แบบอักษรที่เรียกว่าแบบอักษรที่ปลอดภัยสำหรับเว็บแบบใดแบบหนึ่ง
หากเราจะใช้แบบอักษรที่กำหนดเอง เราจะต้องเพิ่มแบบอักษรที่ต้องการใช้เป็นส่วนประกอบภายนอกระหว่างแท็ก head เมื่อเพิ่ม font-family เราควรกำหนดแบบอักษรหลักและแบบอักษรสำรองตามลำดับ
หากเบราว์เซอร์ไม่พบแบบอักษรหลักในระบบ เบราว์เซอร์จะแสดงแบบอักษรสำรองให้ผู้ใช้

font-family 2

ในตัวอย่างด้านล่าง เรากำหนดแบบอักษร Times New Roman ให้กับคลาสหลัก

เรากำหนดแบบอักษร Times และแบบอักษร serif ให้เป็นแบบอักษรรองและแบบอักษรลำดับที่สามตามลำดับ

เบราว์เซอร์จะพยายามใช้แบบอักษร Times New Roman ก่อน หากไม่พบแบบอักษรนี้ในระบบ เบราว์เซอร์จะใช้ตัวเลือกอื่นของเรา

หากไม่มีแบบอักษรที่เรากำหนด เบราว์เซอร์จะใช้แบบอักษรเริ่มต้น

<style>
.header {
  font-family: "Times New Roman", Times, serif;
}
</style>

<h1 class="header">
    Hello Font Family
</h1>

font-style

ตามชื่อของคุณสมบัตินี้ เราจะเห็นได้ว่าคุณสมบัตินี้ใช้กำหนดรูปแบบตัวอักษรสำหรับข้อความที่เราใช้

ตอนนี้มาดูคุณสมบัติ font-style พร้อมตัวอย่างกัน

<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>

<p class="normal">
    Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
     consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum 
     dolor sit amet. consectetur 
     adipiscing elit
</p>

ขอแสดงความยินดี

ขอแสดงความยินดี 🎉

ในส่วนนี้ เราได้เรียนรู้คุณสมบัติ CSS ที่ใช้บ่อยที่สุด

ในส่วนถัดไป เราจะเรียนรู้ระยะขอบ CSS

คุณสมบัติ CSS ที่ใช้บ่อยที่สุด — ภาพประกอบ 12

คำถามที่พบบ่อย

บทเรียน “คุณสมบัติ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

← กลับไปที่ HTML for Kids