CSS Text
18/05/2019
text formatting
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored link.
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; .