Nhóm thuộc tính định dạng văn bản - Text

CSS có rất nhiều thuộc tính giúp thay đổi định dạng văn bản theo ý muốn của mình.

Thuộc tính color

Thuộc tính color nhằm chỉ định màu của văn bản. Giá trị của thuộc tính này có thể là tên màu, mã màu HEX, GRB,...

Cú pháp

element{
    color: red;
}

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Học lập trình web</title>
  <style>
    p{
      color: green;
    }
  </style>
</head>
<body>
  <p>Thẻ đổi màu chữ bằng thuộc tính color</p>
</body>
</html>

Thuộc tính text-align

Thuộc tính text-align chỉ định căn lề theo chiều ngang của văn bản như left (trái), phải (right), center (giữa), justify (căn đều hai bên). Mặc định văn bản sẽ căn lề trái.

Cú pháp

element {
    text-align: value; 
    // value có các giá trị như left, center, right, justify
}

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Học lập trình web</title>
  <style>
    #left{
      text-align: left;
    }
    #right{
      text-align: right;
    }
    #center{
      text-align: center;
    }
    #justify{
      text-align: justify;
    }
  </style>
</head>
<body>
  <p id="left">Căn chỉnh lề bên trái (Mặc định)</p>
  <p id="right">Căn chỉnh lề bên phải</p>
  <p id="center">Căn chỉnh lề giữa</p>
  <p id="justify">CĂN ĐỀU HAI LỀ - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum atque tempore neque nesciunt accusantium reiciendis nulla, veniam doloribus. Possimus tempore maxime dolores fugiat velit, quod dignissimos praesentium sit quas libero? Esse tempore doloremque cupiditate saepe nemo obcaecati quod nobis voluptas sequi quasi. Facere veniam, corrupti ullam in ducimus laboriosam amet ea? A officiis debitis iste harum voluptatem sed, est exercitationem sint reiciendis officia fuga recusandae, omnis soluta aliquam nulla veritatis. Quisquam provident optio labore aliquam pariatur ipsum et modi iure. Optio ut mollitia reiciendis? Ea exercitationem asperiores excepturi quidem? Fugit obcaecati minus eligendi sapiente ea, reiciendis quidem nobis distinctio dolorem!</p>
</body>
</html>

Thuộc tính text-indent

Thuộc tính text-indent chỉ định cho phép tạo ra khoảng thụt đầu dòng của đoạn văn bản.

Cú pháp

element {
    text-indent: value;
    // value là giá trị khoảng cách bạn muốn thụt vào
}

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Học lập trình web</title>
  <style>
    #text-indent{
      text-indent: 100px;
    }
  </style>
</head>
<body>
  <p id="text-indent">Thụt vào đầu dòng 1 khoảng trắng</p>
</body>
</html>

Thuộc tính text-decoration

Thuộc tính text-decoration chỉ định trang trí thêm cho đoạn văn bản. Là thuộc tính viết tắt của các thuộc tính sau đây:

  • text-decoration-line (bắt buộc): Loại đường

  • text-decoration-color: Màu sắc

  • text-decoration-style: Kiểu đường

Một số giá trị của các thuộc tính

  • text-decoration-line (bắt buộc): underline (gạch chân văn bản), overline (gạch đầu văn bản), line-through (gạch ngang văn bản), none (mặc định - không hiển thị)

  • text-decoration-color: mã màu hoặc tên màu

  • text-decoration-style: solid (đường đơn), double (đường đôi), dotted (dạng đường chấm), dashed (đường nét đứt), wavy (đường dạng sóng)

Cách viết ngắn gọn 3 thuộc tính trên bằng text-decoration

element {
    text-decoration: loại đường<space>màu sắc<space>kiểu dạng đường;
}

Ví dụ

p{
    text-decoration: underline red dashed;
}

Tổng hợp ví dụ phần thuộc tính định dạng văn bản

PreviousThuộc tính định dạng nền - BackgroundNextThuộc tính định dạng font