CSS cho phép chúng ta định dạng văn bản để tạo nội dung hấp dẫn về mặt thị giác. Các thuộc tính sau được dùng để tạo kiểu văn bản bằng CSS.
color
Thuộc tính này giúp thay đổi màu chữ.
letter-spacing
Thuộc tính này dùng để đặt khoảng cách giữa các ký tự.
line-height
Chiều cao của một dòng được chỉ định bằng thuộc tính này.
text-align
Căn chỉnh ngang của văn bản được kiểm soát bởi thuộc tính text-align.
text-decoration
Để gạch chân, gạch ngang, gạch trên và tạo kiểu cho chúng, ta dùng text-decoration.
text-indent
Thụt lề dòng đầu tiên của một phần tử được đặt bằng thuộc tính text-indent.
text-shadow
Để hiển thị bóng quanh văn bản, ta dùng thuộc tính text-shadow.
text-transform
Chữ hoa/thường của văn bản có thể được đặt với thuộc tính text-transform.
word-spacing
Khoảng cách giữa các từ có thể được đặt với thuộc tính này.
Cú pháp
Cú pháp của thuộc tính font-variant như sau:
Selector { font-variant: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa định dạng văn bản trong CSS.
<!DOCTYPE html> <html> <head> <style> h2::before { content: "DEMO "; text-align: center; text-decoration: line-through; color: orange; } article { width: 600px; text-align: justify; text-shadow: -10px -5px lightgreen; } </style> </head> <body> <h2>Tiêu đề ví dụ</h2> <article>Đây là văn bản demo. Ở đây, chúng ta hiển thị các cách khác nhau để định dạng văn bản.</article> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> div { margin: 10px; display: flex; float: left; word-spacing: 30px; box-shadow: inset 0 0 6px violet; } div::after { content: " "; border: 8px solid green; } div + div{ background-color: indianred; width: 200px; color: white; text-align: justify; } </style> </head> <body> <div>SAS là viết tắt của Statistical Analysis Software. Nó được tạo năm 1960 bởi Viện SAS.</div> <div>SAS là nhà lãnh đạo trong phân tích kinh doanh. Qua phân tích đổi mới, nó phục vụ phần mềm và dịch vụ trí tuệ kinh doanh và quản lý dữ liệu.</div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
