Sử dụng thuộc tính CSS kiểu trang trí văn bản để chỉ định kiểu trang trí văn bản. Xem các giá trị thuộc tính và thực hành với các ví dụ.

Bạn đang xem : tùy chọn trang trí văn bản css

Thuộc tính text-decoration-style chỉ định kiểu trang trí văn bản. Các kiểu có thể là rắn, đứt nét, chấm, kép và lượn sóng.

Thuộc tính kiểu trang trí văn bản là một trong những thuộc tính của CSS3 .

Giá trị ban đầu
chất rắn

Áp dụng cho
Tất cả các yếu tố. Nó cũng áp dụng cho :: chữ cái đầu tiên :: chữ cái đầu tiên .

Được kế thừa
Không.

Hoạt hình
Không.

Phiên bản
CSS3
Cú pháp DOM
object.style.textDecorationStyle = “dotted”;

Cú pháp

  

text-decoration-style

: rắn chắc | gấp đôi | chấm bi | gạch ngang | gợn sóng | ban đầu | kế thừa;

Ví dụ về

thuộc tính text-decoration-style

:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

text-decoration-line

: gạch dưới;

text-decoration-style

: solid;

text-decoration-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính kiểu trang trí văn bản

& lt; /

h2

& gt;

& lt;

div

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Ví dụ về Thuộc tính

text-decoration-style

với giá trị “wavy”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

text-decoration-line

: gạch dưới;

text-decoration-style

: wavy;

text-decoration-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính kiểu trang trí văn bản

& lt; /

h2

& gt;

& lt;

div

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

text-decoration-style

với giá trị “dấu chấm”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

text-decoration-line

: overline;

text-decoration-style

: dotted;

text-decoration-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính kiểu trang trí văn bản

& lt; /

h2

& gt;

& lt;

div

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

text-decoration-style

với giá trị “gạch ngang”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

text-decoration-line

: overline;

text-decoration-style

: gạch ngang;

text-decoration-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính kiểu trang trí văn bản

& lt; /

h2

& gt;

& lt;

div

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

text-decoration-style

với giá trị “double”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

text-decoration-line

: gạch dưới gạch chân;

text-decoration-style

: double;

text-decoration-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính kiểu trang trí văn bản

& lt; /

h2

& gt;

& lt;

div

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

text-decoration-style

với tất cả các giá trị:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

margin

:

20px

0

; }

div

. t1

{

text-decoration-line

: gạch dưới gạch chân;

text-decoration-style

: solid; }

div

. t2

{

text-decoration-line

: line-through;

text-decoration-style

: wavy; }

div

. t3

{

text-decoration-line

: gạch dưới gạch chân;

text-decoration-style

: double; }

div

. t4

{

text-decoration-line

: overline;

text-decoration-style

: gạch ngang; }

div

. t5

{

text-decoration-line

: line-through;

text-decoration-style

: dotted; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính kiểu trang trí văn bản

& lt; /

h2

& gt;

& lt;

div

class

=

" t1 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

class

=

" t2 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

class

=

" t3 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

class

=

" t4 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

class

=

" t5 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Giá trị


Xem thêm những thông tin liên quan đến chủ đề tùy chọn trang trí văn bản css

CSS – 17 – Định dạng văn bản (Text)

  • Tác giả: Phan Kim Tu
  • Ngày đăng: 2021-11-15
  • Đánh giá: 4 ⭐ ( 7877 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.phankimtu.com

Gạch trang trí CSS-yếu tố

  • Tác giả: vi.atomiyme.com
  • Đánh giá: 5 ⭐ ( 5545 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định Kiểu Văn Bản trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 5392 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS cung cấp các thuộc tính giúp định kiểu cho văn bản của phần tử HTML trên trang như: color, text-alignment, text-decoration, text-transform, text-indent, line-height, line-spacing, letter-spacing…

Định dạng văn bản bằng CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 5158 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng văn bản bằng CSS sẽ cho các bạn thấy cách chúng ta định dạng nôi trung trang web. Nếu chúng ta sử dụng HTML để định dạng nội dung thì khi có

Trang trí văn bản CSS

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 8195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

One moment, please…

  • Tác giả: www.semaster.vn
  • Đánh giá: 4 ⭐ ( 9517 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tùy chỉnh gạch chân với trang trí văn bản trong CSS

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 5586 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  MySQL Chọn NHIỀU GIÁ TRỊ? - chọn sql trong đó nhiều giá trị

By ads_php