Trong bài này chúng ta sẽ cùng tìm hiểu về đơn vị đo kích thước trong CSS và thực hiện một số ví dụ liên quan đến sử dụng các đơn vị đo này.
Các đơn vị đo kích thước trong CSS
Trong CSS có hai loại đơn vị đo kích thước là: đơn vị đo tuyệt đối và đơn vị đo tương đối. Cụ thể như sau:
- Đơn vị đo tuyệt đối: Là đơn vị đo với giá trị không đổi khi thay đổi kích thước màn hình hay độ phân giải màn hình chẳng hạn. Chúng ta có 02 đơn vị thường dùng đó là: px (pixel) và pt (1.0 icnh = 72pt = 2,54 centimet)
- Đơn vị đo tương đối: Là đơn vị đo có giá trị thay đổi khi kích thước màn hình thay đỏi chẳng hạn. Chúng ta có các đơn vị thường dùng là: % , em,.. Ví dụ ta đặt kích thước mặc định của tất cả văn bản trong HTML là 14px, tiếp theo ta chọn kích thước thẻ H1 là 140% thì chữ trong thẻ H1 sẽ to hơn cỡ chữ bình thường (1.4 *14)px. Còn 1em ngang bằng với kích cỡ font hiện hành, ví dụ font hiện hành là 14px thì cái font của thẻ nào đó mình đặt là 2em thì nó sẽ có kích thước là (2*14)px .
Ví dụ: Sử dụng đơn vị tương đối % để thiết lập kích thước font chữ to hơn gấp đôi (200%) so với cỡ chữ đã định 16px.
<html>
<head>
<title>Tiêu đề của trang web </title>
<meta charset="UTF-8" />
</head>
<style type="text/css">
#van-ban {
font-size: 16px;
}
#van-ban p {
font-size: 200%;
}
</style>
</head>
<body>
<div id="van-ban">
<p>Nội dung văn bản</p>
</div>
</body>
</html>
Các bạn thử thay giá trị 200% thành các giá trị khác xem sao nhé ! Ví dụ 100% thì nó sẽ có kích thước ban đầu là 16px, nếu 500% thì nó sẽ nhân lên gấp 5 lần.
Tương tự ta thực hiện ví dụ làm tăng kích thước ban đầu lên gấp đôi như sau:
<html>
<head>
<title>Tiêu đề của trang web </title>
<meta charset="UTF-8" />
</head>
<style type="text/css">
#van-ban {
font-size: 16px;
}
#van-ban p {
font-size: 2em;
}
</style>
</head>
<body>
<div id="van-ban">
<p>Nội dung văn bản</p>
</div>
</body>
</html>
Rất đơn giản chúng ta chỉ cần thay đoạn 200% thành 2em thì nó sẽ tự hiểu là phải nhân đôi kích thước đã định lên rồi.
Bài này chỉ bao nhiêu đây thôi, sau này chúng ta sẽ sử dụng các đơn vị đo kích thước rất nhiều trong bố trí và trình bày layout của website. Công việc này đòi hỏi sự tính toán tỉ mỉ rất cao, do đó các bạn lưu ý nội dung này nhé, tuy đơn giản nhưng rất quan trọng.
Bài học trước đó và tiếp theo
![[Học CSS] Bài 14: Tìm hiểu về Box Model trong CSS](https://hocban.vn/wp-content/uploads/2017/03/Hinh-dung-ve-CSS-Box-Model-211x150.png "[Học Css] Bài 14: Tìm Hiểu Về Box Model Trong Css")
![[Học CSS] Bài 11: Làm việc với padding trong CSS](https://hocban.vn/wp-content/uploads/2017/05/Hoc-CSS-211x150.jpg "[Học Css] Bài 11: Làm Việc Với Padding Trong Css")
