Hướng dẫn remove red underline css - xóa css gạch chân màu đỏ

Trong thiết kế web, mọi vấn đề chi tiết - bao gồm cả liên kết của bạn.

Hướng dẫn remove red underline css - xóa css gạch chân màu đỏ

Giống như bất kỳ yếu tố nào khác, các liên kết có thể được tạo kiểu với các thuộc tính CSS. Với CSS, bạn có thể thay đổi màu sắc, nền và kích thước phông chữ của chúng. Bạn thậm chí có thể loại bỏ các lớp gạch chân xuất hiện dưới đây liên kết.

Hướng dẫn remove red underline css - xóa css gạch chân màu đỏ

Cách bạn viết rằng CSS phụ thuộc vào trạng thái liên kết. Các trạng thái này, còn được gọi là các lớp giả, là các lớp CSS dựa trên hoạt động của người dùng. Dưới bốn lớp giả được xác định.

A: Liên kết - Khi người dùng chưa truy cập, lơ lửng hoặc nhấp vào liên kết — when the user has not visited, hovered, or clicked on a link

A: Đã truy cập - Sau khi người dùng đã truy cập liên kết — after the user has visited the link

A: Di chuột - Khi người dùng di chuyển chuột qua liên kết — when the user hovers their mouse over the link

A: Hoạt động - Khi người dùng đang nhấp vào liên kết — as the user is clicking on the link

Theo mặc định, gạch chân sẽ xuất hiện bên dưới các liên kết trong mỗi trạng thái giả: khi được di chuột qua, nhấp vào, truy cập hoặc không có điều nào ở trên. Điều này được hiển thị trong bản demo dưới đây:

Hướng dẫn remove red underline css - xóa css gạch chân màu đỏ

Để xóa gạch chân khỏi các liên kết, bạn có thể sử dụng thuộc tính trang trí văn bản CSS. Dưới đây, chúng tôi sẽ đi qua cách xác định thuộc tính này để loại bỏ hoàn toàn gạch chân khỏi các liên kết trên trang web HTML hoặc trang web Bootstrap của bạn.text-decoration property. Below we’ll walk through how to define this property to completely remove the underline from links on your HTML site or Bootstrap site.

  1. Thêm HTML của bạn vào phần trang web của bạn.
  2. Xác định bốn lớp giả liên kết với thuộc tính trang trí văn bản trong phần.
  3. Hãy chắc chắn rằng A: Liên kết và A: Đã truy cập đến trước A: Di chuột và A: Hoạt động đến lần cuối. Điều này là điều cần thiết cho việc xếp tầng của bảng kiểu.
  4. Đặt mỗi giá trị thuộc tính thành "Không có."

Quá trình loại bỏ gạch chân thực sự đơn giản. Chúng ta hãy xem hoàn toàn mã, sau đó kiểm tra xem nó trông như thế nào ở mặt trước.

Ở đây, các CSS:

 

a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }

Đặt hàng là quan trọng ở đây - A: Liên kết và A: Đã truy cập phải đến trước, sau đó là: Di chuột, sau đó A: Active.a:link and a:visited must come first, then a:hover, then a:active.

Ở đây, HTML:

 

This is a link that appears within a paragraph.

Đây là kết quả:

Xem Bút Xóa gạch dưới khỏi liên kết với CSS 1 của Christina Perricone (@HubSpot) trên Codepen.

Nó cũng có thể chuyển đổi gạch chân để chỉ hiển thị khi liên kết được bay và nhấp. Làm điều này với quy tắc trang trí văn bản: gạch chân; như vậy:text-decoration: underline; like so:

Xem Bút Xóa gạch dưới khỏi liên kết với CSS 2 của Christina Perricone (@HubSpot) trên Codepen.

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

Quá trình loại bỏ gạch chân khỏi các liên kết khác nhau một chút nếu bạn sử dụng CSS Bootstrap trong dự án của mình. Hãy để thảo luận ngắn gọn về quá trình cho các trang web bootstrap.

Theo mặc định trong Bootstrap, các liên kết chỉ hiển thị gạch chân khi chúng ở trạng thái di chuột hoặc trạng thái hoạt động. Có nghĩa là, khi một khách truy cập di chuyển hoặc nhấp vào một liên kết, nó sẽ hiển thị gạch chân. Nếu không, gạch chân sẽ không hiển thị trong các liên kết, ngay cả khi họ đã được truy cập. Ngoài ra, các liên kết được xác định bởi lớp nút Bootstrap không bao giờ hiển thị gạch chân.hover or active state. Meaning, as a visitor hovers over or clicks on a link, it will show the underline. Otherwise, the underline will not show in links, even if they’ve been visited. Also, links defined by the Bootstrap button class never show the underline.

Hướng dẫn remove red underline css - xóa css gạch chân màu đỏ

Để loại bỏ gạch chân trong các liên kết, bất kể trạng thái của chúng, bạn cần thêm một số CSS.

Ở đây, các CSS:

 

a:hover { text-decoration: none; }

a:active { text-decoration: none; }

Ở đây, HTML:

 

This is a link that appears within a paragraph. Below is a link defined by Bootstrap's button class.

Link

Đây là kết quả:

Xem Bút Xóa gạch dưới khỏi liên kết với CSS 1 của Christina Perricone (@HubSpot) trên Codepen.

Nó cũng có thể chuyển đổi gạch chân để chỉ hiển thị khi liên kết được bay và nhấp. Làm điều này với quy tắc trang trí văn bản: gạch chân; như vậy:

Xem Bút Xóa gạch dưới khỏi liên kết với CSS 2 của Christina Perricone (@HubSpot) trên Codepen.text-decoration property. You just need a little bit of knowledge of HTML and CSS to pull it off.

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

Hướng dẫn remove red underline css - xóa css gạch chân màu đỏ