Định dạng chữ

Trong các chương trình soạn thảo văn bản như Microsoft Word hay Google Docs, bạn có thể làm cho chữ in đậm, in nghiêng, hay gạch dưới. Chúng ta cũng có thể làm như vậy với CSS.

Trong bài học này chúng ta sẽ:

• Định dạng chữ với thuộc tính font-weight, font-style, và text-decoration.
• Áp dụng định dạng một phần tử bằng thuộc tính style.

In đậm với font-weight

Để thay đổi độ đậm nhạt của chữ trong CSS, chúng ta sẽ dùng thuộc tính font-weight. Thuộc tính này chấp nhận các giá trị sau:

• lighter
• normal
• bold
• bolder

Với font-weight: bold chúng ta sẽ có chữ in đậm:

<style>
  p {
    font-weight: bold;
  }
</style>

<p>Trong đầm gì đẹp bằng sen,</p>
<p>Lá xanh, bông trắng lại chen nhụy vàng.</p>

Theo mặc định trình duyệt sẽ đặt font-weight: normal.

In nghiêng với font-style

Gạch ngang hay gạch dưới với text-decoration

Áp dụng định dạng bằng thuộc tính style

Cho đến hiện tại bạn đã biết sử dụng CSS thông qua thẻ <style>. HTML còn có một cách khác để áp dụng CSS cho từng phần tử riêng biệt thông qua thuộc tính style. style sẽ nhận giá trị là các thuộc tính CSS, chẳng hạn như:

<p style="color: violet;">Trong đầm gì đẹp bằng sen,</p>
<p style="color: white; background-color: green;">
  Lá xanh, bông trắng lại chen nhụy vàng.
</p>
<p>Nhụy vàng, bông trắng lá xanh,</p>
<p>Gần bùn mà chẳng hôi tanh mùi bùn.</p>

<style>
  p {
    color: red;
  }
</style>

<p style="color: violet;">Trong đầm gì đẹp bằng sen,</p>
<p style="color: white; background-color: green;">
  Lá xanh, bông trắng lại chen nhụy vàng.
</p>
<p>Nhụy vàng, bông trắng lá xanh,</p>
<p>Gần bùn mà chẳng hôi tanh mùi bùn.</p>

Bài tập