btvn.vn
Tìm kiếm Đăng nhập

Cỡ chữ và đơn vị tương đối

Lưu trên thiết bị này
Định dạng văn bản và kế thừa CSS · Chọn bài khác

Đọc đơn vị cùng với giá trị

font-size đặt cỡ chữ. Các đơn vị độ dài tuyệt đối trong CSS có px, pt, in, cm và mm. Chúng là đơn vị của cách trình bày CSS; không dùng một con số px để cam kết kích thước vật lí chính xác trên mọi màn hình. | Cách đặt font-size | Mốc tính trong các ví dụ | |---|---| | 20px |Cỡ 20 pixel CSS| | 1.2em |1,2 lần cỡ chữ của phần tử cha| | 1.5rem |1,5 lần cỡ chữ của phần tử gốc html| | 125% |125% cỡ chữ của phần tử cha| Còn có ex liên quan đến chiều cao chữ x của phông và các từ khóa cỡ như small, medium, large. Kích thước nhìn thấy tùy phông và thiết lập trình duyệt; các bài tính dưới đây cho rõ mốc số.

Cỡ p theo cha, cỡ span theo gốc

```css html { font-size: 16px; } body { font-size: 20px; } p { font-size: 1.2em; } span { font-size: 1.5rem; } ``` Giả sử p là con của body và span nằm trong p. Cỡ body là 20px, nên p có cỡ 1,2 × 20 = **24px**. Phần tử gốc html có cỡ 16px, nên span có cỡ 1,5 × 16 = **24px**, dù cha trực tiếp của span là p. Nếu thay font-size của p bằng 125%, mốc vẫn là body 20px và kết quả là 1,25 × 20 = 25px. Phải xác định đúng cha hoặc gốc trước khi nhân.

em dùng ở thuộc tính khác có mốc khác

Khi em dùng cho font-size, ta tính theo cỡ chữ của cha. Khi em dùng trong text-indent hoặc line-height, nó dựa vào cỡ chữ của chính phần tử đang định dạng. Ví dụ p có font-size: 20px và text-indent: 2em thì độ thụt là 40px. Đây không phải cam kết bằng chiều rộng đúng hai kí tự trong mọi phông. Với cỡ khác 0 trong các ví dụ số đang học, ghi đơn vị phù hợp, như font-size:18px;. Không bỏ đơn vị thành font-size:18; rồi mặc định đó là 18px.

Bài luyện

Cha có cỡ 20px, p đặt font-size:1.2em. Cỡ p là bao nhiêu?
Chọn một đáp án

Bài luyện

html 16px, cha trực tiếp 20px, con đặt font-size:1.5rem. Cỡ con là bao nhiêu?
Chọn một đáp án

Bài luyện

Cha 20px, con đặt font-size:125%. Cỡ con là bao nhiêu?
Chọn một đáp án

Bài luyện

Muốn đặt cỡ 18 pixel CSS, khai báo nào đúng trong các lựa chọn?
Chọn một đáp án

Đang học