Để định dạng văn bản trong CSS, bạn có thể thay đổi màu chữ, trang trí chữ, độ cao dòng, hướng văn bản, căn chỉnh văn bản, v.v.
Xem một số ví dụ:
Căn chỉnh văn bản (Text Alignment)
Để căn chỉnh văn bản, dùng thuộc tính text-align. Các giá trị có thể:
text-align: left | right | center | justify | initial | inherit;
Ví dụ
Ví dụ căn chỉnh văn bản:
<!DOCTYPE html> <html> <head> <style> .demo { -webkit-columns: auto auto; /* Chrome, Safari, Opera */ -moz-columns: auto auto; /* Firefox */ columns: auto auto; text-align: justify; } </style> </head> <body> <h1>Machine Learning</h1> <div class="demo"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills. </div> </body> </html>
Kết quả
Độ cao dòng (Line Height)
Để đặt độ cao dòng, dùng line-height. Các giá trị:
line-height: normal | number | length | initial | inherit;
Ví dụ
<!DOCTYPE html> <html> <head> <style> div { line-height: 1.9; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.<br> This is another demo text. </p> </div> </body> </html>
Kết quả
Trang trí văn bản (Text Decorations)
Để trang trí văn bản, dùng text-decoration như shorthand cho:
text-decoration-line text-decoration-color text-decoration-style
Ví dụ
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
Kết quả
