CSS Text

Text color

Thuộc tính color dùng để thiết lập màu sắc cho đoạn text. Color nhận các giá trị sau:

• color name : Theo tên màu chuẩn tiếng anh - ví dụ red, green, blue,...
• Hệ màu HEX : Ví dụ như #ff0000, #333,...
• Hệ màu RGB : ví dụ như rgb(222,222,222)

Xem thêm bài CSS Color nếu chưa biết cách dùng các thuộc tính màu sắc.

Thuộc tính màu sắc mặc định của trang HTML được qui định trong thẻ body.

body{ color: black; } h1{ color: blue; }

Text alignment

Thuộc tính text-align dùng để thiết lập canh đoạn text theo chiều ngang. Và các giá trị có thể là: left (trái), right (phải), center (canh giữa) hoặc justify (canh đều 2 bên).

p.center{ text-align: center; } p.left{ text-align: left; } p.right{ text-align: right; }

Và đây là kết quả hiển thị :

Nội dung căn giữa - center

Nội dung căn trái - left

Nội dung căn phải - right

Khi thuộc tính text-align là 'justify' thì mỗi dòng sẽ được kéo dài sao cho chiều rộng bằng nhau và lề trái , phải thẳng hàng (giống như báo và tạp chí ):

p.justify{ text-align: justify; }

Và đây là kết quả hiển thị :

Khi thuộc tính text-align là 'justify' thì mỗi dòng sẽ được kéo dài sao cho chiều rộng bằng nhau và lề trái , phải thẳng hàng (giống như báo và tạp chí ):

Text decoration

Thuộc tính text-decoration dùng để thiết lập hoặc xóa bỏ decoration của text. Giá trị text-decoration: none; hay được dùng để remove underline của link liên kết.

a{ text-decoration: none; }

Các giá trị khác của text-decoration :

• overline: gạch trên đầu text
• line-through : gạch ngang text
• underline: gạch chân text

Gạch trên đầu với overline

Gạch ngang text với line-through

Gạch chân text với underline

Chú ý: Không nên dùng underline cho text nếu không phải là links. Vì dễ gây nhầm lẫn cho người dùng.

Text Transformation

Thuộc tính text-transform dùng để biến đổi text thành in hoa (uppercase), chữ thường (lowercase) hoặc in hoa chữ đầu tiên (capitalize).

p.uppercase{ text-transform: uppercase; } p.lowercase{ text-transform: lowercase; } p.capitalize{ text-transform: capitalize; }

Kết quả hiển thị :

Text được in hoa với uppercase

Text thành chữ thường với lowercase

Text được in hoa chữ đầu tiên với capitalize

Text Indent

Thuộc tính text-indent dùng để chỉ định thụt dòng đầu tiên của đoạn văn bản

p.indent{ text-indent: 50px; }

Kết quả hiển thị:

Đoạn văn bản có thụt dòng đầu tiên với thuộc tính text-indent. Đoạn văn bản có nhiều dòng và chỉ thụt mỗi dòng đầu tiên là 50px.

Letter Spacing

Thuộc tính letter-spacing dùng để thiết lập khoảng cách giữa các kí tự trong đoạn text. Hãy xem ví dụ bên dưới với trường hợp tăng và giảm khoảng cách giữa các kí tự :

p.letter-spacing1{ letter-spacing: 2px; } p.letter-spacing2{ letter-spacing: -2px; }

Kết quả hiển thị:

Đoạn text được tăng khoảng cách giữa các kí tự lên 2px.

Đoạn text được giảm khoảng cách giữa các kí tự xuống -2px.

Line height

Thuộc tính line-height dùng để thiết lập khoảng cách giữa 2 dòng với nhau. Có 2 loại giá trị:

• số không có đơn vị - Ví dụ: line-height: 1; Khi này line-height được tính theo font-size*line-height
• số có đơn vị (px, pt, em, rem,...) - ví dụ: line-height: 20px; Thì khoảng cách giữa 2 dòng là 20px mà không quan tâm đến font-size.

p.small { line-height: 0.8; } p.big { line-height: 1.8; } p.cons { line-height: 20px; }

Kết quả hiển thị:

Đoạn text với line-height 0.8, có font-size là 16px. Khi này line-height được tính : 16px*0.8 = 12.8px

Đoạn text với line-height 1.8, có font-size là 16px. Khi này line-height được tính : 16px*1.8 = 28.8px

Đoạn text với line-height 20px, có font-size là 16px. Khi này line-height là 20px không phụ thuộc vào font-size.

Text Direction

Thuộc tính direction dùng để thay đổi hướng văn bản của phần tử HTML. Có 2 giá trị: ltr (mặc định - text từ trái sang phải) và rtl (text từ phải sang trái).

p.ltr { direction: ltr; } p.rtl { direction: rtl; }

Kết quả hiển thị:

Đoạn text với thuộc tính direction là ltr

Đoạn text với thuộc tính direction là rtl.

Word Spacing

Thuộc tính word-spacing dùng để thiết lập khoảng cách giữa các chữ trong đoạn text. Giá trị lớn hơn 0 dùng để tăng khoảng cách giữa các words, ngược lại giá trị nhỏ hơn 0 dùng để giảm khoảng cách giữa các words.

p.word-spacing1{ word-spacing: 4px; } p.word-spacing2{ word-spacing: -2px; }

Kết quả hiển thị:

Đoạn text được tăng khoảng cách giữa các chữ lên 4px.

Đoạn text được giảm khoảng cách giữa các chữ xuống -2px.

Text Shadow

Thuộc tính text-shadow dùng để tạo bóng cho text. Xem ví dụ bên dưới: Bóng theo chiều ngang là 3px, chiều dọc là 2px, và có màu đỏ.

p.shadow{ text-shadow: 3px 2px red; }

Kết quả hiển thị:

Text shadow effect

Chú ý: Internet Explore 9 trở về trước không hỗ trợ thuộc tính này.

White space

Thuộc tính white-space dùng để chỉ định cách xử lý khoảng trắng bên trong một phần tử.

p.nowrap { white-space: nowrap; } p.normal { white-space: normal; } p.pre { white-space: pre; }

Kết quả hiển thị:

Đây là đoạn văn bản với thuộc tính white-space: nowrap; . Nó sẽ nằm thành một hàng.

Đây là đoạn văn bản với thuộc tính white-space: normal; . Đây là thuộc tính mặc định.

Thuộc tính white-space: pre; . Thuộc tính white-space: pre; . Thuộc tính white-space: pre; .