Styling text · การสไตล์ข้อความ
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · หน้านี้ต้องใช้เบราว์เซอร์ล่าสุด (รองรับ SharedArrayBuffer) กรุณาอัปเดต Chrome, Edge, Firefox หรือ Safari เป็นเวอร์ชันล่าสุด
English
Sizing text
font-sizesets how big text is, usually in pixels:font-size: 24px;.font-weight: bold;makes text bold (usenormalto undo it).font-family: Georgia;changes the typeface — the style of the letters.
ไทย
การปรับขนาดข้อความ
font-sizeกำหนดขนาดข้อความ โดยทั่วไปใช้หน่วย พิกเซล:font-size: 24px;font-weight: bold;ทำให้ข้อความ หนา (ใช้normalเพื่อยกเลิก)font-family: Georgia;เปลี่ยน ฟอนต์ — รูปแบบตัวอักษร
English
Aligning text
text-alignmoves text left, center, or right inside its box.text-align: center;is great for titles.line-height: 1.6;adds space between lines, so paragraphs are easier to read.
ไทย
การจัดวางข้อความ
text-alignจัดข้อความไปทาง ซ้าย, กึ่งกลาง หรือ ขวา ภายในกล่องtext-align: center;เหมาะกับหัวข้อline-height: 1.6;เพิ่มระยะ ระหว่างบรรทัด ทำให้ย่อหน้าอ่านง่ายขึ้น
<style>
h1 { font-size: 36px; text-align: center; }
p { font-family: Georgia; line-height: 1.6; }
</style>
<h1>My story</h1>
<p>Once upon a time, on a small website...</p>
English
Common mistakes
font-size,font-weightandtext-aligncontrol text.- Sizes often use
pxorrem.
ไทย
ข้อผิดพลาดที่พบบ่อย
font-size,font-weightและtext-alignควบคุมข้อความ- ขนาดมักใช้
pxหรือrem
English
Now you try
- These properties stack up — one box can have several.
- Resize a heading, then center a paragraph.
ไทย
ลองดูเลย
- คุณสมบัติเหล่านี้ซ้อนทับกัน — กล่องหนึ่งสามารถมีหลายคุณสมบัติได้
- ปรับขนาดหัวข้อ แล้วจัดย่อหน้าที่กึ่งกลาง
Make the heading bigger. Add h1 { font-size: 40px; }. · ทำให้หัวเรื่องใหญ่ขึ้น เพิ่ม h1 { font-size: 40px; }
Center the paragraph on the page. Add p { text-align: center; }. · จัดกึ่งกลางย่อหน้าบนหน้าเว็บ เพิ่ม p { text-align: center; }