Bài viết lúc này chúng ta sẽ đi vào tìm hiểu cách tạo cũng tương tự thiết kế underline mặc định trong trang web thành mọi đường gạch ốp chân rất đẹp mắt, gợi cảm sự chú ý của người tiêu dùng nhé!


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

Bạn đang xem: Thuộc tính gạch chân trong css

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

Tiếp theo đây họ sẽ bước vào ví dụ sinh sản underline bằng cách sử dụng phương pháp 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 cho dấu gạch chân

Và để các bạn dễ tưởng tượng thì hãy xem ví dụ sau đây nhé:

See the Pen thiết lập cấu hình Style cho Underline by haycuoilennao19 (
haycuoilennao19) on CodePen.

Như bạn thấy thì underline đã chừa một khoảng không ở vết nặng hay là chữ p. ở lấy ví dụ trên. Vậy tất cả cách nào chúng ta có thể thiết lập một underline không bị gián đoạn hay không?Ở đây chúng ta 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 để hiểu rõ hơn chúng ta xem ví dụ dưới đây nhé!

See the Pen tùy chỉnh cấu hình Style cùng vị trí mang lại Underline by haycuoilennao19 (

Một ở trong tính không giống trong CSS mà chúng ta cũng có thể tạo underline là border-bottom. Và để dễ hình dung bạn coi ví dụ dưới đây nhé:

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

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

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

Thuộc tính tiếp sau trong CSS mà bạn muốn giới thiệu đến bạn để có thể tạo được underline là background-image. Nào họ hãy cung nhau đi vào ví dụ sau đây để nắm rõ hơn nhé:

See the Pen tùy chỉnh cấu hình Style cho Underline bởi background-image by haycuoilennao19 (
haycuoilennao19) on CodePen.

Trước lúc đi vào các ví dụ thì mình tất cả lưu ý nhỏ tuổi là đối với chữ bé dại thì chúng ta nên thực hiện cách tạo thành underline bằng thuộc tính text-decoration bởi vì tính thuận lợi sử dụng tương tự như áp dụng đến văn phiên bản trong trang web.Nếu là nội dung bắt buộc thu hút sự chú ý từ người dùng thì bạn nên áp dụng thuộc tính background-image để thiết kế underline. Cùng nếu chỉ bao gồm một cái thì bạn có thể dùng trực thuộc tính border-bottom để chế tạo đường gạch ốp chân .

Xem thêm: Network Address Translation Là Gì, Nhiệm Vụ, Phân Loại, Ưu Điểm Của Nat


Trước khi lấn sân vào ví dụ khác về underline thì mình gồm một số chú ý sau là giúp thấy rõ hiệu quả hơn các bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là nhỏ người vào Codepen new xem được nhé. Nếu file là SCSS thì chúng ta có thể chuyển lịch sự CSS ở đây nhé : SCSS to lớn CSS. Nếu họ muốn xem những nguồn được áp dụng 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 ở dưới cùng bên trái của Codepen nhằm xem những đường dẫn CDN nha.


*

Kết quả chúng ta xem bên dưới nhé!

See the Pen Cool CSS Underline Effects by Jordan Marshall (

*

Kết quả bạn xem dưới nhé!

See the Pen Underlines 7: background-image (External) by John D. Jameson (

*

Kết quả bạn xem dưới nhé!

See the Pen Underlines 5: box-shadow by John D. Jameson (

*

Kết quả các bạn xem bên dưới nhé!

See the Pen Nice SCSS typography underline by MrPirrera (

*

Kết quả chúng ta xem dưới nhé!

See the Pen SVG Text Underline by Andrew Spencer (

*

Kết quả chúng ta xem bên dưới nhé!

See the Pen A Better underline by Matt Gross (

*

Kết quả chúng ta xem bên dưới nhé!

See the Pen How bởi vì I get a custom colored underline that will span multiple lines? by Will King (

*

Kết quả bạn xem dưới nhé!

See the Pen Multi-line animated underline text effects by Stas Melnikov (

Tổng kết:

Qua đây mình mong nội dung bài viết sẽ cung ứng thêm cho bạn những cách cấu hình thiết lập underline hữu ích dành riêng cho việc phân phát triển, thiết kế web với nếu có vướng mắc gì cứ gửi thư điện tử mình sẽ phản hồi nhanh nhất có thể có thể. Rất ao ước bạn thường xuyên ủng hộ trang web để mình hoàn toàn có thể viết nhiều bài hay không dừng lại ở đó nhé. Chúc bạn có một ngày vui vẻ!


Góc trả lời

Nếu các bạn có gì thắc mắc thì tương tác mình qua số đông mạng thôn hội dưới đây nhé!