HTML/CSS

[W3schools Tiếng Việt] – CSS TEXT | Định dạng văn bản

Viết bởi Tiến Đức
Phần 7 của 9 trong series [W3schools Tiếng Việt] - CSS

Bài này chúng ta sẽ tìm hiểu những thuộc tính để định dạng văn bản như sau:

Thuộc tính Mô tả
color Đặt màu cho văn bản
direction Chỉ định hướng văn bản / hướng viết
letter-spacing Tăng hoặc giảm khoảng trắng giữa các ký tự trong văn bản
line-height Đặt chiều cao dòng
text-align Căn lề văn bản
text-decoration Trang trí: gạch đầu, gạch ngang, gạch chân
text-indent Thụt đầu dòng văn bản
text-shadow Đổ bóng văn bản
text-transform Chuyển đổi kiểu chữ (chữ hoa chữ thường)
text-overflow Chỉ định cách làm dấu hiệu tràn nội dung
vertical-align Căn chỉnh vị trí dọc (tịnh tiến lên xuống) của một phần tử
white-space Xử lý khoảng trắng bên trong một phần tử
word-spacing Tăng hoặc giảm khoảng trắng giữa các từ trong văn bản

 Mầu chữ

Thuộc tính color  được sử dụng để đặt màu của văn bản.

Trong đó, “màu sắc” có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX (Tham khảo hơn 140+ tên màu và mã màu).

Căn chỉnh văn bản

Thuộc tính  text-align được sử dụng để căn chỉnh văn bản (theo hướng ngang).

Một văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều hai bên, tương ứng left, right, center, justify.

Trang trí văn bản

Thuộc tính text-decoration được sử dụng để đặt hoặc xóa trang trí văn bản (gạch đầu, gạch giữa, gạch chân)

Giá trị text-decoration: none; thường được sử dụng để xóa gạch chân khỏi các liên kết:

Các giá trị được sử dụng trong text-decoration :

See the Pen text trang tri by nguyen tien (@nguyentien365) on CodePen.

Chuyển đổi văn bản

Thuộc tính  text-transform được sử dụng để xác định chữ hoa và chữ thường trong văn bản.

Nó có thể được sử dụng để biến mọi thứ thành chữ in hoa hoặc chữ thường hoặc viết hoa chữ cái đầu tiên của mỗi từ:

See the Pen text viet hoa viet thường by nguyen tien (@nguyentien365) on CodePen.

Văn bản thụt lề

Thuộc tính text-indent  được sử dụng để chỉ định thụt dòng của dòng đầu tiên của văn bản:

Khoảng cách chữ

Thuộc tính letter-spacing  được sử dụng để chỉ định khoảng trắng giữa các ký tự trong văn bản.

Ví dụ sau minh họa cách tăng hoặc giảm khoảng trắng giữa các ký tự:

See the Pen text spacing by nguyen tien (@nguyentien365) on CodePen.

Chiều cao giữa các dòng

Thuộc tính line-height  được sử dụng để chỉ định khoảng trắng giữa các dòng:

See the Pen line-height by nguyen tien (@nguyentien365) on CodePen.

Chỉ định hướng văn bản / hướng viết

Thuộc tính direction được sử dụng để thay đổi hướng văn bản của một phần tử:

See the Pen bdo dir by nguyen tien (@nguyentien365) on CodePen.

Khoảng cách từ

Thuộc tính word-spacing  được sử dụng để chỉ định khoảng trắng giữa các từ trong văn bản.

Đổ bóng văn bản

Thuộc tính text-shadow để thêm bóng cho văn bản.

Ví dụ sau chỉ định vị trí của bóng ngang (3px), vị trí của bóng dọc (2px) và màu của bóng (đỏ):

See the Pen text-shadow by nguyen tien (@nguyentien365) on CodePen.

 

Xem thêm bài trong series<< [W3schools Tiếng Việt] – CSS Borders | Đường viền[W3schools Tiếng Việt] – CSS Margins | Canh lề cho phần tử >>
Sending
User Review
0 (0 votes)

Về tác giả

Tiến Đức

Gửi phản hồi