Độ dài và đo lường
Có hai loại độ dài (length) được sử dụng trong CSS: tương đối (relative) và tuyệt đối (absolute). Độ
dài tuyệt đối không phụ thuộc vào các biện pháp đo lường khác. Một đo lường tuyệt đối duy trì độ
dài bất kể môi trường (hệ điều hành), trình duyệt hay phân giải màn hình của màn hình máy tính
(computer monitor) trong đó nó được áp dụng. Độ dài tương đối, mặt khác, phụ thuộc vào môi trường
trong đó chúng được sử dụng, như phân giải màn hình của computer monitor hay kích cỡ của font.
Đo lường tuyệt đối được định nghĩa dựa trên các đơn vị thực như inches, centimeters, points…
Phương pháp đo lường này được sử dụng trong nhiều thế kỉ trong công nghiệp in ấn, và người ta quen
nhìn thấy chúng trên thước kẻ.
Đo lường tuyệt đối
CSS hỗ trợ một loạt các đo lường thực khác nhau. Mỗi đơn vị độ dài tuyệt đối được hỗ trợ bởi CSS
được định nghĩa trong bảng sau:
Độ dài tuyệt đối không dành cho màn hình máy tính, nó dành cho nơi một đo lường vật lí là cần thiết
. Ví dụ, in một tài liệu yêu cầu đo lường thực. Cho bây giờ trong CSS bạn sẽ không hoặc ít sử dụng
đo lường tuyệt đối.
Đo lường tương đối
Đo lường tương đối là phù hợp tốt hơn cho mục đích bố cục trên màn hình. Bảng sau định nghĩa bốn dạng
đo lường tương đối cái CSS cho phép.
Các đơn vị em và ex được đo lường tương đối với kích cỡ font của một tài liệu, pixels sử dụng pixels
thực của phân giải màn hình, và đo lường % phụ thuộc vào đặc tính gì đang được áp dụng.
Đo lường pixels
Đo lường px được đo lường tương đối với các thiết lập của màn hình máy tính. Đo lường này phụ thuộc
vào phân giải màn hình của màn hình máy tính người dùng. Ví dụ, một đo lường pixel được xem tại phân
giải 800×600 là lớn hơn một đo lường pixel được xem tại phân giải 1024×768. Đo lường pixel sử dụng
tốt nhất trên màn hình máy tính. Cho in ấn tốt nhất là sử dụng đo lường tuyệt đối và đo lường tương
đối khác.
Đo lường em dựa trên kích cỡ font
Đo lường bằng em là một trong ba các đo lường tương đối được ưa thích cho bố cục trên màn hình bên
cạnh pixels và %.
Một đo lường cái tương đối với kích cỡ font cho phép việc thiết kế tăng quy mô độ dài lên hay xuống một
cách đẹp đẽ với kích cỡ font ưa thích của người dùng.
Tất cả các trình duyệt hiện đại cung cấp một cơ chế tăng quy mô kích cỡ font lên hay xuống theo ưa
thích của người dùng. Cái này làm cho kích cỡ của 1 em cũng thay đổi, vì vậy bất cứ giá trị nào dựa trên
đơn vị em cũng thay đổi.
Ví dụ về đơn vị em:
<html lang=”en”>
<head>
<style type=”text/css”>
body{
font:12px sans-serif;
}
h1{
font-family:Times New Roman,Times,serif;
font-size:2em
}
</style>
</head>
<body>
<h1>Font chu nay tang gap doi font chu thuong</h1>
<p>Font chu thuong</p>
</body>
</html>
Trinh duyệt hiển thị:
Font chu nay tang gap doi font chu thuong
Font chu tuong
Quy tắc đầu tiên áp dụng cho phần tử body và thiết lập kích cỡ font mặc định của tất cả cáct text trong
tài liệu thành 12px. Sau đó, bạn thiêt lập kích cỡ font của phần tử <h1> bằng cách quy định đặc tính
font-size thành 2em hay tăng gấp hai lần kích cớ font thường của tài liệu.Chú ý:
+ Nếu có nhiều kích cỡ font khác nhau trong tài liệu, cái này áp dụng cho font chữ gần nhất.
+ CSS không chấp nhận khoảng trắng giữa giá trị số và đơn vị. Cho nên, 12em là đúng, 12 em là sai.
Đo lường dựa trên chiều cao chữ thường x
Đo lường ex cũng được biết đến như là x-height, giống với em dựa trên kích cỡ font. Tuy nhiên, đo lường
ex là tương đối với chiều cao của chữ thường x. Đo lường ex là đơn vị đo lường nữa có nguồn gốc từ phong
cách hiển thị chữ (typography). Cái này có thể không ổn định qua các loại font khác nhau, vì vậy tốt nhất
là tránh nó cho thiết kế hiển thị trên màn hình máy tính, và cho in ấn bạn phổ biến sử dụng giá trị
em và points.
Đo lường %
Các đo lường % luôn phụ thuộc vào cái khác, vì vậy đo lường % cũng là một dạng của đo lường tương đối.
Đặc biệt, chúng là tương đối đối với đo lường của các phần tử khác, bất kể nó là kích cỡ font được kế thừa
hay độ rộng (width) hay chiều dài (height) của phần tử chứa. Chính xác là phần tử nào đo lường % có quan
hệ tương đối với phụ thuộc vào một số nhân tố, bao gồm đặc tính hay giá trị nào bạn đang sử dụng đo lường
% cho chúng cũng như các quy tắc CSS khác đang áp dụng cho tài liệu.
Kết luận
Vì nó là ngôn ngữ trình bày, hầu hết CSS bị ảnh hưởng theo cách nào đó bởi độ dài và các đơn vị đo lường.
Đơn vị cơ bản cho tất cả các đo lường khi bạn thiết kế cho hiển thị trên màn hình máy tính là pixel, vì màn
hình máy tính hiển thị hình ảnh bằng pixels. Bạn có thể định nghĩa các độ dài tương đối với kích cỡ
font, sử dụng đơn vị em như là giải pháp ổn định và thực tiễn nhất. Các độ dài tuyệt đối, mặt khác phù hợp
tốt hơn cho in ấn vì sự không ổn định diễn ra khi đo lường tuyệt đối được sử dụng cho trình bày trên màn
hình máy tính.