Cách xóa gạch chân khỏi đoạn văn trong HTML

Có hai cách chính để tạo gạch chân. Phương pháp bạn sử dụng sẽ phụ thuộc vào những gì bạn đang cố gắng đạt được. Trên thực tế, có ba cách chính, nhưng một trong số đó đã lỗi thời. Thông tin thêm về điều đó bên dưới

gạch dưới văn bản

Bạn có thể sử dụng thuộc tính CSS text-decoration để chỉ định rằng gạch chân sẽ xuất hiện bên dưới văn bản của bạn. Như thế này

Mã nguồnKết quả

Văn bản này đã được gạch dưới

Xóa gạch dưới

Thuộc tính text-decoration thường được sử dụng để xóa gạch dưới khỏi siêu liên kết. Để làm điều đó, chỉ cần sử dụng text-decoration:none;

Để chứng minh điều này, ví dụ sau sử dụng một đoạn văn đã được gạch chân, nhưng cũng chứa văn bản bên trong phần tử đã bị xóa phần gạch chân

Mã nguồnKết quả

liên kết bình thường

Liên kết với gạch chân bị xóa

Gạch chân bất kỳ phần tử HTML nào

Bạn có thể sử dụng thuộc tính CSS border-bottom để thêm gạch chân vào bất kỳ phần tử HTML nào. Trên thực tế, nó không thực sự là một gạch chân. Nó chỉ đơn giản là một đường viền chạy dọc theo phần dưới cùng của phần tử. Đây là một ví dụ

Mã nguồnKết quả

Đoạn này có viền dưới

Điểm hay của thuộc tính border-bottom (như với tất cả các thuộc tính đường viền CSS), là bạn có thể chỉ định các kiểu khác nhau cho đường viền. Dưới đây là một số để cung cấp cho bạn một ý tưởng

Mã nguồnKết quả

1 pixel, đặc, đen

1 pixel, chấm, màu đen

10 pixel, đôi màu cam

1 pixel, nét đứt màu lục

Để biết thêm các kiểu đường viền, hãy xem các đường viền HTML tại Quackit

Lưu ý về khả năng sử dụng

Gạch dưới văn bản bình thường trên web có thể gây ra các vấn đề về khả năng sử dụng. Điều này là do hầu hết người dùng web đã quen với việc liên kết văn bản được gạch dưới với một siêu liên kết. Điều này là do các trình duyệt thường gạch dưới các siêu liên kết (trừ khi nhà phát triển có quy định khác). Do đó, không nên gạch dưới văn bản trừ khi bạn thực sự cần (hoặc văn bản là một siêu liên kết)

Nếu bạn cần nhấn mạnh văn bản, hãy sử dụng thẻ . Để tăng thêm tầm quan trọng cho văn bản, hãy sử dụng thẻ . Các phần tử này được tạo riêng cho những mục đích đó và các trình duyệt thường hiển thị văn bản này một cách thích hợp

Xóa gạch chân khỏi siêu liên kết cũng có thể gây ra các vấn đề về khả năng sử dụng. Nếu bạn chọn làm điều này, hãy đảm bảo rằng người dùng có một số cách khác để phân biệt siêu liên kết với văn bản thông thường. Thông thường, văn bản có màu khác nhau là đủ, nhưng hãy đảm bảo sử dụng màu không gây ra sự cố cho người dùng bị mù màu

Nếu bạn là nhà phát triển web, có lẽ bạn muốn loại bỏ phần gạch chân mặc định xuất hiện khi bạn thêm liên kết vào một trang.

May mắn thay, giống như các phần tử khác trên trang web, bạn có thể tạo kiểu cho các thẻ liên kết chịu trách nhiệm hiển thị liên kết

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách xóa gạch chân khỏi một liên kết bằng CSS. Tôi cũng sẽ chỉ cho bạn bốn trạng thái mà các liên kết có thể có và cách loại bỏ phần gạch dưới cho mỗi trạng thái.

Cách xóa gạch chân khỏi liên kết trong CSS

Theo mặc định, đây là cách thẻ liên kết xuất hiện trong trình duyệt

Thứ nhất, cần biết rằng thẻ liên kết (thẻ neo) có thể ở 4 trạng thái khác nhau được gọi là lớp giả

• a:link. trạng thái thông thường của liên kết khi nó không hoạt động, không được truy cập hoặc được di chuột vào
• a:visited. khi liên kết đã được người dùng nhấp vào, nghĩa là đã truy cập
• a:hover. khi người dùng di chuột vào liên kết
• a:active. khi người dùng nhấp vào liên kết

N. B. Các trạng thái (lớp giả) phải xuất hiện theo thứ tự được liệt kê ở trên do tính chất xếp tầng của CSS

Cuối cùng, để xóa phần gạch chân mặc định của liên kết, bạn có thể nhắm mục tiêu tất cả các lớp giả và gán cho chúng một thuộc tính text-decoration của none

This is a link

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Bạn cũng có thể xóa gạch chân mặc định tất cả trong một bằng bộ chọn phần tử neo

 a {
       text-decoration: none;
}

Bạn có thể chơi với 4 lớp giả của thẻ liên kết bằng bút này

Trạng thái thẻ neo

Phần kết luận

Tôi hy vọng bài viết này giúp bạn biết cách loại bỏ gạch chân mặc định khỏi các liên kết trong CSS

Nếu thấy bài viết hữu ích đừng ngần ngại chia sẻ với bạn bè người thân nhé

Cảm ơn vì đã đọc

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu