Đơn vị tuyệt đối CSS
Các đơn vị độ dài tuyệt đối được cố định trong mối quan hệ với nhau. Các đơn vị này được sử dụng khi định dạng đầu ra đã được biết trước. Sau đây là một số Đơn vị Độ dài Tuyệt đối -
| Sr.No | Đơn vị &Mô tả |
|---|---|
| 1 | cm cm |
| 2 | mm milimét |
| 3 | in inch (1in =96px =2,54cm) |
| 4 | px * pixel (1px =1/96 của 1in) |
| 5 | pt điểm (1pt =1/72 của 1in) |
| 6 | pc picas (1pc =12 pt) |
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ -
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 0.3in;
}
</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> Đầu ra
Đơn vị tương đối CSS
Đơn vị độ dài tương đối trong CSS được sử dụng để chỉ định độ dài liên quan đến một thuộc tính độ dài khác.
Có liên quan đến chiều cao x của phông chữ hiện tại
| Sr.no | Đơn vị &Mô tả |
|---|---|
| 1 | em Liên quan đến kích thước phông chữ của phần tử, tức là 4em có nghĩa là gấp 4 lần kích thước phông chữ hiện tại. |
| 2 | ví dụ Liên quan đến chiều cao x của phông chữ hiện tại |
| 3 | ch Tương đối với chiều rộng của 0 |
| 4 | rem Liên quan đến kích thước phông chữ của phần tử gốc |
| 5 | vw Tương đối với 1% chiều rộng của khung nhìn * |
| 6 | vh Tương đối với 1% chiều cao của khung nhìn * |
| 7 | vmin Tương đối với 1% kích thước nhỏ hơn của khung nhìn * |
| 8 | vmax Tương đối với 1% kích thước lớn hơn của khung nhìn * |
| 9 | % Liên quan đến phần tử mẹ |
Ví dụ
Hãy để chúng tôi xem một ví dụ sử dụng Đơn vị Độ dài Tương đối -
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</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> Đầu ra
