Tìm Hiểu Về Đơn Vị Trong CSS

Có thể bạn quan tâm

CSS cơ bản
Giới thiệu CSS
CSS là gì ?
Cú pháp CSS
Include CSS vào HTML
Đơn vị
Màu (Color)
Background
Định dạng Font
Định dạng Text
Hình ảnh
Trang trí Link
Bảng
Đường viền (Border)
Căn lề (Margin)
List và Marker
Padding
Con trỏ (Cursor)
Outline
Kích thước
Scrollbar

CSS nâng cao
Visibility
Căn chỉnh vị trí
Layer (Thuộc tính z-index)
Giới thiệu Pseudo Class
Phần tử giả (Pseudo Element)
Qui tắc @
Media Type
Qui tắc @page
Định dạng trước khi in
Thiết lập Layout
Validation

Học CSS3 cơ bản
Giới thiệu CSS3
Rounded Corner
Thuộc tính Border Image
Multi Background
Màu trong CSS3
Gradient là gì ?
Tạo Shadow
Tạo hiệu ứng cho Text
Web Font
2D Transform
3D Transform
Hiệu ứng (Animation)
Chia cột (Multi Column)
User Interface
Thuộc tính box-sizing

Khái niệm CSS Responsive
CSS Responsive là gì ?

Tra cứu nhanh CSS
Tổng hợp tất cả Thuộc tính
Danh sách tên màu
Web Safe Font
Tổng hợp các Hiệu ứng

CSS Tool
Chuyển đổi PX sang EM

Tìm hiểu về Đơn vị trong CSS Trang trước Trang sau

Trong cuộc sống hàng ngày chúng ta có nhiều đơn vị để cân, đo, đong đếm mọi thứ hữu hình, ví dụ như cm, km, kg, … Vậy, với một trang web, để xác định xem phần tử này phải nằm ở khu vực này, hình ảnh kia phải hiển thị ở chỗ kia, thì ta phải dùng đơn vị gì để xác định. Mét, kilomet hay centimet.

Chương này sẽ giúp bạn làm quen một số đơn vị được sử dụng thường xuyên trong CSS.

Đơn vị	Miêu tả	Ví dụ
%	Đơn vị %, là đơn vị tham chiếu tỉ lệ so với một phần tử mẹ dựa vào kích thước. Ví dụ: bạn có một khung mẹ có kích thước là 400px và bạn muốn đặt một khung khác vào bên trong khung mẹ này. Tùy theo lựa chọn thì khung con này sẽ có nhiều kích thước, và tương ứng với kích thước khung mẹ thì bạn sẽ có tỉ lệ tương ứng. Ví dụ: nếu là 50% thì khung con có kích thước là 200px	p {font-size: 16pt; line-height: 125%;}
cm	Đơn vị centimet	div {margin-bottom: 2cm;}
em	Một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12pt thì mỗi đơn vị em sẽ là 12pt, do đó 2em sẽ là 24pt	p {letter-spacing: 7em;}
ex	Đơn vị được sử dụng cho chiều cao của chữ cái x thường (hay là x-height)	p {font-size: 24pt; line-height: 3ex;}
in	Đơn vị inch (=2.54 cm)	p {word-spacing: .15in;}
mm	Đơn vị milimet	p {word-spacing: 15mm;}
pc	Đơn vị pica. Một pica = 12 point và do đó 1 inch = 6 pica	p {font-size: 20pc;}
pt	Đơn vị point. 1 inch = 72 point	body {font-size: 18pt;}
px	Đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác một điểm ảnh trên các thiết bị màn hình có độ phân giải thấp.	p {padding: 25px;}

Quảng cáo 👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: