Hướng dẫn Cách sử dụng các thuộc tính trang trí cho Text (văn bản)

[PVS]

Cách sử dụng các thuộc tính trang trí cho Text (văn bản)

Đây là bài mở đầu cho 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 nắm. Một trong các loại thuộc tính đơn giản nhất nhưng lại dùng nhiều nhất là các thuộc tính được dùng để thay đổi cách hiển thị của văn bản, được gọi là Text Styles.

Text Styles trong CSS hiện tại 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 dùng sau:

• text-align: Căn lề văn bản.
• text-decoration: Trang trí văn bản.
• text-indent: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải.
• text-shadow: Thêm bóng cho văn bản.
• text-transform: Tùy chỉnh việc hiển thị chữ in hoa.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Text-align
Thuộc tính text-align 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 website. 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ụ sự khác nhau của các giá trị text-align tại đây.

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

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

• overline: gạch trên chữ
• underline: gạch dưới chữ
• line-through: gạch ngang chữ
• none: không có gạch gì cả

Ví dụ:
HTML:

<p id="underline">Đây là kiểu underline</p>
<p id="overline">Đây là kiểu overline</p>
<p id="line-through">Đây là kiểu line-through</p>
<p id="mix">Sử dụng cùng lúc nhiều kiểu</p>

CSS:

p {
  font-size: 32px;
}
#underline { text-decoration: underline }
#overline { text-decoration: overline }
#line-through { text-decoration: line-through }
#mix {
  text-decoration: underline overline line-through;
}

Kết quả:

​

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 chưa được hỗ trợ bởi các trình duyệt thông dụng, đó là text-decoration-color, text-decoration-line và text-decoration-style.

Text-indent
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ừ phải sang trái), giá trị của nó là số kèm theo đơn vị đo lường.

Ví dụ:

p {
   text-indent: 15px;
   text-indent: 15%;
   text-indent: 1.5pt;
}

Ví dụ thực tế:
HTML:

<div id="text">
  <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>

CSS:

#text {
  background: blue;
  width: 500px;
  color: white;
 
}
#text p {
  text-indent: 15%;
  text-overflow: clip;
  overfow: hidden;
  white-space: nowrap;
}

Kết quả:

​

Text-shadow
Thuộc tính này để thêm bóng đổ cho văn bản nếu bạn thích sự bóng bẩy.

Cách viết như sau:

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

Trong đó, tọa độ x-y là giá trị kiểu đo lường và số đứng trước được xem là x và đứng sau là y, độ 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 tọa độ.

Ví dụ:

#title {
   text-shadow: blue 2px 3px 4px;
}

Đoạn trên nghĩa là văn bản mang id #title sẽ có bóng đổ màu xanh, tọa độ x là 2px, tọa độ y là 3px và độ mờ là 4px.

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 đoạn cú pháp và mỗi đoạn sẽ được cách nhau bằng dấu phẩy, ví dụ:

text-shadow: red 2px -1px 3px, blue -2px 1px 2px;

Ví dụ thực tế:
HTML:

<h1 id="title">Đây là tiêu đề</h1>
<h1 id="multi-shadow">Tiêu đề có nhiều bóng đổ</h1>

CSS:

#title {
  text-shadow: blue 2px 3px 4px;
  color: white;
}
#multi-shadow {
  text-shadow: red 2px -1px 3px, blue -2px 1px 2px;
  color: white;
}

Kết quả:

​

Text-transform
Nếu bạn muốn tùy chỉnh việc hiển thị chữ in hoa hay in 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-transform này.

Thuộc tính này có 3 giá trị chính là capitalize (in hoa chữ cái đầu tiên của mỗi từ), uppercase (in hoa cả đoạn văn bản), lowercase (viết thường cả đoạn văn bản) và none (không có gì cả).

Ví dụ:

#title { text-transform: uppercase; }

Ví dụ thực tế:
HTML:

<h1 id="uppercase">cộng đồng xenforo việt nam</h1>
<h1 id="lowercase">Cộng Đồng Xenforo Việt Nam</h1>
<h1 id="capitalize">cộng đồng xenforo việt nam</h1>

CSS:

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

Kết quả:

​

Có một vấn đề bạn nên lưu ý là ở giá trịcapitalize, 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 việc trang trí văn bản không chỉ có bấy nhiêu nhưng các thuộc tính mình không đề cập tới hiện tại ít sử dụng hoặc không tương thích với đa số các trình duyệt hiện nay. Nhưng mình tin là chỉ bấy nhiêu thôi cũng đủ để bạn trang trí văn bản rất đẹp mắt rồi.

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

Chúc các bạn thành công.

Nguồn: thachpham.com​