Trang trí văn bản

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

Trong CSS, thuộc tính text-decoration dùng để thêm hoặc xóa phần trang trí cho văn bản bên trong một phần tử HTML. Thuộc tính này cho phép bạn gạch chân, gạch trên hoặc gạch ngang văn bản để nhấn mạnh bằng hình ảnh hoặc biểu thị các trạng thái cụ thể.

Các giá trị thường dùng cho text-decoration gồm:

none: Xóa mọi kiểu trang trí văn bản. Đây là giá trị mặc định.

underline: Thêm gạch chân cho văn bản.

overline: Thêm một đường gạch phía trên văn bản.

line-through: Thêm một đường kẻ ngang qua giữa văn bản (gạch ngang).

Ví dụ:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có đoạn văn (<p>) chứa một phần tử liên kết (<a>) và một phần tử khối (<div>). Nhiệm vụ của bạn là dùng thuộc tính text-decoration để tạo kiểu cho các phần tử này. Làm theo các bước dưới đây:

Viết quy tắc CSS áp dụng cho tất cả phần tử <a>. Đặt text-decoration thành none để bỏ gạch chân mặc định.
Thêm thuộc tính class có giá trị "underline" vào phần tử <p>.
Viết quy tắc CSS áp dụng cho tất cả phần tử có lớp underline. Đặt text-decoration thành underline.
Thêm thuộc tính class có giá trị "strike" vào phần tử <div>.
Viết quy tắc CSS áp dụng cho tất cả phần tử có lớp strike. Đặt text-decoration thành line-through.

Tự làm thử

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>