Các thuộc tính dùng để định dạng cho văn bản - 17

Các thuộc tính dùng để định dạng cho văn bản – 17

– Dưới đây là danh sách những thuộc tính được dùng để định dạng cho văn bản.

color: Chỉnh màu sắc của văn bản.
word-spacing: Thiết lập khoảng cách nằm giữa mỗi hai từ (word)
word-break: Tùy chỉnh cách thức ngắt xuống dòng của một từ (word) trong trường hợp khoảng trống của hàng hiện tại không đủ để chứa hết nó.
text-align: Canh lề (theo chiều ngang) cho văn bản.
text-align-last: Canh lề (theo chiều ngang) cho dòng chữ cuối cùng của đoạn văn bản.
text-indent: Thiết lập khoảng cách thụt đầu dòng của dòng chữ đầu tiên
text-overflow: Tùy chỉnh cách thức hiển thị của phần văn bản bị tràn ra khỏi phần tử.
text-shadow: Tạo cái bóng cho văn bản.
text-transform: Chuyển đổi văn bản sang dạng chữ in hoa hoặc chữ thường.
text-decoration-line, text-decoration-style, text-decoration-color, text-decoration: Chức năng của nhóm thuộc tính text-decoration là dùng để thiết lập một cái đường kẻ lên văn bản, trong đó:

Thuộc tính text-decoration-line dùng để xác định vị trí của đường kẻ.
Thuộc tính text-decoration-style dùng để xác định kiểu của đường kẻ.
Thuộc tính text-decoration-color dùng để xác định màu của đường kẻ.

font-family: Chỉnh phông chữ cho văn bản
font-size: Chỉnh kích cỡ chữ của văn bản.
font-style: Chuyển đổi văn bản sang dạng chữ in nghiêng hay không in nghiêng.
font-weight: Chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm.
letter-spacing: Thiết lập khoảng cách nằm giữa mỗi hai ký tự.
white-space: Tùy chỉnh việc các dấu khoảng trắng dư thừa & ngắt xuống dòng sẽ bị loại bỏ hay được giữ lại (khi chúng hiển thị lên màn hình)
line-height: Thiết lập chiều cao của dòng chữ.
vertical-align: Canh lề (theo chiều dọc) cho văn bản.
writing-mode: Tùy chỉnh chế độ viết văn bản theo chiều ngang hoặc chiều dọc.
user-select: Tùy chỉnh việc có cho phép người dùng bôi đen văn bản hay khô

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        .text1 span{
            text-decoration-line:overline;
        }
        .text2 span{
            text-decoration-line:line-through;
        }
        .text3 span{
            text-decoration-line:underline;
        }
        a{
            text-decoration-line:none;
        }
    </style>
</head>
<body>
    <p class="text1">Học <span>LẬP TRÌNH WEB</span> miễn phí.</p>
    <p class="text2">Học <span>LẬP TRÌNH WEB</span> miễn phí.</p>
    <p class="text3">Học <span>LẬP TRÌNH WEB</span> miễn phí.</p>
    <a href="default.html">Học LẬP TRÌNH WEB miễn phí.</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        p{
            text-decoration-line: underline;
        }
    </style>
</head>
<body>
    <p style="text-decoration-style:solid">1 2 3 4 5 6 7 8 9</p>
    <p style="text-decoration-style:dashed">1 2 3 4 5 6 7 8 9</p>
    <p style="text-decoration-style:double">1 2 3 4 5 6 7 8 9</p>
    <p style="text-decoration-style:dotted">1 2 3 4 5 6 7 8 9</p>
    <p style="text-decoration-style:wavy">1 2 3 4 5 6 7 8 9</p>
</body>
</html>