Văn Bản

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;  }

Thuộc Tính color trong CSS

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;  }

Thuộc Tính text-align trong CSS

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, overline và none.

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

Thuộc Tính "text-decoration" trong CSS

Giá trị mặc định của thuộc tính text-decoration là none.

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;  }

Thuộc Tính "text-transform" trong CSS

Giá trị mặc định của thuộc tính text-decoration là none.

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;  }

Thuộc Tính "text-indent" trong CSS

Giá trị mặc định của thuộc tính text-indent là 0 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;  }

Thuộc Tính "line-height" trong CSS

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;  }

Thuộc Tính "line-height" Không Sử Dụng Đơn Vị

Giá trị mặc định của thuộc tính line-height là normal.

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;  }

Thuộc Tính "letter-space"

Giá trị mặc định của thuộc tính line-spacing là normal.

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;  }

Thuộc Tính "word-spacing"

Giá trị mặc định của thuộc tính word-spacing là normal.