CSS (Cascading Style Sheets) là ngôn ngữ thiết kế web cho phép các nhà phát triển và thiết kế web kiểm soát cách trình bày các trang web trên các trình duyệt khác nhau và thiết bị khác nhau. Một trong những khía cạnh quan trọng nhất của CSS là khả năng sử dụng các đơn vị đo lường để xác định kích thước, khoảng cách, và các thuộc tính khác của các phần tử trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về các đơn vị trong CSS và cách sử dụng chúng với ví dụ cụ thể.
Đơn vị Tuyệt Đối và Tương Đối
Trong CSS, có hai loại đơn vị đo lường chính: đơn vị tuyệt đối và đơn vị tương đối.
Đơn vị Tuyệt Đối
Đơn vị tuyệt đối là những đơn vị có giá trị cố định và không thay đổi tùy thuộc vào môi trường xem. Các đơn vị tuyệt đối bao gồm:
- px (pixels): Đây là đơn vị phổ biến nhất trong CSS, thường được sử dụng để xác định kích thước của văn bản, khoảng cách, và kích thước của các phần tử.
- cm (centimeters), mm (millimeters), in (inches), pt (points), pc (picas): Các đơn vị này thường được sử dụng trong thiết kế in ấn hơn là trên web.
Đơn vị Tương Đối
Đơn vị tương đối thay đổi giá trị tùy thuộc vào một số yếu tố khác, như kích thước của phần tử cha, kích thước màn hình, hoặc kích thước font mặc định của trình duyệt.
- em: Đơn vị này dựa trên kích thước font của phần tử cha. Ví dụ, nếu kích thước font của phần tử cha là 16px, thì
1em = 16px. - rem (root em): Tương tự như em, nhưng rem dựa trên kích thước font của phần tử gốc của tài liệu, thường là thẻ
<html>. - vw (viewport width) và vh (viewport height): Đơn vị này dựa trên kích thước của viewport. Ví dụ,
1vw = 1%của chiều rộng viewport. - % (percent): Đơn vị này dựa trên kích thước của phần tử cha hoặc một thuộc tính cụ thể của nó.
Ví dụ Sử Dụng Đơn vị trong CSS
Sử Dụng px để Xác Định Kích Thước
css
p {
font-size: 16px;
margin: 20px;
}Trong ví dụ trên, kích thước font và khoảng cách lề của đoạn văn được xác định bằng pixels.
Sử Dụng em và rem
css
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32px */
}
p {
font-size: 1.25rem; /* 20px */
}Ở đây, h1 sẽ có kích thước font gấp đôi kích thước font của phần tử cha của nó, trong khi p sẽ có kích thước font là 20px bất kể kích thước font của phần tử cha.
Sử Dụng vw và vh
css
.container {
width: 80vw;
height: 50vh;
}Container này sẽ chiếm 80% chiều rộng của viewport và 50% chiều cao của viewport.
Sử Dụng %
css
.child {
width: 50%;
}Phần tử con này sẽ chiếm 50% chiều rộng của phần tử cha của nó.
Kết Luận
Việc hiểu và sử dụng đúng các đơn vị trong CSS là rất quan trọng để tạo ra các trang web đáp ứng và thân thiện với người dùng trên mọi thiết bị và kích thước màn hình. Mỗi đơn vị có ưu và nhược điểm riêng, do đó việc lựa chọn đơn vị phù hợp tùy thuộc vào mục tiêu thiết kế cụ thể của bạn.
