Để định dạng văn bản trong CSS, bạn có thể thay đổi màu văn bản, trang trí văn bản, chiều cao dòng, hướng văn bản, căn chỉnh văn bản, v.v.
Hãy để chúng tôi xem một số ví dụ -
Căn chỉnh văn bản
Để đặt căn chỉnh văn bản bằng CSS, hãy sử dụng thuộc tính text-align. Sau đây là các giá trị thuộc tính có thể có -
text-align: left|right|center|justify|initial|inherit;
Ví dụ
Hãy để chúng tôi xem một ví dụ để đặt 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> Đầu ra
Chiều cao dòng
Để đặt chiều cao dòng, hãy sử dụng thuộc tính line-height. Followng là các giá trị thuộc tính -
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> Đầu ra
Trang trí văn bản
Để trang trí văn bản trong CSS, hãy sử dụng thuộc tính text-decoration làm thuộc tính viết tắt cho các thuộc tính sau -
text-decoration-line text-decoration-color text-decoration-style
Ví dụ
Hãy để chúng tôi xem một ví dụ về trang trí văn bản trong CSS -
<!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> Đầu ra
