คุณสมบัติขนาดแบบอักษร CSS สามารถตั้งค่าได้ด้วยคำสำคัญแบบสัมบูรณ์และแบบสัมพัทธ์ สิ่งนี้จะปรับขนาดข้อความตามต้องการ
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติขนาดแบบอักษร CSS มีดังต่อไปนี้ -
Selector {
font-size: /*value*/
} ตารางต่อไปนี้แสดงรายการคำหลักมาตรฐานที่ใช้ใน CSS -
| ซีเนียร์ | คุณค่าและรายละเอียด |
|---|---|
| 1 | ปานกลาง ตั้งค่าขนาดฟอนต์เป็นขนาดกลาง นี่คือค่าเริ่มต้น |
| 2 | xx-small ตั้งค่าขนาดตัวอักษรเป็น xx-small size |
| 3 | x-เล็ก ตั้งค่าขนาดตัวอักษรให้มีขนาดเล็กเป็นพิเศษ |
| 4 | เล็ก กำหนดขนาดตัวอักษรให้มีขนาดเล็ก |
| 5 | ใหญ่ กำหนดขนาดตัวอักษรเป็นขนาดใหญ่ |
| 6 | x ขนาดใหญ่ กำหนดขนาดฟอนต์เป็นขนาดใหญ่พิเศษ |
| 7 | xx-ขนาดใหญ่ ตั้งค่าขนาดตัวอักษรเป็น xx-ขนาดใหญ่ |
| 8 | เล็กลง ตั้งค่าขนาดตัวอักษรให้มีขนาดเล็กกว่าองค์ประกอบหลัก |
| 9 | ใหญ่ขึ้น ตั้งค่าขนาดตัวอักษรให้มีขนาดใหญ่กว่าองค์ประกอบหลัก |
ตัวอย่างต่อไปนี้แสดงให้เห็นว่าคุณสมบัติขนาดแบบอักษร CSS สามารถตั้งค่าด้วยคำหลักได้อย่างไร
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-size: larger;
}
#demo {
font-size: medium;
text-align: center;
background-color: floralwhite;
}
p {
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p id="demo">This is demo text.</p>
<p>This is another demo text.</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 5px;
width: 30%;
border: 1px solid;
border-radius: 29%;
text-align: center;
font-size: xx-small;
}
p {
font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>One</div>
<p>Two</p>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
