Bài này chúng ta sẽ tìm hiểu về các cách để định dạng dạng văn bản (Text) trong CSS bởi sử dụng các thuộc tính CSS định dạng văn bản. Với một phần tử bất kỳ, bạn có thể thiết lập các thuộc tính text sau:
Thuộc tính color được sử dụng để thiết lập màu cho văn bản.
Thuộc tính direction được sử dụng để thiết lập hướng cho văn bản.
Thuộc tính letter-spacing được sử dụng để thêm hoặc bớt khoảng cách giữa các chữ cái trong một từ.
Thuộc tính word-spacing được sử dụng để tăng hoặc giảm khoảng cách giữa các từ trong một câu.
Thuộc tính text-indent được sử dụng để tạo độ thụt của văn bản trong một đoạn văn.
Thuộc tính text-align được sử dụng để căn chỉnh văn bản trong một tài liệu.
Thuộc tính text-decoration được sử dụng để tạo cách dấu gạch ở chân, ở trên, ở giữa văn bản.
Thuộc tính text-transform được sử dụng để chuyển văn bản thành chữ hoa hoặc chữ thường.
Thuộc tính white-space được sử dụng để định dạng và điều khiển phần khoảng trắng của văn bản.
Thuộc tính text-shadow được sử dụng để thiết lập hình bóng (shadow như trong word) xung quanh văn bản.
Nội dung chính
- Thiết lập màu văn bản trong CSS
- Thiết lập hướng văn bản với thuộc tính direction trong CSS
- Thiết lập khoảng cách giữa các chữ cái với thuộc tính letter-spacing trong CSS
- Thiết lập khoảng cách giữa các từ với thuộc tính word-spacing trong CSS
- Thiết lập độ thụt văn bản với thuộc tính text-indent trong CSS
- Căn chỉnh văn bản với thuộc tính text-align trong CSS
- Trang trí văn bản với thuộc tính text-decoration trong CSS
- Thiết lập chữ hoa, chữ thường trong CSS
- Thiết lập khoảng cách của khoảng trắng trong CSS
- Tạo shadow trong CSS
Thiết lập màu văn bản trong CSS
Để thiết lập màu cho văn bản trong CSS, bạn sử dụng thuộc tính color. Giá trị của thuộc tính này là bất kỳ tên màu hoặc định dạng màu hợp lệ nào (tham khảo bài Mã màu trong CSS ). Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="color:red;">
Đoạn văn bản này có màu đỏ.
</p>
</body>
</html>
Kết quả:
Thiết lập hướng văn bản với thuộc tính direction trong CSS
Để Thiết lập hướng cho văn bản trong CSS (từ trái sang phải hay từ phải sang trái), bạn sử dụng thuộc tính direction. Thuộc tính này nhận một trong hai giá trị: ltr (trái sang phải) hoặc rtl (phải sang trái). Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="direction:rtl;">
Đoạn văn bản sẽ được hiển thị theo hướng từ trái qua phải.
</p>
</body>
</html>
Kết quả:
Thiết lập khoảng cách giữa các chữ cái với thuộc tính letter-spacing trong CSS
Giữa các chữ cái trong một từ nên có khoảng cách bằng bao nhiêu là hợp lý nhất. Để thiết lập khoảng cách này, bạn sử dụng thuộc tính letter-spacing trong CSS. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="letter-spacing:6px;">
Các chữ cái trong một từ sẽ có khoảng cách là 6 pixel.
</p>
</body>
</html>
Kết quả:
Thiết lập khoảng cách giữa các từ với thuộc tính word-spacing trong CSS
Thiết lập khoảng cách giữa các từ trong một tài liệu một cách hợp lý sẽ giúp cho Webpage của bạn dễ đọc hơn. Để thiết lập khoảng cách này, bạn sử dụng thuộc tính word-spacing trong CSS. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="word-spacing:6px;">
Khoảng cách giữa hai từ liền kề nhau là 6 pixel.
</p>
</body>
</html>
Kết quả:
Thiết lập độ thụt văn bản với thuộc tính text-indent trong CSS
Trong một Website chất lượng, trong một đoạn văn hay một khối, từ đầu tiên của dòng đầu tiên nên được thiết lập độ thụt dòng hợp lý. Điều này sẽ khiến Website của bạn đẹp và chuyên nghiệp hơn. Để thiết lập độ thụt dòng này, bạn nên sử dụng thuộc tính text-indent trong CSS. Thuộc tính này có thể nhận các giá trị: % hoặc một số cụ thể. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="text-indent:1.5cm;">
Dòng này bị thụt lề 1.5 cm, áp dụng cho dòng đâu tiên của đoạn văn.<br>
Thiết lập độ thụt văn bản với thuộc tính text-indent trong CSS
</p>
</body>
</html>
Kết quả:
Căn chỉnh văn bản với thuộc tính text-align trong CSS
Giống như trong Word, CSS có thuộc tính text-align để giúp bạn trong việc căn chỉnh văn bản. Thuộc tính này có thể nhận một trong các giá trị :left, right, center, justify.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="text-align:right;">
Căn chỉnh bên phải (right).
</p>
<p style="text-align:center;">
Căn chỉnh giữa (center).
</p>
<p style="text-align:left;">
Căn chỉnh bên trái (left).
</p>
</body>
</html>
Kết quả:
Trang trí văn bản với thuộc tính text-decoration trong CSS
Để tạo các dấu gạch ngang ở chân, ở trên hoặc ở giữa một đoạn văn bản, bạn sử dụng thuộc tính text-direction trong CSS. Thuộc tính này có thể nhận giá trị: none, overline (dấu gạch ở trên), underline (gạch chân), line-through (gạch ngang) hoặc blink. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="text-decoration:underline;">
Đoạn văn bản này có đường gạch ngang dưới chân.
</p>
<p style="text-decoration:line-through;">
Đoạn văn bản này sẽ bị gạch chân.
</p>
<p style="text-decoration:overline;">
Đoạn văn bản này có đường gạch gang trên đầu.
</p>
<p style="text-decoration:blink;">
Đoạn văn bản này nhấp nháy (blink).
Tuy nhiên, một số trình duyệt không hỗ trợ hiệu ứng blink.
</p>
</body>
</html>
Kết quả: &minnus;
Thiết lập chữ hoa, chữ thường trong CSS
Để thiết lập chữ hoa hoặc chữ thường cho một đoạn văn bản, bạn sử dụng thuộc tính text-transform trong CSS. Thuộc tính này có thể nhận giá trị: none, capitalize (viết hoa chữ cái đầu tiên của một từ), uppercase (chuyển toàn bộ văn bản thành chữ hoa), hoặc lowercase (chuyển toàn bộ văn bản thành chữ thường). Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="text-transform:capitalize;">
Viết hoa chữ cái đầu tiên.
</p>
<p style="text-transform:uppercase;">
Viết hoa toàn bộ chữ cái.
</p>
<p style="text-transform:lowercase;">
viết thường toàn bộ chữ cái.
</p>
</body>
</html>
Kết quả:
Thiết lập khoảng cách của khoảng trắng trong CSS
Giả sử bạn có một dòng văn bản mà truyền tải thông tin quan trọng, và bạn muốn tăng khoảng cách giữa các từ trong đoạn văn này, bạn có thể sử dụng thuộc tính white-space trong CSS. Thuộc tính này có thể nhận giá trị: normal, pre hoặc nowrap. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="white-space:pre;">
Đoạn văn bản này có một đoạn xuống dòng (line break)
và được thiết lập với giá trị pre của thược tính white-space
để nói cho trình duyệt xử lý nó giống như PRE trong HTML.
</p>
</body>
</html>
Kết quả:
Tạo shadow trong CSS
Để tạo hiệu ứng đổ bóng (shadow) cho văn bản, bạn sử dụng thuộc tính text-shadow trong CSS. Tuy nhiên thuộc tính này có thể không được hỗ trợ trong một số trình duyệt. Cú pháp:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Ví dụ:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="text-shadow:4px 4px 8px blue;">
Đoạn văn bản có hiệu ứng đổ bóng Violet Shadow.
</p>
</body>
</html>
Kết quả: