Văn Bản

Nguyễn Đạt

CSS cung cấp đa dạng các thuộc tính giúp chúng ta định kiểu hiển thị cho văn bản của phần tử HTML. Trong bài học này chúng ta sẽ tìm hiểu các thuộc tính sau đây:

  • Thuộc tính color: Quy định màu sắc của văn bản.
  • Thuộc tính text-alignment: Quy định kiểu canh ngang cho văn bản.
  • Thuộc tính text-decoration: Quy định kiểu trang trí như gạch dưới, gạch trên hay gạch ngang cho văn bản.
  • Thuộc tính text-transform: Quy định kiểu chữ in hoa hay in thường cho văn bản.
  • Thuộc tính text-indent: Quy định thụt đầu dòng cho văn bản.
  • Thuộc tính line-height: Quy định độ cao của ký tự trong văn bản.
  • Thuộc tính letter-spacing: Quy định khoảng cách hay độ giãn nở cách giữa các ký tự trong văn bản.
  • Thuộc tính word-spacing: Quy định khoảng cách hay độ giãn nở cách giữa các từ trong văn bản.

Màu Văn Bản

Để quy định màu sắc cho văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính color trong CSS. Giá trị của thuộc tính này có thể là màu theo tên hoặc màu theo giá trị như đề cập ở bài học về màu sắc trong CSS.

Ví dụ:

body {
  color: #000;
}
.red {
    color: rgb(255, 0, 0);
}
.green {
    color: #00ff00;
}
.yellow {
  color: yellow;
}

Chạy Code

Canh Ngang Văn Bản

Để canh ngang văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính text-align trong CSS. Thuộc tính này có thể nhận 1 trong bốn giá trị là left, right, center hoặc justify.

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.justify {
    text-align: justify;
}

Chạy Code

Trang Trí Văn Bản

Để trang trí cho văn bản của phần tử HTML trên trang chúng ta sử dụng thuộc tính text-decoration trong CSS. Thuộc tính này có thể nhận một trong các giá trị underline, line-through, overlinenone.

.none {
    text-decoration: none;
}
.overline {
    text-decoration: overline;
}
.line-through {
    text-decoration: line-through;
}
.underline {
    text-decoration: underline;
}

Chạy Code

Giá trị mặc định của thuộc tính text-decorationnone.

Chuyển Đổi Văn Bản

Để chuyển đổi hiển thị cho các ký tự trong văn bản sang của phần tử HTML trên trang sang dạng in hoa hoặc in thường chúng ta sử dụng thuộc tính text-transform.

.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}

Chạy Code

Giá trị mặc định của thuộc tính text-decorationnone.

Lùi Đầu Dòng

Để lùi đầu dòng cho văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính text-indent trong CSS.

p.text-indent-50 {
    text-indent: 50px;
}

Chạy Code

Giá trị mặc định của thuộc tính text-indent0 hay 0px.

Lưu ý: Khi áp dụng thuộc tính text-indent cho một phần tử nào đó thì chỉ dòng đầu tiên trong văn bản của phần tử này được lùi đầu dòng, các dòng tiếp theo nếu có sẽ hiển thị như mặc định.

Chiều Cao Văn Bản

Để quy định chiều cao cho văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính line-height.

body {
  font-size: 14px;
}
.text-short {
  line-height: 10px;
}
.text-tall {
  line-height: 20px;
}

Chạy Code

Khi không quy định đơn vị cho giá trị của thuộc tính này, CSS sẽ sử dụng đơn vị tương đối là em:

body {
  font-size: 14px;
}
.text-short {
  line-height: 0.5;
}
.text-tall {
  line-height: 2;
}

Chạy Code

Giá trị mặc định của thuộc tính line-heightnormal.

Khoảng Cách Giữa Các Ký Tự

Để quy định khoảng cách giữa các ký tự với nhau trong văn bả của phần tử HTML trên trang, chúng ta sử dụng thuộc tính letter-space.

.normal-letter-spacing {
    letter-spacing: normal;
}
.narrow-letter-spacing {
    letter-spacing: -1px;
}
.wide-letter-spacing {
    letter-spacing: 3px;
}

Chạy Code

Giá trị mặc định của thuộc tính line-spacingnormal.

Khoảng Cách Giữa Các Từ

Để quy định khoảng cách giữa các từ trong văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính word-spacing.

.normal-word-spacing {
    word-spacing: normal;
}
.narrow-word-spacing {
    word-spacing: -5px;
}
.wide-word-spacing {
    word-spacing: 5px;
}

Chạy Code

Giá trị mặc định của thuộc tính word-spacingnormal.

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan