Tóm Tắt
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 cssgạ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;