HTML/CSS | Làm việc với font chữ #2

Học HTML, CSS từ Zero Tới Hero

• Thuộc tính letter-spacing
• Thuộc tính text-align
• Thuộc tính text-decoration
• Thuộc tính text-indent
• Thuộc tính text-transform

Thuộc tính letter-spacing

Thuộc tính letter-spacing được sử dụng để điều chỉnh khoảng cách giữa các ký tự.

Ví dụ:

<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: 2px;
}

h3 {
  letter-spacing: -2px;
}
</style>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

This is heading 1

This is heading 2

This is heading 3

Giá trị càng lớn khoảng cách giữa các ký tự càng xa nhau.

Thuộc tính text-align

Mặc định, nội dung đã được căn trái. Trong CSS, thuộc tính text-align dùng để căn chỉnh nội dung theo các hướng như: trái, phải, căn giữa, v.v.

Thuộc tính text-align bao gồm 4 giá trị:

• left căn trái
• right căn phải
• center căn giữa
• justify dàn đều hai bên

Ví dụ:

<style>
.center-text {
  text-align: center;
}

.right-text {
  text-align: right;
}

.justify-text {
  text-align: justify;
}
</style>

<h1 class="center-text">Căn giữa</h1>
<h3 class="right-text">Căn phải</h3>
<p class="justify-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.</p>

Căn giữa

Căn phải

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.Sed dapibus ipsum in enim rhoncus, eu tincidunt ipsum ullamcorper.

Thuộc tính text-align căn nội dung chữ theo độ rộng của thẻ. Trong trường hợp sử dụng text-align cho các thẻ inline, bạn sẽ thấy không hoạt động vì độ rộng thẻ inline chỉ bằng nội dung mà nó chứa.

Để căn được nội dung của các thẻ inline, cần set cho thẻ đó có display: block.

Khi sử dụng text-align cho thẻ cha, các thẻ con là thẻ inline hoặc inline-block ở bên trong cũng sẽ được căn theo.

Thuộc tính text-decoration

Trong CSS, text-decoration được sử dụng để thêm gạch chân chữ hoặc bỏ gạch chân chữ.

Bao gồm các giá trị:

• line-through gạch ngang nội dung
• overline gạch dưới nội dung
• underline gạch bên trên nội dung
• none để bỏ gạch chân chữ

<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
</style>

<h1>Gạch bên trên nội dung</h1>
<h2>Gạch xuyên qua nội dung</h2>
<h3>Gạch dưới nội dung</h3>

Gạch bên trên nội dung

Gạch xuyên qua nội dung

Gạch dưới nội dung

Gạch trên và dưới nội dung

Có thể sử dụng cùng lúc nhiều giá trị, hãy thêm cùng lúc 2-3 giá trị để trải nghiệm tại Code Snippet.

Ngoài ra, bạn hoàn toàn có thể tùy chỉnh kiểu dáng, màu sắc hay độ dày của đường gạch, tương tự như thuộc tính border.

Cùng xem ví dụ:

<style>
h1 {
  text-decoration: underline 10px green ;
}

</style>

<h1>Decoration</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam aliquam dolorum deserunt, quasi perferendis recusandae, sed modi corporis iure itaque voluptatem. Recusandae sit deserunt, tempora qui vitae suscipit veniam optio?</p>

Decoration

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam aliquam dolorum deserunt, quasi perferendis recusandae, sed modi corporis iure itaque voluptatem. Recusandae sit deserunt, tempora qui vitae suscipit veniam optio?

Thuộc tính text-indent

Thuộc tính text-indent được sử dụng để thụt lề dòng đầu tiên trong một đoạn văn bản.

Thuộc tính này được sử dụng để thụt lề đầu dòng của đoạn văn bản hoặc đoạn trích dẫn, tạo ra hiệu ứng thụt đầu dòng.

Ví dụ:

<style>
 .blockquote {
  text-indent: 15px; 
  background-color: #f2f2f2; 
  border-left: 5px solid #3498db; 
  font-family: "Arial", sans-serif; 
  font-size: 16px; 
  padding: 20px; 
 }
</style>

<div class="blockquote">
  <p>"Thành công cần có sự cố gắng."</p>
  <p style="text-align: right;">- Colin Powell</p>
</div>

"Thành công cần có sự cố gắng."

- Colin Powell

Thuộc tính text-transform

Thuộc tính text-transform được sử dụng để chuyển đổi từ chữ in hoa thành chữ thường và ngược lại.

Bao gồm các giá trị:

• none là giá trị mặc định, văn bản hiển thị như văn bản gốc.
• uppercase biến đổi tất cả các chữ thành chữ in hoa.
• lowercase biến đổi tất cả các chữ thành chữ thường.
• capitalize biến đổi chữ cái đầu của mỗi từ thành chữ in hoa, các chữ cái còn lại ở dạng chữ thường.

Ví dụ:

<style>
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}
</style>

<p class="uppercase">This is an example of text-transform.</p>
<p class="lowercase">This is another example.</p>
<p class="capitalize">this is a third example.</p>
<p>This is the default text.</p>

This is an example of text-transform.

This is another example.

this is a third example.

This is the default text.

Tóm tắt

• Thuộc tính letter-spacing được sử dụng để điều chỉnh khoảng cách giữa các ký tự. Giá trị càng lớn khoảng cách giữa các ký tự càng xa nhau.
• Thuộc tính text-align dùng để căn nội dung theo các hướng như: căn trái, căn phải, căn giữa, v.v. Mặc định, nội dung đã được căn trái.
• Trong CSS, text-decoration được sử dụng để thêm gạch chân chữ hoặc bỏ gạch chân chữ.
• Thuộc tính text-indent được sử dụng để thụt lề dòng đầu tiên trong một đoạn văn bản.
• Thuộc tính text-transform được sử dụng để chuyển đổi từ chữ in hoa thành chữ thường và ngược lại.