Thụt lề văn bản trong css

Lưu ý. Tuân theo tiêu chuẩn W3C, nếu bạn xác định màu thuộc tính, bạn cũng phải xác định thuộc tính

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

2

---

Căn chỉnh văn bản (text-align)

Thuộc tính

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

3được sử dụng để căn chỉnh văn bản theo chiều ngang

1 văn bản có thể được căn chỉnh sang trái (trái) hoặc phải (phải), giữa (giữa) hoặc căn đều 2 bên ( justify).

Ví dụ sau đây để thấy các văn bản được căn lề giữa, căn lề trái và phải. (căn lề trái mặc định hướng văn bản từ trái sang phải và căn lề phải mặc định hướng văn bản từ phải sang trái)

Ví dụ

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

Khi thuộc tính_______03 được thiết lập là “justify”, mỗi dòng được kéo dài sao cho chiều rộng bằng nhau và lề trái và phải thẳng (như trên tạp chí và báo cáo)

ví dụ

div {
text-align: justify;
}

---

Trang trí văn bản (text-decoration)

Thuộc tính

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

5 được sử dụng để thiết lập hoặc loại bỏ trang trí khỏi văn bản

Giá trị

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

6 thường được sử dụng để xóa gạch chân khỏi các liên kết

Ví dụ

a {
text-decoration: none;
}

1 vài giá trị

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

5 khác được sử dụng để trang trí văn bản

Ví dụ

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

Chú thích. Không nên gạch chân văn bản không phải là một liên kết, vì điều này thường gây nhầm lẫn cho người đọc

---

Chuyển đổi văn bản (text-transform)

Thuộc tính

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

8 property được sử dụng để xác định chữ hoa và chữ thường trong một văn bản

Nó có thể được sử dụng để biến mọi thứ thành chữ trong hoa hoặc chữ thường hoặc viết hoa chữ cái đầu tiên của mỗi từ

Đây là bài mở đầu cho hàng loạt bài viết tìm hiểu về các thuộc tính quan trọng trong CSS mà bạn cần ôm. Một trong các loại thuộc tính đơn giản nhất nhưng lại được sử dụng nhiều nhất là các thuộc tính được sử dụng để thay đổi cách hiển thị của văn bản, được gọi là Kiểu văn bản

Text Styles in CSS hiện có khoảng 13 thuộc tính được sử dụng bao gồm căn lề văn bản, trang trí văn bản, định hướng văn bản,…. Cụ thể là có các thuộc tính thông thường được sử dụng sau

• 
  div {
  text-align: justify;
  }
  

  0. Căn lề văn bản

• 
  div {
  text-align: justify;
  }
  

  1. Trang trí văn bản

• 
  div {
  text-align: justify;
  }
  

  2. Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải

• 
  h1 {
  text-align: center;
  }
  h2 {
  text-align: left;
  }
  h3 {
  text-align: right;
  }
  

  10. Add shadow for text

• 
  h1 {
  text-align: center;
  }
  h2 {
  text-align: left;
  }
  h3 {
  text-align: right;
  }
  

  11. Tùy chỉnh công việc hiển thị chữ trong hoa

Tham khảo. https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/Tham khảo

căn chỉnh văn bản

Thuộc tính

div {
text-align: justify;
}

0 này sẽ giúp bạn tùy chỉnh canh lề cho các đoạn văn bản bên trong trang web. Thuộc tính này hỗ trợ cho bạn các giá trị sau

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

3

Xem ví dụ về sự khác nhau của các giá trị

div {
text-align: justify;
}

0 tại đây

trang trí văn bản

Thuộc tính này sẽ giúp bạn trang trí lại văn bản được hiển thị trên tài liệu theo một số định dạng nhất định

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

1

• 
  h1 {
  text-align: center;
  }
  h2 {
  text-align: left;
  }
  h3 {
  text-align: right;
  }
  

  14. gạch trên chữ

• 
  h1 {
  text-align: center;
  }
  h2 {
  text-align: left;
  }
  h3 {
  text-align: right;
  }
  

  15. gạch dưới chữ

• 
  h1 {
  text-align: center;
  }
  h2 {
  text-align: left;
  }
  h3 {
  text-align: right;
  }
  

  16. gạch ngang chữ

• 
  h1 {
  text-align: center;
  }
  h2 {
  text-align: left;
  }
  h3 {
  text-align: right;
  }
  

  17. không có gạch đá gì cả

Ví dụ

Xem Pen myZyJX của Thạch Phạm (@thachpham92) trên CodePen

Ngoài ra thuộc tính này còn có thêm một số thuộc tính con của nó nhưng lại không được hỗ trợ bởi các trình duyệt thông tin, đó là text-decoration-color, text-decoration-line và text-decoration-style

thụt lề văn bản

Thuộc tính này sẽ tạo ra một khoảng trắng bên trái của văn bản (hoặc bên phải của văn bản với các ngôn ngữ hiển thị từ bên phải sang trái), giá trị của nó là một số kèm theo đơn vị đo lường

Ví dụ

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

9

Xem Pen PwrwPB của Thạch Phạm (@thachpham92) trên CodePen

bóng văn bản

Thuộc tính này để thêm bóng đổ cho văn bản nếu bạn thích bóng tối hơn

Cách viết như sau

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

0

Trong đó, ghế

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

18 là giá trị kiểu đo lường và số đứng trước được xem là

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

19 và số đứng sau là

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

90, độ mờ nếu không khai báo thì có giá trị là 0 và giá trị của độ mờ luôn đứng sau giá trị của ngôi

Ví dụ

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

4

Đoạn trên nghĩa là văn bản mang id

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

91 sẽ có bóng đổ màu xanh, tọa độ

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

19 là

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

93, tọa độ

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

90 là

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

95 và

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

96 là

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

97

Ngoài ra, bạn cũng có thể tạo ra nhiều bóng đổ cho một văn bản bằng cách viết nhiều cú pháp và mỗi đoạn sẽ cách nhau bằng dấu phẩy, ví dụ:

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

2

Ví dụ thực tế

Xem Pen GgbgZd của Thạch Phạm (@thachpham92) trên CodePen

chuyển đổi văn bản

Nếu bạn muốn tùy chỉnh việc hiển thị chữ hoa hay thông thường trong đoạn văn bản mà không cần viết thủ công cả đoạn văn bản thì có thể sử dụng thuộc tính

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

11 này

Thuộc tính này có 3 giá trị chính là

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

99 (trong hoa chữ cái đầu tiên của mỗi từ),

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

00 (trong hoa cả đoạn văn bản),

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

01 (viết thường cả đoạn văn) và

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

17 (không có gì cả)

Ví dụ

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

8

Xem Bút wBLBWR của Thạch Phạm (@thachpham92) trên CodePen

Có một vấn đề bạn nên lưu ý là ở giá trị

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

99, nó chỉ có tác dụng với chữ cái đầu tiên của văn bản, còn các chữ cái tiếp theo nó vẫn hiển thị theo cách văn bản mà bạn soạn ra.

Lời kết

Mặc dù các thuộc tính dành cho công việc trang trí văn bản không chỉ có nhiều ít nhưng các thuộc tính của mình không đề cập đến việc ít sử dụng hoặc không tương thích với số lượng lớn các trình duyệt hiện nay. Nhưng mình tin chỉ là sánh ít thôi cũng đủ để bạn trang trí văn bản cực đẹp mắt rồi. . D

Ở bài sau, mình sẽ nói qua về các thuộc tính được sử dụng để trang trí chữ viết để các bạn làm văn bản của mình thêm “sức sống” nhé