Các thuộc tính định dạng VĂN BẢN (TEXT) trong CSS

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu một số thuộc tính định dạng văn bản như:

• color (chọn màu cho văn bản)
• text-decoration (gạch ngang văn bản, gạch đầu, gạch đít)
• text-align (canh lề văn bản)
• text-transform (chuyển đổi kiểu chữ cho văn bản. Ví dụ, chuyển sang kiểu chữ hoa hoặc chữ thường)
• line-height (Thiết lập chiều cao mỗi hàng của văn bản)
• word-spacing (Thiết lập khoảng cách giữa các từ của văn bản)
• letter-spacing (Thiết lập khoảng cách giữa các ký tự của văn bản)
• text-indent (Thụt đầu dòng văn bản)

Chọn màu cho văn bản

Thuộc tính color dùng để chọn màu cho văn bản. Cú pháp:

color: màu sắc;

Trong đó, "màu sắc" có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX

(Nếu chưa rõ cách xác định màu, bạn có thể xem lại bài Màu sắc trong CSS)

body{
    color: red;
}
h1{
    color: rgb(179, 100, 21);
}
h2{
    color: #ee77ff;
}

Gạch ngang văn bản

Thuộc tính text-decoration dùng để tạo một đường gạch ngang cho văn bản. Cú pháp

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

Trong đó:

• overline: tạo đường gạch ngang ở trên đầu văn bản
• line-through: tạo đường gạch ngang ở giữa văn bản
• underline: tạo đường gạch ngang ở dưới đít văn bản
• none: loại bỏ đường gạch ngang (thường dùng để loại bỏ đường gạch ngang dưới đít của liên kết)

h1{
    text-decoration: overline;
}
h2{
    text-decoration: line-through;
}
h3{
    text-decoration: underline;
}
.lienket{
    text-decoration: none;
}

Canh lề cho văn bản

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

text-align: left|center|right|justify;

Trong đó:

• left: canh cho văn bản nằm bên trái (mặc định)
• center: canh cho văn bản nằm ở giữa
• right: canh cho văn bản nằm bên phải
• justify: canh đều hai mép trái phải

.div2{
    text-align: center;
}
.div3{
    text-align: right;
}
.div4{
    text-align: justify;
}

Chuyển đổi kiểu chữ của văn bản

Thuộc tính text-transform dùng để chuyển đổi kiểu chữ của văn bản (Ví dụ: chuyển toàn bộ văn bản sang kiểu chữ hoa hoặc chữ thường). Cú pháp:

text-transform: uppercase|lowercase|capitalize;

Trong đó:

• uppercase: chuyển toàn bộ văn bản sang kiểu chữ hoa
• lowercase: chuyển toàn bộ văn bản sang kiểu chữ thường
• capitalize: chuyển ký tự đầu tiên của mỗi từ sang kiểu chữ hoa (các ký tự còn lại được giữ nguyên định dạng ban đầu)

.div1{
    text-transform: uppercase;
}
.div2{
    text-transform: lowercase;
}
.div3{
    text-transform: capitalize;
}

Thiết lập chiều cao mỗi hàng của văn bản

Thuộc tính line-height dùng để thiết lập chiều cao mỗi hàng của văn bản.

.div1{
    line-height: 0.9;
}
.div2{
    line-height: 2;
}

Thiết lập khoảng cách giữa các từ của văn bản

Thuộc tính word-spacing dùng để thiết lập khoảng cách giữa các từ của văn bản

.div1{
    word-spacing: -2px;
}
.div2{
    word-spacing: 20px;
}

Thiết lập khoảng cách giữa các ký tự của văn bản

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

.div1{
    letter-spacing: -2px;
}
.div2{
    letter-spacing: 20px;
}

Thụt đầu dòng

Thuộc tính text-indent dùng để thụt đầu dòng cho văn bản

div{
    text-indent: 100px;
}