Các thuộc tính định dạng văn bản (text) trong CSS, canh lề văn bản, chọn màu chữ, đổi sang kiểu chữ hoa chữ thường, thiết lập chiều cao mỗi hàng cho văn bản, khoảng cách giữa các từ ký tự

Các thuộc tính định dạng văn bản (text) trong CSS, canh lề văn bản, chọn màu chữ, đổi sang kiểu chữ hoa chữ thường, thiết lập chiều cao mỗi hàng cho văn bản, khoảng cách giữa các từ ký tự

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)

Ví dụ

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)
Ví dụ

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
Ví dụ

.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)
Ví dụ

.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.

Ví dụ

.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

Ví dụ

.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

Ví dụ

.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

Ví dụ

div{
    text-indent: 100px;
}

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

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi