Selector CSS (Bài trước)
(Bài tiếp) font-family

Đơn vị kích thước (độ dài, lớn bé) trong CSS

Các đơn vị về kích thước để xác định độ dài, ngắn, lớn, bé của các đối tượng liên quan đến kích thước - ví dụ như chiều cao phần tử 50px (50 pixel - điểm ảnh) hoặc chiều cao phần tử là 30em. Có hai loại đơn vị sử dụng trong CSS - loại đơn vị tuyệt đối và đơn vị độ dài tương đối.

Đơn vị kích thước tuyệt đối trong CSS

Những loại đơn vị này thì giá trị của nó độc lập không liên quan đến các phần tử thành phần khác, dùng đơn vị này ở trong HTML thì kích cỡ đo được đều giống nhau. Dưới đây là những đơn vị tuyệt đối hay dùng:

Ký hiệu Đơn vị Diễn giải
cm centimet (dài bằng 1/100 m)
mm milimét (dài bằng 1/1000 m)
in Inche: 1in = 2.54cm = 96px
px Điểm ảnh (10px là 10 điểm ảnh màn hình)
pt Điểm (point), đây là đơn vị phổ biến dùng biểu diễn kích thước font chữ (72pt = 1inch = 25.4mm) hay 1pt = (1/72)in

Bạn có quyền sử dụng bất kỳ đơn vị nào, tuy nhiên phổ biến để thể hiện trên màn hình là đơn vị px, các đơn vị tuyệt đối khác như cm phù hợp để thể hiện trang in.

Đơn vị kích thước tương đối trong CSS

Khi dùng các đơn vị tương đối thì độ lớn thực tế phụ thuộc vào thành phần khác, thường là phụ thuộc vào thuộc tính phần tử cha trong HTML hoặc phụ thuộc vào kích thước viewport (kích thước cửa sổ hiện tại của trình duyệt). Lợi ích của đơn vị này là nó tự động thu phóng độ lớn (chiều dài, font chữ) theo phần tử cha

Ký hiệu Đơn vị Diễn giải
em Bằng cỡ font của phần tử cha. Có nghĩa phần tử cha có cỡ (font-size) là 14px, thì 1em là 14px - nếu cỡ font phần tử cha là 10pt thì 2em là 20px.
<div style="font-size: 20px">
    font-size phần tử cha 20px
    <div style="font-size: 0.5em">
        Cỡ font thiết lập 0.5em (bằng nửa phần tử cha)
    </div>
</div>                
font-size phần tử cha 20px
Cỡ font thiết lập 0.5em (bằng nửa phần tử cha)
rem Bằng cỡ font của phần tử gốc - root, trong CSS để thiết lập các thuộc tính của root thì dùng ký hiệu :root, rồi định nghĩa các thuộc tính giống class:
:root {
    font-size: 16px;
    color: #333;
}
lh Bằng chiều cao dòng phần tử cha
vw Bằng 1% chiều rộng cửa sổ
vh Bằng 1% chiều cao cửa sổ
Đăng ký theo dõi ủng hộ kênh
Selector CSS (Bài trước)
(Bài tiếp) font-family