Qua các bài viết thuộc tính font trong CSS, bạn đã sử dụng các đơn vị như px, %. Hôm nay chúng ta cùng tìm hiểu kỹ hơn thêm các đơn vị trong CSS khác nhé.
Các đơn vị được sử dụng để chỉ định giá trị độ dài khác 0 trong thuộc tính CSS.
1. Đơn vị trong CSS là gì?
Các đơn vị đo độ dài trong CSS có thể là tuyệt đối, chẳng hạn như pixel, điểm, v.v. hoặc tương đối như phần trăm (%) và đơn vị em.
Việc chỉ định đơn vị CSS là bắt buộc đối với các giá trị khác 0, vì không có đơn vị mặc định.
Thiếu hoặc bỏ qua một đơn vị sẽ được coi là một lỗi.
Tuy nhiên, nếu giá trị là 0, đơn vị có thể bị bỏ qua (xét cho cùng, 0 pixel là cùng một phép đo bằng không inch).
Lưu ý: Độ dài là số đo khoảng cách. Độ dài là phép đo chỉ bao gồm giá trị số và đơn vị, chẳng hạn như 10px, 2em, 50%, v.v. Khoảng trắng không thể xuất hiện giữa số và đơn vị.
2. Các đơn vị độ dài tương đối trong CSS
Đơn vị độ dài tương đối chỉ định độ dài liên quan đến thuộc tính độ dài khác. Đơn vị tương đối là:
- ẹm: Kích thước font chữ hiện tại
- ex: Chiều cao của phần tử thiện tại
Đơn vị em, ex thường xuyên được sử dụng để áp dụng kích thước trong phần tử .
2.1. Đơn vị em trong CSS
Phép đo giá trị bằng 1em được tính toán của thuộc tính kích thước phông chữ của phần tử mà nó được sử dụng. Nó có thể được sử dụng để đo dọc hoặc ngang.
Ví dụ: Nếu kích thước phông chữ của phần tử được đặt thành 16px và chiều cao dòng được đặt thành 2,5em thì giá trị tính toán của chiều cao dòng trong pixel là 2,5 x 16px = 40px.
HTML:
<p>Dòng văn bản này có kích thước 2.5 em</p>CSS:
p {
font-size: 16px;
line-height: 2.5em;
}Ngoại lệ xảy ra khi em được chỉ định trong giá trị của chính thuộc tính font-size, trong trường hợp đó, nó tham chiếu đến kích thước phông chữ của phần tử mẹ.
Vì vậy, khi chúng ta chỉ định kích thước phông chữ trong em, 1em bằng với kích thước phông chữ kế thừa. Như vậy, font-size: 1.2em; làm cho văn bản lớn hơn 1,2 lần so với văn bản của phần tử mẹ.
Nhưng làm như thế vẫn khó tính toán, hơi lệch khỏi nhận thức thông thường một chút. Nếu phần tử mẹ có font-size 20 px thì 1.2em lúc này sẽ khác.
Ở chỗ khác có phần tử mẹ có font-size là 18 px thì 1.2 em lúc này của phần tử con lại khác.
Điều này dễ dẫn tới sự nhầm lẫn trong khi viết CSS.
Để làm lại cho dễ tính toán, thống nhất, chúng ta hãy xem qua ví dụ sau:
HTML:
<p>Đây là một đoạn văn bản thông thường</p>CSS:
body {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 1.6em;
}
p:firt-letter {
font-size: 3em;
font-weight: bold;
}Kích thước mặc định cho phông chữ trong tất cả các trình duyệt hiện đại là 16px.
Bước đầu tiên của chúng ta là giảm kích thước này cho toàn bộ tài liệu bằng cách đặt kích thước phông chữ phần body thành 62,5%, điều này nghĩa là đặt lại font-size của body thành 10px (62,5% của 16px).
Điều này là để làm tròn kích thước phông chữ mặc định để dễ dàng chuyển đổi px hay là em.
- Giờ thì 1em sẽ là 10 px
- 1.4 em sẽ là 14px
- 1.8 em sẽ là 18px
- … cứ như vậy
2.3. Đơn vị ex trong CSS
Đơn vị ex bằng chiều cao chữ thường của phông chữ hiện tại.
Nó còn được gọi là x-height vì nó thường bằng chiều cao của chữ ‘x’ viết thường, như minh họa bên dưới. Tuy nhiên, một ví dụ ex được xác định ngay cả đối với các phông chữ không chứa ‘x’.
3. Các đơn vị độ dài tuyệt đối trong CSS
Các đơn vị độ dài tuyệt đối là cố định. Chúng phụ thuộc nhiều vào thiết bị đầu ra, do đó chủ yếu hữu ích khi môi trường đầu ra được biết đến chính xác.
Các đơn vị tuyệt đối bao gồm các đơn vị vật lý (in, cm, mm, pt, pc) và đơn vị px.
Các đơn vị vật lý tuyệt đối như in, cm, mm, v.v. nên được sử dụng cho giấy in và các thiết bị có độ phân giải cao tương tự.
Trong khi đó, đối với hiển thị trên màn hình như máy tính để bàn và các thiết bị có độ phân giải thấp hơn, bạn nên sử dụng đơn vị pixel hoặc em.
Ví dụ:
HTML:
<h1>Test độ dài tuyệt đối trong CSS: in</h1>
<h2>Test độ dài tuyệt đối trong CSS: cm</h2>
<h3>Test độ dài tuyệt đối trong CSS: mm</h3>
<h4>Test độ dài tuyệt đối trong CSS: pt</h4>
<h5>Test độ dài tuyệt đối trong CSS: pc</h5>
<h6>Test độ dài tuyệt đối trong CSS: px</h6>CSS:
h1 { margin: 0.5in; } /* inches */
h2 { line-height: 3cm; } /* centimeters */
h3 { word-spacing: 4mm; } /* millimeters */
h4 { font-size: 12pt; } /* points */
h5 { font-size: 1pc; } /* picas */
h6 { font-size: 12px; } /* picas */Mẹo: Trong khi lập trình web thực tế, chúng ta sẽ sử dụng các đơn vị tương đối như em hoặc tỷ lệ phần trăm (%) để có thể dễ dàng tạo ra các thiết kế đáp ứng (responsive) tốt cho các thiết bị có kích thước màn hình khác nhau.
Tham khảo: Khóa học Lập trình Web Full Stack (12 tháng dành cho người chuyển ngành, học sinh tốt nghiệp THPT)
Ok, như vậy là bạn cũng tìm hiểu kha khá về các loại đơn vị trong CSS rồi đó. Chỉ cần bạn hiểu rõ bản chất của chúng, đến khi học phần responsive sẽ dễ dàng hơn nhiều.
Học tiếp: Updating..
Đọc thêm: Thuộc tính Overflow trong CSS