CSS ช่วยให้เราจัดรูปแบบข้อความเพื่อสร้างเนื้อหาที่ดึงดูดสายตา คุณสมบัติต่อไปนี้ใช้เพื่อจัดรูปแบบข้อความโดยใช้ CSS
สี
คุณสมบัตินี้ช่วยให้เราเปลี่ยนสีข้อความได้
การเว้นวรรคตัวอักษร
คุณสมบัตินี้ใช้เพื่อกำหนดระยะห่างระหว่างอักขระ
ความสูงของเส้น
ความสูงของเส้นถูกระบุโดยใช้คุณสมบัตินี้
การจัดแนวข้อความ
การจัดแนวข้อความในแนวนอนถูกควบคุมโดยคุณสมบัติ text-align
การตกแต่งข้อความ
เมื่อต้องการขีดเส้นใต้ ขีดทับ หรือขีดเส้นใต้ และจัดรูปแบบ จะใช้การตกแต่งข้อความ
เยื้องข้อความ
การเยื้องของบรรทัดแรกขององค์ประกอบถูกกำหนดโดยคุณสมบัติ text-ident
เงาข้อความ
ในการแสดงเงารอบๆ ข้อความ ให้ใช้คุณสมบัติ text-shadow
การแปลงข้อความ
ตัวพิมพ์ของข้อความสามารถกำหนดได้ด้วยคุณสมบัติการแปลงข้อความ
การเว้นวรรคคำ
สามารถกำหนดช่องว่างระหว่างคำได้ด้วยคุณสมบัตินี้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ font-variant มีดังนี้ -
Selector {
font-variant: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบข้อความใน 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>Example Heading</h2>
<article>This is demo text. Here, we are displaying different ways to format text.</article>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!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 stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div>
<div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้−
