Text-decoration là gì, cách sử dụng thuộc tính text

     

bài viết hôm nay họ sẽ đi vào tò mò cách tạo cũng như thiết kế underline mặc định trong website thành gần như đường gạch men chân đẹp nhất mắt, thu hút sự chăm chú của người dùng nhé!

trực thuộc tính text-decoration là 1 trong thuộc tính vào CSS giúp bạn có thể dễ dàng tạo ra underline cho văn bản của mình. Nó có bốn giá trị cơ phiên bản là none, overline, line-through với underline(Đây chính là giá trị mà bọn họ sử dụng). Theo mình nghĩ thì bạn đã hiểu cách thức sử dụng thuộc tính này rồi dẫu vậy mình vẫn ao ước làm một lấy ví dụ như nho nhỏ tuổi để góp những các bạn mới dễ hình dung hơn.

Bạn đang xem: Text-decoration là gì, cách sử dụng thuộc tính text

Bạn sẽ xem: Text-decoration là gì

See the Pen gia tri cua text-decoration by haycuoilennao19 (haycuoilennao19) on CodePen.

tiếp sau đây họ sẽ đi vào ví dụ tạo underline bằng phương pháp sử dụng cách gọi tổng quan liêu như sau:

text-decoration: text-decoration-color text-decoration-style underline; Vớitext-decoration-color: color của dấu gạch chântext-decoration-style: Kiểu mang lại dấu gạch chân

và để bạn dễ hình dung thì hãy xem ví dụ sau đây nhé:

See the Pen tùy chỉnh cấu hình Style mang lại Underline by haycuoilennao19 (haycuoilennao19) on CodePen.

Xem thêm: Tải Gta Vice City Full Pc - Download Gta Vice City Full Pc

Như bạn thấy thì underline đang chừa một khoảng trống ở lốt nặng xuất xắc là chữ phường ở ví dụ trên. Vậy gồm cách nào chúng ta cũng có thể thiết lập một underline ko bị cách quãng hay không? Ở đây bạn cũng có thể sử dụng nằm trong tính text-underline-position giúp xác xác định trí của lốt gạch chân so với nội dung. Cùng để nắm rõ hơn chúng ta xem ví dụ tiếp sau đây nhé!


See the Pen tùy chỉnh thiết lập Style và vị trí mang lại Underline by haycuoilennao19 (

Một nằm trong tính khác trong CSS mà bạn cũng có thể tạo underline là border-bottom. Cùng để dễ hình dung bạn xem ví dụ dưới đây nhé:

See the Pen thiet lap underline bang border bottom by haycuoilennao19 (

trực thuộc tính tiếp theo sau trong CSS mà bạn thích giới thiệu đến các bạn để hoàn toàn có thể tạo được underline là box-shadow. Nào bọn họ hãy cung nhau bước vào ví dụ tiếp sau đây để làm rõ hơn nhé:

See the Pen cấu hình thiết lập Style mang lại Underline bởi box shadow by haycuoilennao19 (

trực thuộc tính tiếp theo sau trong CSS mà mình thích giới thiệu đến chúng ta để rất có thể tạo được underline là background-image. Nào họ hãy cung nhau bước vào ví dụ tiếp sau đây để làm rõ hơn nhé:

See the Pen thiết lập Style mang đến Underline bằng background-image by haycuoilennao19 (haycuoilennao19) on CodePen.

trước lúc đi vào những ví dụ thì mình gồm lưu ý nhỏ dại là so với chữ nhỏ dại thì các bạn nên thực hiện cách chế tạo underline bởi thuộc tính text-decoration do tính thuận lợi sử dụng cũng giống như áp dụng đến văn bạn dạng trong trang web. Ví như là nội dung phải thu hút sự chăm chú từ người tiêu dùng thì các bạn nên áp dụng thuộc tính background-image để sản xuất underline. Với nếu chỉ gồm một loại thì chúng ta có thể dùng ở trong tính border-bottom để chế tạo đường gạch men chân .


Trước khi đi vào ví dụ khác về underline thì mình gồm một số để ý sau là giúp thấy rõ tác dụng hơn các bạn chuyển sang chính sách screen 0.5x, 0.25x hay giả dụ nó ko hiển thị thì các bạn nhớ xác minh mình là nhỏ người trong Codepen bắt đầu xem được nhé. Nếu tệp tin là SCSS thì bạn cũng có thể chuyển thanh lịch CSS tại đây nhé : SCSS to lớn CSS. Nếu họ muốn xem các nguồn được thực hiện trong Codepen nhằm bạn tùy chỉnh cấu hình ở dưới máy vi tính thì nhấp vào chữ Resources ở bên dưới cùng phía trái của Codepen để xem những đường dẫn CDN nha.


Chuyên mục: Domain Hosting