Computer >> Máy Tính >  >> Lập trình >> CSS

Đặt kích thước phông chữ với Em bằng CSS

Đối với kích thước văn bản có thể mở rộng, kích thước phông chữ được biểu thị bằng em. Mặc định một em bằng 16px hoặc 12pt. Giá trị của nó có liên quan đến kích thước phông chữ của phần tử mẹ.

Cú pháp

Cú pháp của thuộc tính font-size CSS như sau -

Selector {
   font-size: /*value*/
}

Ví dụ

Các ví dụ sau minh họa cách có thể đặt thuộc tính CSS font-size trong ems -

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   border: 2px solid yellow;
   padding: 20px;
   font-size: 1em;
}
span {
   font-size: 2em;
   background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

Đặt kích thước phông chữ với Em bằng CSS

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table {
   width: 40%;
   border: 2px ridge red;
   font-size: 0.8em;
}
span {
   font-size: 1.5em;
   background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

Đặt kích thước phông chữ với Em bằng CSS