Trang trí văn bản css: không có

Đâ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 được sử dụng lại 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

• text-align: left; // Căn lề văn bản từ bên trái
  text-align: right; // Căn lề văn bản từ bên phải
  text-align: center; // Căn lề văn bản từ chính giữa
  text-align: justify; // Căn lề văn bản đều hai bên
  

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

• text-decoration: overline | underline | line-through| none

  0. Trang trí văn bản

• text-decoration: overline | underline | line-through| none

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

• text-decoration: overline | underline | line-through| none

  0. Add shadow for text

• text-decoration: overline | underline | line-through| none

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

text-align: left; // Căn lề văn bản từ bên trái
text-align: right; // Căn lề văn bản từ bên phải
text-align: center; // Căn lề văn bản từ chính giữa
text-align: justify; // Căn lề văn bản đều hai bên

9 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

text-align: left; // Căn lề văn bản từ bên trái

  


text-align: right; // Căn lề văn bản từ bên phải
text-align: center; // Căn lề văn bản từ chính giữa
text-align: justify; // Căn lề văn bản đều hai bên

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

text-align: left; // Căn lề văn bản từ bên trái
text-align: right; // Căn lề văn bản từ bên phải
text-align: center; // Căn lề văn bản từ chính giữa
text-align: justify; // Căn lề văn bản đều hai bên

9 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

text-decoration: overline | underline | line-through| none

• text-decoration: overline | underline | line-through| none

  4. gạch trên chữ

• text-decoration: overline | underline | line-through| none

  5. gạch dưới chữ

• text-decoration: overline | underline | line-through| none

  6. gạch ngang chữ

• text-decoration: overline | underline | line-through| none

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

________số 8

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

text-shadow: [màu sắc] [tọa độ x y] [độ mờ];

Trong đó, ghế

text-decoration: overline | underline | line-through| none

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

text-decoration: overline | underline | line-through| none

9 và số đứng sau là

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

0, độ 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 học vị

Ví dụ

text-decoration: overline | underline | line-through| none

3

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

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

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

text-decoration: overline | underline | line-through| none

9 là

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

3, tọa độ

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

0 là

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

5 và

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

6 là

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

7

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ụ:

text-align: left; // Căn lề văn bản từ bên trái
text-align: right; // Căn lề văn bản từ bên phải
text-align: center; // Căn lề văn bản từ chính giữa
text-align: justify; // Căn lề văn bản đều hai bên

1

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

text-decoration: overline | underline | line-through| none

1 này

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

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

9 [trong hoa chữ cái đầu tiên của mỗi từ],

text-shadow: [màu sắc] [tọa độ x y] [độ mờ];

0 [trong hoa cả đoạn văn bản],

text-shadow: [màu sắc] [tọa độ x y] [độ mờ];

1 [viết thường cả đoạn văn] và

text-decoration: overline | underline | line-through| none

7 [không có gì cả]

Ví dụ

text-align: left; // Căn lề văn bản từ bên trái
text-align: right; // Căn lề văn bản từ bên phải
text-align: center; // Căn lề văn bản từ chính giữa
text-align: justify; // Căn lề văn bản đều hai bên

7

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ị

p {

   text-indent: 15px;

   text-indent: 15%;

   text-indent: 1.5pt;

}

9, 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é