Cỡ chữ

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 19 trên 76.

Trong CSS, thuộc tính (property) font-size dùng để điều chỉnh kích thước văn bản bên trong một phần tử HTML.

Sau đây là một số đơn vị phổ biến dùng để chỉ định kích thước phông chữ:

Pixel (px): Đơn vị tuyệt đối dùng để chỉ định cỡ chữ bằng pixel. Đây là đơn vị đơn giản và phổ biến nhất để đặt cỡ chữ.

Ems (em): Đơn vị tương đối dựa trên cỡ chữ của phần tử cha. Ví dụ, nếu phần tử cha có cỡ chữ là 16px, thì 1em bằng 16px, 2em bằng 32px, v.v.

Rem (rem): Đơn vị tương đối dựa trên cỡ chữ của phần tử gốc (<html>). Đơn vị này giúp văn bản nhất quán hơn trên toàn tài liệu vì không bị ảnh hưởng bởi cỡ chữ của các phần tử cha.

Phần trăm (%): Đơn vị tương đối dựa trên kích thước phông chữ của phần tử cha, tương tự như em. Ví dụ: nếu phần tử cha có kích thước phông chữ là 16px, thì 100% bằng 16px, 150% bằng 24px và cứ thế tiếp tục.

Ví dụ:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Trong ví dụ này, cỡ chữ của tất cả phần tử <p> (đoạn văn) được đặt là 16px, tất cả tiêu đề <h1> được đặt là 2.5em (giá trị này sẽ dựa trên cỡ chữ của phần tử cha), cỡ chữ cơ sở của tài liệu được đặt là 1.4rem, và tất cả phần tử có lớp small-text có cỡ chữ là 80% (giá trị này sẽ dựa trên cỡ chữ của phần tử cha).

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>), đoạn văn (<p>) và phần tử division (<div>). Nhiệm vụ của bạn là dùng thuộc tính font-size để tạo kiểu cho các phần tử này. Làm theo các bước sau:

Viết một quy tắc CSS nhắm đến phần tử <h1>. Đặt font-size thành 32px.
Viết một quy tắc CSS nhắm đến phần tử <p>. Đặt font-size thành 1.2em.
Viết một quy tắc CSS nhắm đến phần tử <div>. Đặt font-size thành 120%.

Tự làm thử

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>