Hướng dẫn underline css – gạch dưới css

Posted on by mtoplistChuyên mục:Top List

Thuộc tính text-decoration định dạng trang trí phần tử HTML

Thuộc tính text-decoration trong CSS đưa thêm các định dạng trang trí cho chữ (các dòng kẻ qua chữ, gạch chân css), thực chất text-decoration trong css nó là dạng viết tổng hợp cho ba thuộc tính CSS riêng lẻ là:text-decoration trong CSS đưa thêm các định dạng trang trí cho chữ (các dòng kẻ qua chữ, gạch chân css), thực chất text-decoration trong css nó là dạng viết tổng hợp cho ba thuộc tính CSS riêng lẻ là:

Nội dung chính

Show

  • Thuộc tính text-decoration định dạng trang trí phần tử HTML
  • 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
  • Định nghĩa và sử dụng
  • Cấu trúc
  • text-decoration: underline;

Thuộc tính CSSDiễn giảitext-decoration-line
thiết lập có đường kẻ qua chữ, nó có thể nhận các giá trị:

  • none : hủy kẻ qua chữ
  • underline: gạch chân, gạch dưới css

    gạch chân, gạch dưới css

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    0: gạch trên đầu chữ

    gạch trên đầu chữ

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    1: gạch qua chữ

    gạch qua chữ

text-decoration-color
Đặt màu đường trang trí mà loại đường thì thiết lập ở text-decoration-line, nó nhận giá trị là các mã màu CSS text-decoration-style
thuộc tính thiết lập kiểu đường trang trí, nhận các giá trị: 

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    2 : đường liền

    đường liền

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    3: đường đôi

    đường đôi

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    4: đường chấm chấm

    đường chấm chấm

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    5: đường gạch gạch

    đường gạch gạch

  • <style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

    6: lượn sóng

    lượn sóng

Bằng cách dùng text-decoration bạn có thể viết gộp ba thuộc tính trên cùng một dòng, với cú pháp dạng:text-decoration bạn có thể viết gộp ba thuộc tính trên cùng một dòng, với cú pháp dạng:

text-decoration: line color style;

Trong đó bạn có thể không cần chỉ ra cả ba tham số, ví dụ thiếu 

<style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

7, thiếu 

<style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

8 …, thành phần thiếu sẽ sử dụng thiết lập mặc định của trình duyệt.

Ví dụ 1: trang trí bằng text-decoration yêu cầu gạch chân dòng chữ, màu đường gạch chân là đỏ (red), kiểu đường lượn sóng.: trang trí bằng text-decoration yêu cầu gạch chân dòng chữ, màu đường gạch chân là đỏ (red), kiểu đường lượn sóng.

<style>
    .vidu1 {
        text-decoration: underline red wavy;
    }
</style>

<p class="vidu1">Kết quả ví dụ 1</p>

Kết quả ví dụ 1

Ví dụ 2: Trang trí kẻ qua giữa dòng chữ, kiểu đường kẻ và màu để mặc định => chỉ cần tham số line: Trang trí kẻ qua giữa dòng chữ, kiểu đường kẻ và màu để mặc định => chỉ cần tham số line

<style>
    .vidu2 {
        text-decoration: line-through;
    }
</style>
<p class="vidu2">Kết quả ví dụ 2</p>

Kết quả ví dụ 2

Ví dụ 3: Một số trường hợp hay dùng với text-decoration: Một số trường hợp hay dùng với text-decoration

<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">Hủy text-decoration (none).</p>
<p class="inherit">Văn bản này hiệu ứng trang trí theo phần tử cha.</p>
<p class="overline">Gạch trên.</p>
<p class="underline">Gạch dưới.</p>
<p class="line-through">Gạch giữa.</p>

Hủy text-decoration (none).

Văn bản này hiệu ứng trang trí theo phần tử cha.

Gạch trên.

Gạch dưới.

Gạch giữa.

Kết quả

Hủy text-decoration (none).

Văn bản này hiệu ứng trang trí theo phần tử cha.

Gạch trên.

Gạch dưới.

Gạch giữa.

Kết quảtext-decoration: line-through underline; vừa gạch chân vừa gạch giữa

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

<style>
p.indent {
    text-indent: 100px;
}
</style>

<p class="indent">Thuộc tính <strong>text-indent</strong> 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.</p>

Kết quả

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ữatext-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.

  • Xác định đường gạch bên trên văn bản.
  • Tham khảo
  • CSS
  • Thuộc tính text-decoration

Định nghĩa và sử dụng

Thuộc tính text-decoration thiết lập các trang trí thêm cho text.

Cấu trúc

tag {
    text-decoration: giá trị;
}

Với giá trị như sau:

Thuộc tínhgiá trịVí dụMô tảtext-decoration none text-decoration: none; Định dạng văn bản bình thường, đây là dạng mặc định. underline text-decoration: underline; Xác định đường gạch bên dưới văn bản. overline text-decoration: overline; Xác định đường gạch bên trên văn bản. line-through text-decoration: line-through; Xác định đường gạch ngang văn bản. blink text-decoration: blink; Xác định văn bản nhấp nháy. inherit text-decoration: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Mô tả

<html>
<head></head>
<body>
<p class="lineUnder">Line under text</p>
<p class="lineOver">Line Over text</p>
<p class="lineThrough">Line Over through</p>
<p class="lineBlink">Line Over blink</p>
</body>
</html>

text-decoration

none

text-decoration: none;

Định dạng văn bản bình thường, đây là dạng mặc định.

underline

text-decoration: underline; 

p.lineUnder {
    text-decoration: underline;
}

p.lineOver {
    text-decoration: overline;
}

p.lineThrough {
    text-decoration: line-through;
}

p.lineBlink {
    text-decoration: blink;
}

Xác định đường gạch bên dưới văn bản.

none

text-decoration: none;

Định dạng văn bản bình thường, đây là dạng mặc định.

underline

text-decoration: underline;

Xác định đường gạch bên dưới văn bản.

overline

text-decoration: overline;

mtoplist