Định dạng thêm với text-decoration

Thuộc tính text-decoration đưa ra thêm các định dạng trang trí cho chữ, nó có thể nhận các giá trị

  • none giá trị mặc định, không hiệu ứng trang trí
  • inherit kế thừa thuộc tính này tử phần tử cha
  • overline gạch trên
  • underline gạch dưới chân
  • line-through gạch giữa (giống thẻ <s>
<style>
    p.none {
       text-decoration: none;
    }
    p.inherit {
       text-decoration: inherit;
    }
    p.overline {
       text-decoration: overline;
    }
    p.underline {
       text-decoration: underline;
    }
    p.line-through {
       text-decoration: line-through;
    }
</style>

<p class="none">This is default style of the text (none).</p>
<p class="inherit">This text inherits the decoration of the parent.</p>
<p class="overline">This is overlined text.</p>
<p class="underline">This is underlined text.</p>
<p class="line-through">This is lined-through text.</p>

This is default style of the text (none).

This text inherits the decoration of the parent.

This is overlined text.

This is underlined text.

This is lined-through text.

Bạn có thể kết hợp nhiều giá trị lại với nhau để có nhiều hiệu ứng trang trí trong một dòng CSS. Ví dụ: text-decoration: line-through underline; vừa gạch chân vừa gạch giữa

Thụt đầu dòng text-indent

Thuộc tính text-indent chỉ ra khoảng thụt đầu dòng (chiều ngang) của văn bản. Thuộc tính này nhận các giá trị theo đơn vị (px, pt, cm, em ...), % và inherit.

<style>
    p {
       text-indent: 100px;
    }
</style>
<p>This is an example of 
<strong>text-indent </strong> property. 
First line of our text is indented to the right in 60px. 
Besides pixels you can also use other measurement units, 
like pt, cm, em, etc. </p>

This is an example of text-indent property. First line of our text is indented to the right in 100px. Besides pixels you can also use other measurement units, like pt, cm, em, etc.

Đăng ký theo dõi ủng hộ kênh