CSS ช่วยให้เราจัดรูปแบบข้อความเพื่อสร้างเนื้อหาที่น่าสนใจทางสายตา คุณสมบัติต่อไปนี้ใช้สำหรับจัดรูปแบบข้อความโดยใช้ CSS:
color
คุณสมบัตินี้ช่วยเปลี่ยนสีข้อความ
letter-spacing
คุณสมบัตินี้ใช้สำหรับตั้งค่าระยะห่างระหว่างตัวอักษร
line-height
ความสูงของบรรทัดระบุโดยคุณสมบัตินี้
text-align
การจัดตำแนวแนวนอนของข้อความควบคุมโดยคุณสมบัติ text-align
text-decoration
ใช้สำหรับขีดเส้นใต้ ขีดทับ หรือขีดบนและจัดรูปแบบ
text-indent
การเยื้องของบรรทัดแรกขององค์ประกอบตั้งค่าด้วยคุณสมบัติ text-indent
text-shadow
ใช้สำหรับแสดงเงารอบข้อความ
text-transform
กรณีของข้อความสามารถตั้งค่าได้ด้วยคุณสมบัติ text-transform
word-spacing
ระยะห่างระหว่างคำสามารถตั้งค่าได้ด้วยคุณสมบัตินี้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ 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>หัวข้อตัวอย่าง</h2> <article>นี่คือข้อความสาธิต ที่นี่เรากำลังแสดงวิธีต่างๆ ในการจัดรูปแบบข้อความ</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 ย่อมาจาก Statistical Analysis Software ถูกสร้างในปี 1960 โดย SAS Institute</div> <div>SAS เป็นผู้นำในการวิเคราะห์ธุรกิจ ผ่านการวิเคราะห์นวัตกรรม ให้บริการซอฟต์แวร์และบริการข้อมูลเชิงข่าวและจัดการข้อมูลทางธุรกิจ</div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
