Styling text · Định dạng văn bản
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
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.
Tiếng Việt
Kích thước chữ
font-sizethiết lập kích thước chữ, thường đo bằng pixel:font-size: 24px;.font-weight: bold;làm chữ in đậm (dùngnormalđể hoàn tác).font-family: Georgia;thay đổi kiểu chữ — phong cách của các ký tự.
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.
Tiếng Việt
Căn chỉnh chữ
text-aligndi chuyển chữ sang trái, giữa, hoặc phải bên trong khung của nó.text-align: center;rất tốt cho tiêu đề.line-height: 1.6;thêm khoảng cách giữa các dòng, giúp đoạn văn dễ đọc hơn.
<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.
Tiếng Việt
Lỗi thường gặp
font-size,font-weightvàtext-alignkiểm soát việc căn chỉnh chữ.- Kích thước thường sử dụng
pxhoặcrem.
English
Now you try
- These properties stack up — one box can have several.
- Resize a heading, then center a paragraph.
Tiếng Việt
Bây giờ bạn thử
- Các thuộc tính này có thể chồng lên nhau — một khung có thể chứa nhiều thuộc tính.
- Thay đổi kích thước tiêu đề, sau đó căn giữa một đoạn văn.
Make the heading bigger. Add h1 { font-size: 40px; }. · Làm cho tiêu đề to hơn. Thêm h1 { font-size: 40px; }.
Center the paragraph on the page. Add p { text-align: center; }. · Canh giữa đoạn văn trên trang. Thêm p { text-align: center; }.