Xóa gạch chân khỏi thẻ bootstrap
|
Bạn có thể xóa gạch dưới siêu liên kết bằng cách chỉ gán giá trị “none” cho thuộc tính text-decoration, thuộc tính này sẽ xóa gạch chân. Vì các thuộc tính text-decoration-color và text-decoration-style dành cho dòng trang trí văn bản, nếu chúng ta xóa phần gạch dưới, thì không có mục đích giữ nguyên các giá trị khác vì chúng sẽ không hiệu quả. Đó là lý do tại sao chúng tôi sử dụng giá trị “none cho thuộc tính text-decoration Show
– Ví dụ mã hóa.underline a{màu. ff0000; trang trí văn bản. không; } Trong ví dụ này, chúng tôi đặt giá trị “none” cho thuộc tính text-decoration, đặt lại tất cả các hiệu ứng của nó. Nếu liên kết có gạch chân với một số kiểu và màu sắc, thì bây giờ nó sẽ là một liên kết đơn giản không có bất kỳ màu sắc, kiểu dáng hoặc gạch chân nào Khái niệm cơ bảnText-decoration là một thuộc tính được sử dụng để loại bỏ gạch dưới siêu liên kết trong CSS. Thuộc tính này cho phép bạn trang trí liên kết, nơi nó cho phép bạn loại bỏ phần gạch chân khỏi liên kết. text-decoration là thuộc tính tốc ký của ba thuộc tính khác. Thuộc tính text-decoration-line , thuộc tính text-decoration-color , . text-decoration-style property. Dòng trang trí văn bản được sử dụng để trang trí văn bản, trong đó chúng ta có thể thêm gạch chân, gạch đầu dòng hoặc gạch đầu dòng. text-decoration-color được sử dụng để đặt màu. Ngược lại, kiểu trang trí văn bản được sử dụng để chỉ định kiểu trang trí văn bản nơi bạn có thể sử dụng bất kỳ kiểu nào, bao gồm lượn sóng, liền nét, chấm, nét đứt, v.v. – Giá trịVì nó là một thuộc tính tốc ký có ba thuộc tính nên chúng ta có thể gán ba giá trị. Giá trị đầu tiên sẽ dành cho dòng trang trí văn bản, giá trị thứ hai dành cho màu trang trí văn bản và giá trị thứ ba dành cho kiểu trang trí văn bản Phương pháp 2. Sử dụng lớp giả để xóa gạch chân khỏi liên kết CSS
– Ví dụ mã hóa{a. liên kết {văn bản-trang trí. none} a. đã ghé thăm {text-decoration. none} a. hover {text-decoration. gạch dưới} a. hoạt động {text-decoration. none} } Ở đây chúng tôi chỉ đặt gạch chân trên lớp giả di chuột; Gạch dưới xuất hiện bên dưới liên kết trong cả bốn lớp giả. Nếu liên kết hiển thị, không được truy cập, di chuột hoặc nhấp vào, liên kết sẽ luôn được gạch dưới. Lớp giả giúp chúng ta loại bỏ CSS liên kết gạch chân. Chúng ta cần chọn một lớp giả và sau đó sử dụng một số thuộc tính để xóa phần gạch chân khỏi liên kết Chúng ta sẽ sử dụng lại thuộc tính text-decoration ở đây; . Cú pháp áp dụng thuộc tính text-decoration cho mỗi pseudo-class là khác nhau như sau – Cú pháp của bạn cho mỗi Pseudo-class với thuộc tính Text-decorationCó bốn loại liên kết và có một cú pháp khác nhau cho từng loại liên kết
Hơn nữa, bạn cần hiểu rằng trước tiên bạn phải xóa phần gạch dưới khỏi liên kết chưa được truy cập, sau đó đến các liên kết đã truy cập, sau đó di chuột và cuối cùng là các liên kết đang hoạt động – Khả năng khác nhau của việc thiết lập và loại bỏ gạch chânNếu bạn muốn xóa phần gạch chân khỏi siêu liên kết trong CSS cho mọi trường hợp, bạn có thể chọn giá trị “none” cho tất cả lớp giả. Nhưng nếu bạn muốn liên kết được gạch dưới, hiển thị rằng nó vẫn chưa được truy cập, hiển thị rằng nó đã được truy cập hoặc chỉ hiển thị gạch dưới khi di chuột hoặc trong khi người dùng nhấp vào. Bạn có thể chọn bất kỳ trường hợp nào và thay đổi giá trị cho thuộc tính tốc ký text-decoration thành “gạch dưới. ” Khi bạn đặt gạch dưới, bạn có thể chọn bất kỳ kiểu dáng hoặc màu sắc nào Phương pháp 3. Xóa thuộc tính Box-shadow để xóa gạch chân khỏi liên kết CSSĐôi khi chúng tôi tạo gạch dưới bằng cách sử dụng thuộc tính box-shadow. Thuộc tính này cho phép chúng ta tạo gạch dưới bên dưới bất kỳ văn bản hoặc liên kết nào. Chúng ta có thể tạo một gạch chân bằng cách sử dụng cú pháp sau. bóng hộp. hình nhỏ 0 -2px 0 0 #0000FFVì vậy, trước hết, chúng ta cần xác nhận nguyên nhân của gạch dưới. Nếu nguyên nhân là do thuộc tính box-shadow, chúng ta có thể xóa CSS liên kết gạch dưới bằng cách xóa thuộc tính hoặc đặt giá trị “none” – Ví dụ mã hóa.underline{màu. màu đen; hộp-bóng. hình nhỏ 0 -2px 0 0 màu xanh lam; } Nếu đúng như vậy, chúng ta có thể thấy nguyên nhân gạch chân là do thuộc tính box-shadow nên có thể loại bỏ thuộc tính hoặc đặt giá trị “none”. Một trong hai cách sẽ cung cấp kết quả tương tự .underline{màu. màu đen; hộp-bóng. inset 0 -2px 0 0 blue; box-shadow. không; } Thuộc tính box-shadow là thuộc tính tốc ký, nhận nhiều hơn một giá trị. Một trong những giá trị tùy chọn của nó được chèn. Giá trị nội dung đó chịu trách nhiệm tạo phần gạch chân trong một số trường hợp. Vì vậy, nếu bạn không thể xóa thuộc tính hoặc đặt thuộc tính thành giá trị "không", bạn có thể xóa giá trị chèn từ đó Cách xóa phần gạch chân khỏi liên kết trong BootstrapCác liên kết bootstrap chỉ hiển thị phần gạch chân khi chúng ở trạng thái di chuột hoặc hoạt động. Bạn sẽ không thấy bất kỳ gạch chân nào trong bất kỳ liên kết đã truy cập hoặc chưa truy cập nào. Một gạch chân sẽ được hiển thị khi khách truy cập di chuột qua liên kết hoặc nhấp vào liên kết. Nếu bạn không muốn nhìn thấy phần gạch chân, bạn cũng có thể xóa nó đi. Thuộc tính text-decoration cũng được sử dụng ở đây với lớp giả một lần nữa. Vì không có phần gạch dưới trên các liên kết đã truy cập và không được truy cập, chúng tôi chỉ thảo luận về lớp giả của các liên kết di chuột và liên kết hoạt động ở đây
Chúng tôi đã sử dụng cả hai lớp giả này trong bài viết, nhưng phương pháp này cũng hoạt động trong bootstrap Ưu điểm của việc sử dụng gạch chân trong CSSCó nhiều lợi thế khi sử dụng gạch dưới; . Bạn có thể thêm gạch dưới bên dưới bất kỳ văn bản hoặc đoạn văn nào để tạo điểm nhấn cho người dùng của bạn. Hầu hết người dùng thấy gạch dưới di chuột dễ dàng và thoải mái vì nó cho họ biết họ đang di chuột trên liên kết và hầu hết các nhà phát triển sử dụng gạch dưới trong thanh điều hướng và phân trang Tuy nhiên, đôi khi, khi bạn có nhiều liên kết trong nội dung, nó sẽ trở nên khó chịu và khiến bạn mất tập trung khi đọc trang Phần kết luậnBây giờ, hãy tiếp tục và xem xét những điểm quan trọng nhất mà chúng ta đã thảo luận trong bài viết này
 5/5 - (12 phiếu) Vị trí là tất cả Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL Làm cách nào để xóa gạch chân khỏi thẻ trong Bootstrap?Bằng cách đặt text-decoration thành none để xóa phần gạch chân khỏi thẻ neo. cú pháp. trang trí văn bản. không ai; . Ví dụ này đặt thuộc tính text-decoration thành none.
Làm cách nào để xóa gạch chân văn bản trong Bootstrap?Cách xóa gạch chân khỏi liên kết trong Bootstrap . Để xóa phần gạch chân khỏi liên kết di chuột, bạn có thể sử dụng cú pháp sau. một. hover {text-decoration. không ai;} Để xóa phần gạch chân khỏi liên kết đang hoạt động, bạn có thể sử dụng cú pháp sau. một. đang hoạt động{trang trí văn bản. không ai;} Thuộc tính nào có thể xóa phần gạch chân khỏi liên kết?Chúng tôi sử dụng thuộc tính kiểu nội tuyến với thuộc tính CSS text-decoration để xóa gạch chân khỏi một liên kết được chỉ định trong HTML |
