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
• direction
• letter-spacing
• text-align
• text-decoration
• text-indent
• text-transform
• white-space
• word-spacing

Thuộc tính color

Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Giá trị của thuộc tính color:

- Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ).

VD: color: #ff0000;

- Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue).

VD: color: rgb(255,0,0);  /*chuỗi giá trị từ 0 tới 255*/

- Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh.

VD: color: red;

Thuộc tính direction

Thuộc tính direction dùng để định hướng chữ.

Giá trị của thuộc tinh direction:

- ltr: từ trái qua phải

- rtl: từ phải qua trái

VD: direction: ltr;

Thuộc tính letter-spacing

Thuộc tính letter-spacing dùng để thiết lập khoảng cách giữa các ký tự.

Giá trị của thuộc tính letter-spacing:

- normal: mặc định

- length: là 1 giá trị số cụ thể.

VD: letter-spacing: 5px;

Thuộc tính text-align

Thuộc tính text-align dùng để canh lề cho văn bản.

Giá trị của thuộc tính text-align:

- left: mặc định, canh lề trái.

- right: canh lề phải.

- center: canh lề giữa.

- justify: canh lề 2 bên.

VD: text-align: right;

Thuộc tính text-decoration

Thuộc tính text-decoration được dùng xác định thành phần có gạch dưới hay không.

Các giá trị chính cho thuộc tính text-decoration gồm: blink, line-through, overline, underline, none.

VD:

.gach-chan{
    text-decoration: underline;
    text-decoration-color: #28a4c9;
}

Thuộc tính text-indent

Thuộc tính text-indent được dùng để thụt dòng đầu tiên của đoạn văn bản từ bên trái vào theo một giá trị cụ thể tính bằng pixels.

Các giá trị chính cho thuộc tính text-indent gồm: % hoặc length.

VD:

p {
    text-indent: 50px;
}

Thuộc tính text-transform

Thuộc tính text-transform được dùng để hiển thị in hoa hoặc luôn luôn hiển thị in thường mặc dù ta nhập vào là hoa hay thường.

Các giá trị chính cho thuộc tính text-transform gồm:

• uppercase: chuyển đổi in hoa
• lowercase: chuyển đổi in thường
• none: không chuyển đổi gì cả (mặc định)

VD:

.upper{
    text-transform: uppercase;
}
 
.lower{
    text-transform: lowercase;
}

Thuộc tính white-space

Thuộc tính white-space trong CSS được sử dụng để chỉ dẫn trình duyệt xử lý các khoảng trắng trong một phần tử.

Cú pháp: white-space: normal|nowrap|pre|pre-line|pre-wrap;

Các giá trị chính cho thuộc tính white-space gồm:

• normal: dãy khoảng trắng bên trong phần tử sẽ bị chuyển đổi thành một khoảng trắng duy nhất
• pre: tất cả khoảng trắng trong phần tử sẽ được cho phép giữ nguyên, cho dù đó là dãy các khoảng trắng
• nowrap: dãy khoảng trắng bên trong phần tử sẽ bị chuyển đổi thành một khoảng trắng duy nhất, nhưng khoảng cách giữa các từ sẽ được giữ nguyên
• pre-line: văn bản sẽ tự động bao lại và sẽ xuống dòng khi nó cảm thấy hợp lý.
• pre-wrap: khoảng trắng trong văn bản lúc này sẽ do trình duyệt tự động điều chỉnh, và nó sẽ tự động xuống hàng khi cần thiết.

VD:

p {
    width: 300px;
    padding: 10px;
    background-color: orange;
    white-space: normal;
}

Thuộc tính word-spacing

Thuộc tính word-spacing trong CSS giúp bạn xác định khoảng cách giữa các từ trong một đoạn văn.

Các giá trị chính cho thuộc tính word-spacing gồm:

• normal: khoảng cách giữa các từ trong một câu văn không bị thay đổi. Giá trị này tương đương với giá trị 0 nếu bạn xác định bằng đơn vị độ dài.
• length: thêm khoảng cách giữa các từ. Với giá trị đo độ dài càng lớn thì khoảng cách giữa các từ trong đoạn văn sẽ càng tăng

VD:

p {
    word-spacing: 20px;
}