Các thuộc tính định dạng của text

    Hôm nay chúng ta sẽ cùng tìm hiểu về một số thuộc tính định dạng text như màu sắc, hiển thị chữ in hoa hoặc in thường, vị trí hiển thị, ... Những thuộc tính này khá hay và rất quan trọng vì nó quyết định tính thẩm mỹ cho các dòng chữ trong website.

    Trong bài chúng ta tìm hiểu một số thuộc tính định dạng cho text như sau:

        • color: Thiết lập màu
        • text-decoration: Trang trí văn bản.
        • text-transform: Tùy chỉnh việc hiển thị chữ in hoa.
        • text-align: Căn lề văn bản.
        • text-indent: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải.
        • text-shadow: Thêm bóng cho văn bản.

color

    Ta sử dụng thuộc tính color để gán màu sắc cho chữ.
    Trong CSS thì ta sử dụng 3 cách biểu diễn color như sau:

        • HEX: có định dạng #ma_mau
        • RGB: có định dạng rgb(xxx,yyy,zzz)
        • Tên màu: ví dụ red, blue

.color-red{
    color: red;
}
 
.color-blue{
    color: blue;
}
.color-pink{
    color:#d624d0
}

text-decoratio

    Thuộc tính này sẽ giúp bạn trang trí lại văn bản hiển thị trên tài liệu theo một số kiểu nhất định.

text-decoration: overline | underline | line-through| none

        • overline: gạch trên chữ
        • underline: gạch dưới chữ
        • line-through: gạch ngang chữ
        • none: không có gạch gì cả

    Ngoài ra thuộc tính này còn có thêm một số thuộc tính con của nó nhưng lại chưa được hỗ trợ bởi các trình duyệt thông dụng, đó là text-decoration-color, text-decoration-line và text-decoration-style.

text-transform

Nếu bạn muốn tùy chỉnh việc hiển thị chữ in hoa hay in thường trong đoạn văn bản mà không cần viết thủ công cả đoạn văn bản thì có thể sử dụng thuộc tính text-transform này. Thuộc tính này có 3 giá trị chính là capitalize (in hoa chữ cái đầu tiên của mỗi từ), uppercase (in hoa cả đoạn văn bản), lowercase (viết thường cả đoạn văn bản) và none (không có gì cả).

#title { text-transform: uppercase; }

    Có một vấn đề bạn nên lưu ý là ở giá trịcapitalize, nó chỉ có tác dụng với chữ cái đầu tiên của văn bản, còn các chữ cái tiếp theo nó vẫn hiển thị theo cách văn bản mà bạn soạn ra.

text-align

    Thuộc tính text-align này sẽ giúp bạn tùy chỉnh canh lề cho các đoạn văn bản bên trong website. Thuộc tính này hỗ trợ cho bạn các giá trị sau:

text-align: left; // Căn lề văn bản từ bên trái

 
text-align: right; // Căn lề văn bản từ bên phải

 
text-align: center; // Căn lề văn bản từ chính giữa

 
text-align: justify; // Căn lề văn bản đều hai bên

Demo
    Thuộc tính này sẽ tạo ra một khoảng trắng bên trái của văn bản (hoặc bên phải của văn bản với các ngôn ngữ hiển thị từ phải sang trái), giá trị của nó là số kèm theo đơn vị đo lường.

p {
   text-indent: 15px;
   text-indent: 15%;
   text-indent: 1.5pt;
}