ในการจัดรูปแบบข้อความใน CSS คุณสามารถเปลี่ยนสีข้อความ การตกแต่งข้อความ ความสูงของบรรทัด ทิศทางของข้อความ การจัดแนวข้อความ ฯลฯ
เรามาดูตัวอย่างกัน −
การจัดตำแหน่งข้อความ
ในการตั้งค่าการจัดตำแหน่งข้อความโดยใช้ CSS ให้ใช้คุณสมบัติ text-align ต่อไปนี้เป็นค่าคุณสมบัติที่เป็นไปได้ -
text-align: left|right|center|justify|initial|inherit;
ตัวอย่าง
เรามาดูตัวอย่างการตั้งค่าการจัดตำแหน่งข้อความ −
<!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> ผลลัพธ์
ความสูงของเส้น
หากต้องการกำหนดความสูงของเส้น ให้ใช้คุณสมบัติความสูงของเส้น ต่อไปนี้เป็นค่าคุณสมบัติ -
line-height: normal|number|length|initial|inherit;
ตัวอย่าง
<!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> ผลลัพธ์
การตกแต่งข้อความ
สำหรับการตกแต่งข้อความใน CSS ให้ใช้คุณสมบัติ text-decoration เป็นคุณสมบัติชวเลขสำหรับคุณสมบัติต่อไปนี้ -
text-decoration-line text-decoration-color text-decoration-style
ตัวอย่าง
เรามาดูตัวอย่างการตกแต่งข้อความใน 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> ผลลัพธ์
