Hướng dẫn nice underline css - css gạch chân đẹp

Question

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo cũng như thiết kế underline mặc định trong trang web thành những đường gạch chân đẹp mắt, thu hút sự chú ý của người dùng nhé!

Nội dung chính Show

Cách Tạo Underline bằng text-decoration
Cách Tạo Underline bằng border-bottom
Cách Tạo Underline bằng text-decoration1
Cách Tạo Underline bằng text-decoration3
Các Ví Dụ Khác Underline CSS
Tổng Hợp Các CSS Underline Effects
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Stylish Underline CSS
Cách Tạo gạch chân hoạt hình CSS3
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg
Cách tạo nhấn mạnh hiệu ứng với svg

Cách Tạo Underline bằng text-decoration

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

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

Tiếp theo đây chúng ta sẽ đi vào ví dụ tạo underline bằng cách sử dụng cách gọi tổng quan như sau:

 text-decoration: text-decoration-color text-decoration-style underline;

Với

text-decoration-color: Màu sắc của dấu gạch chân
text-decoration-style: Kiểu cho dấu gạch chân

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

See the Pen Thiết Lập Style Cho Underline by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như bạn thấy thì underline sẽ chừa một khoảng trống ở dấu nặng hay là chữ p ở ví dụ trên. Vậy 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 bạn có thể sử dụng thuộc tính text-underline-position giúp xác định vị trí của dấu gạch chân so với nội dung. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé!
Ở đây bạn có thể sử dụng thuộc tính text-underline-position giúp xác định vị trí của dấu gạch chân so với nội dung. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé!

See the Pen Thiết Lập Style và vị trí Cho Underline by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Underline bằng border-bottom

Một thuộc tính khác trong CSS mà chúng ta có thể tạo underline là border-bottom. Và để dễ hình dung bạn xem ví dụ sau đây nhé:

See the Pen thiet lap underline bang border bottom by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Underline bằng text-decoration1

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

See the Pen Thiết Lập Style Cho Underline bằng box shadow by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Underline bằng text-decoration3

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

See the Pen Thiết Lập Style Cho Underline bằng background-image by haycuoilennao19 (@haycuoilennao19) on CodePen.

Trước khi đi vào các ví dụ thì mình có lưu ý nhỏ là đối với chữ nhỏ thì bạn nên sử dụng cách tạo underline bằng thuộc tính text-decoration vì tính dễ dàng sử dụng cũng như áp dụng cho văn bản trong trang web.Nếu là nội dung cần thu hút sự chú ý từ người dùng thì bạn nên sử dụng thuộc tính text-decoration3 để xây dựng underline. Và nếu chỉ có một dòng thì bạn có thể dùng thuộc tính border-bottom để tạo đường gạch chân .
Nếu là nội dung cần thu hút sự chú ý từ người dùng thì bạn nên sử dụng thuộc tính text-decoration3 để xây dựng underline. Và nếu chỉ có một dòng thì bạn có thể dùng thuộc tính border-bottom để tạo đường gạch chân .

Các Ví Dụ Khác Underline CSS

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

Tổng Hợp Các CSS Underline Effects

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

See the Pen Cool CSS Underline Effects by Jordan Marshall (@TheCSSKing) on CodePen.

Nguồn

Cách Stylish Underline CSS

Xem hiệu ứng gạch chân BENDY với SVG của Rachel Smith (@RachSmith) trên Codepen.

programming css Width underline css text-decoration Underline HTML Underline height css Text underline CSS text-decoration trong css Custom underline CSS

Hướng dẫn nice underline css - css gạch chân đẹp

Cách Tạo Underline bằng text-decoration

Cách Tạo Underline bằng border-bottom

Cách Tạo Underline bằng text-decoration1

Cách Tạo Underline bằng text-decoration3

Các Ví Dụ Khác Underline CSS

Tổng Hợp Các CSS Underline Effects

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Stylish Underline CSS

Cách Tạo gạch chân hoạt hình CSS3

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Cách tạo nhấn mạnh hiệu ứng với svg

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội