Text Color
Thuộc tính color được sử dụng để đặt màu của văn bản. Màu sắc được chỉ định bởi:
- Tên màu - ví dụ như "red"
- Giá trị HEX - ví dụ như "# ff0000"
- Giá trị RGB - ví dụ như "rgb (255,0,0)"
body { color: blue; } h1 { color: green; }Text Color và Background Color
Trong ví dụ này, chúng tôi xác định cả thuộc tính background-color và thuộc tính color:
body { background-color: lightgrey; color: blue; } h1 { background-color: black; color: white; } div { background-color: blue; color: white; }Quan trọng: Độ tương phản cao rất quan trọng đối với những người có vấn đề về thị lực. Vì vậy, hãy luôn đảm bảo rằng độ tương phản giữa màu văn bản và màu nền (hoặc hình nền) là tốt!
Text Alignment
Thuộc tính text-align được sử dụng để đặt căn lề ngang của văn bản.
Văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều.
Ví dụ sau hiển thị căn giữa và văn bản căn trái và phải (căn trái là mặc định nếu hướng văn bản từ trái sang phải và căn phải là mặc định nếu hướng văn bản từ phải sang trái):
h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right;Khi thuộc tính text-align được đặt thành "justify", mỗi dòng sẽ được kéo dài để mọi dòng có chiều rộng bằng nhau và các lề trái và phải đều thẳng (giống như trong tạp chí và báo):
div { text-align: justify; }Text Align Last
Thuộc tính text-align-last chỉ định cách căn chỉnh dòng cuối cùng của văn bản.
p.a { text-align-last: right; } p.b { text-align-last: center; } p.c { text-align-last: justify; }
Text Direction
Các thuộc tính direction và unicode-bidi có thể được sử dụng để thay đổi hướng văn bản của một element:
p { direction: rtl; unicode-bidi: bidi-override; }Vertical Alignment
Thuộc tính vertical-align thiết lập căn chỉnh theo chiều dọc của một element.
img.a { vertical-align: baseline; } img.b { vertical-align: text-top; } img.c { vertical-align: text-bottom; } img.d { vertical-align: sub; } img.e { vertical-align: super; }
Text Decoration
Text Decoration bao gồm các thuộc tính:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
Thêm Decoration Line vào văn bản
Thuộc tính text-decoration-line được sử dụng để thêm dòng trang trí vào văn bản.
Mẹo: Bạn có thể kết hợp nhiều giá trị, như gạch ngang và gạch dưới để hiển thị cả dòng trên và dưới văn bản.
h1 { text-decoration-line: overline; } h2 { text-decoration-line: line-through; } h3 { text-decoration-line: underline; } p { text-decoration-line: overline underline; }Lưu ý: Không nên gạch dưới văn bản không phải là liên kết, vì điều này thường gây nhầm lẫn cho người đọc.
Màu sắc cho Decoration Line
Thuộc tính text-decoration-color được sử dụng để đặt màu của đường trang trí.
h1 { text-decoration-line: overline; text-decoration-color: red; } h2 { text-decoration-line: line-through; text-decoration-color: blue; } h3 { text-decoration-line: underline; text-decoration-color: green; } p { text-decoration-line: overline underline; text-decoration-color: purple; }
Độ dày cho Decoration Line
Thuộc tính text-decoration-thickness được sử dụng để thiết lập độ dày của đường trang trí.
h1 { text-decoration-line: underline; text-decoration-thickness: auto; } h2 { text-decoration-line: underline; text-decoration-thickness: 5px; } h3 { text-decoration-line: underline; text-decoration-thickness: 25%; } p { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: double; text-decoration-thickness: 5px; }
Shorthand Property
Thuộc tính text-decoration là một thuộc tính viết tắt cho:
text-decoration-line(bắt buộc)text-decoration-colortext-decoration-styletext-decoration-thickness
h1 { text-decoration: underline; } h2 { text-decoration: underline red; } h3 { text-decoration: underline red double; } p { text-decoration: underline red double 5px; }Text Transformation
Thuộc tính text-transform được sử dụng để chỉ đị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ữ hoa hoặc chữ thường hoặc viết hoa chữ cái đầu tiên của mỗi từ:
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
Text Spacing
Text Spacing bao gồm các thuộc tính:
text-indentletter-spacingline-heightword-spacingwhite-space
Text Indentation
Thuộc tính text-indent được sử dụng để chỉ định thụt lề của dòng đầu tiên của văn bản:
p { text-indent: 50px; }
Letter Spacing
Thuộc tính letter-spacing được sử dụng để chỉ định khoảng cách 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 cách giữa các ký tự:
h1 { letter-spacing: 5px; } h2 { letter-spacing: -2px; }
Line Height
Thuộc tính line-height được sử dụng để chỉ định khoảng cách giữa các dòng:
p.small { line-height: 0.8; } p.big { line-height: 1.8; }
Word Spacing
Thuộc tính word-spacing được sử dụng để chỉ định khoảng cách giữa các từ trong văn bản.
Ví dụ sau minh họa cách tăng hoặc giảm khoảng cách giữa các từ:
p.one { word-spacing: 10px; } p.two { word-spacing: -2px; }
White Space
Thuộc tính white-space chỉ định cách xử lý khoảng trắng bên trong một element.
p { white-space: nowrap; }
Text Shadow
Thuộc tính text-shadow thêm bóng vào văn bản.
Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang (2px) và bóng dọc (2px):
Text shadow effect!
h1 { text-shadow: 2px 2px; }Tiếp theo, thêm màu (đỏ) vào bóng:
Text shadow effect!
h1 { text-shadow: 2px 2px red; }Sau đó, thêm hiệu ứng mờ (5px) vào bóng:
Text shadow effect!
h1 { text-shadow: 2px 2px 5px red; }Một số ví dụ về Text Shadow
Bóng văn bản trên văn bản trắng:
h1 { color: white; text-shadow: 2px 2px 4px #000000; }Bóng chữ với ánh sáng neon đỏ:
h1 { text-shadow: 0 0 3px #ff0000; }Bóng chữ với ánh sáng neon màu đỏ và xanh lam:
h1 { text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; }