Cách đổi màu gạch chân link trong html

Kiểu dáng được triển khai cho văn bản HTML để làm cho nó hấp dẫn và hấp dẫn. Văn bản có thể được in nghiêng, gạch chân và in đậm theo yêu cầu

• thẻ gạch chân. Để thay đổi màu của gạch chân, chúng ta cần thêm một số kiểu dáng bằng CSS (inline/internal/external). Theo mặc định, màu của đường gạch dưới là màu đen. Trong CSS, chúng ta sẽ sử dụng thuộc tính text-decoration để tạo kiểu cho gạch chân

  cú pháp

   Some Text Here 

• Thuộc tính CSS text-decoration-color. Thuộc tính này được sử dụng để chỉ định màu của trang trí (gạch trên, gạch chân và xuyên dòng) trên văn bản

  Chúng tôi có thể thêm các liên kết trang vào một trang web. Liên kết HTML là siêu liên kết. Thẻ xác định một siêu liên kết và được sử dụng để liên kết từ trang này sang trang khác. Thuộc tính href được sử dụng với thẻ, cho biết đích của liên kết

  Để tạo liên kết trang trong trang HTML, hãy sử dụng thẻ và, với thuộc tính href được sử dụng để xác định liên kết. Chúng ta nên sử dụng các thẻ … bên trong … thẻ

  CSS text-decoration-color được sử dụng để thay đổi màu của text-decoration-line

  cú pháp

  Cú pháp của thuộc tính text-decoration-color trong CSS như sau:

  Selector {
     text-decoration-color: /*value*/
  }

  Ví dụ

  Các ví dụ sau minh họa thuộc tính text-decoration-color trong CSS

  Bản thử trực tiếp

  
     
        
     
     
        
  
           Y aserejé-ja-dejé De jebe tu de jebere seibiunouva majavi an de bugui an de güididípi
        
     
  

  Điều này mang lại đầu ra sau

  Ví dụ

  Bản thử trực tiếp

  
     
        
     
     
        
  
           Underlined demo text.
           Hyperlink here!
        
     
  

  Điều này mang lại đầu ra sau

  ---

  Khi tôi di chuột vào liên kết

  Selector {
     text-decoration-color: /*value*/
  }

  4 ở tiêu đề, sẽ có một điểm nổi bật màu vàng đẹp xuất hiện bên dưới liên kết. cái này hay đấy bạn

  Khi tôi kiểm tra thẻ

  Selector {
     text-decoration-color: /*value*/
  }

  5, họ đã sử dụng nội dung

  Selector {
     text-decoration-color: /*value*/
  }

  6

  Tôi thực hiện một nghiên cứu nhanh và tìm thấy phép thuật CSS đơn giản, tuyệt vời này để thay đổi màu gạch chân

  Tôi đã nghiên cứu rồi, bạn chỉ cần lấy bỏng ngô 🍿 và tận hưởng hành trình 🚀

  ---

  Theo mặc định, màu gạch chân được đặt giống với màu văn bản của liên kết. Nếu liên kết có màu xanh lam 🟦, phần gạch chân cũng có màu xanh lam 🟦. Nhưng, bạn biết không, bởi vì sự sáng tạo của con người (khụ, khụ. )😆, đôi khi chúng tôi muốn gạch dưới có màu khác với văn bản của liên kết

  Có hai cách tôi tìm thấy để thực hiện điều này. Một người đang sử dụng công cụ

  Selector {
     text-decoration-color: /*value*/
  }

  6, người thứ hai đang sử dụng thủ thuật

  Selector {
     text-decoration-color: /*value*/
  }

  8 cũ

  cá nhân, tôi thích

  Selector {
     text-decoration-color: /*value*/
  }

  6 hơn

  Selector {
     text-decoration-color: /*value*/
  }

  8. Công cụ phù hợp cho công việc phù hợp. Tôi không biết

  ---

  ✅

  Selector {
     text-decoration-color: /*value*/
  }

  6

  Selector {
     text-decoration-color: /*value*/
  }

  6 là cách đơn giản nhất để gạch chân văn bản

  a { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; } 1 là những gì chúng ta cần

  a {
      text-decoration: none;
      color: blue;
  }
  
  /* show underline on hover */
  a:hover {
      text-decoration: underline;
      text-decoration-color: red;
      -webkit-text-decoration-color: red;
  }
  

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  Ghi chú.

  a {
   text-decoration: underline;
   text-decoration-color: red;
   text-decoration-style: wavy;
  }
  

  2 dành cho Safari

  Đây là điều duy nhất bạn cần. Nếu bạn muốn tùy chỉnh thêm, hãy đọc thêm. P

  ---

  🌈

  Selector {
     text-decoration-color: /*value*/
  }

  6 chỗ nghỉ

  Bản thân

  Selector {
     text-decoration-color: /*value*/
  }

  6 hoạt động tốt nhưng bạn có thể thêm một vài thuộc tính để tùy chỉnh giao diện của nó

  1) a { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; } 1

  a {
   text-decoration: underline;
   text-decoration-color: red;
   text-decoration-style: wavy;
  }
  

  1 cho phép bạn thay đổi màu gạch dưới tách biệt với màu văn bản của nó

  2- a { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; } 7

  Thuộc tính này sẽ bỏ qua bảng chữ cái sắc nét như

  a {
   text-decoration: underline;
   text-decoration-color: red;
   text-decoration-style: wavy;
  }
  

  8,

  a {
   text-decoration: underline;
   text-decoration-color: red;
   text-decoration-style: wavy;
  }
  

  9,

  Selector {
     text-decoration-color: /*value*/
  }

  40. Nó đã không đi qua nó. ví dụ

  3- Selector {    text-decoration-color: /*value*/ }41

  Selector {
     text-decoration-color: /*value*/
  }

  41 cung cấp cho bạn một thiết kế gạch chân miễn phí sử dụng các giá trị khác nhau. Không cần thêm SVG

  Dưới đây là các giá trị có sẵn mà bạn có thể sử dụng

  • Selector {
       text-decoration-color: /*value*/
    }

    43

  • Selector {
       text-decoration-color: /*value*/
    }

    44

  • Selector {
       text-decoration-color: /*value*/
    }

    45

  • Selector {
       text-decoration-color: /*value*/
    }

    46

  • Selector {
       text-decoration-color: /*value*/
    }

    47

  Ghi chú. Ví dụ này là từ Mozilla MDN. Bạn cũng có thể tách ________ 16 thành ________ 41 và ________ 141
  

  a {
   text-decoration: underline;
   text-decoration-color: red;
   text-decoration-style: wavy;
  }
  

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  4- Selector {    text-decoration-color: /*value*/ }51

  Điều này là khá mát mẻ. Nó có thể được sử dụng để xác định khoảng cách của dòng từ văn bản ban đầu

  5- Selector {    text-decoration-color: /*value*/ }52

  Thuộc tính này được sử dụng để cho biết độ lớn của gạch dưới

  ---

  ✅

  Selector {
     text-decoration-color: /*value*/
  }

  8

  từ chối trách nhiệm. nếu bạn hài lòng với thủ thuật đầu tiên, hãy cứ làm theo. Đây chỉ là một thủ thuật tương tự khác

  Nếu chúng ta muốn sử dụng thủ thuật

  Selector {
     text-decoration-color: /*value*/
  }

  8, trước tiên chúng ta cần xóa phần gạch chân có giá trị thuộc tính

  Selector {
     text-decoration-color: /*value*/
  }

  6 là

  Selector {
     text-decoration-color: /*value*/
  }

  56. Sau đó, chúng tôi thêm thuộc tính

  Selector {
     text-decoration-color: /*value*/
  }

  8 với 3 giá trị CSS ngắn gọn là

  Selector {
     text-decoration-color: /*value*/
  }

  58

  Selector {
     text-decoration-color: /*value*/
  }

  59 = Biến của chiều rộng gạch dưới tính bằng pixel

  Selector {
     text-decoration-color: /*value*/
  }

  46 = Kiểu đường viền (nét liền, chấm hoặc nét đứt)

  Selector {
     text-decoration-color: /*value*/
  }

  61 = Mã màu. Hex cũng có thể, như

  Selector {
     text-decoration-color: /*value*/
  }

  62

  ---

  Tôi thêm mẹo hay này vào blog của mình

  Tôi cũng thêm thủ thuật tuyệt vời này vào blog của riêng mình. Tôi triển khai nó trên mọi thẻ

  Selector {
     text-decoration-color: /*value*/
  }

  5 hoặc bất kỳ thẻ nào liên quan đến liên kết

  Chúng ta có thể thay đổi màu gạch chân trong HTML không?

  Tạo kiểu được triển khai cho văn bản HTML để làm cho văn bản hấp dẫn và hấp dẫn. Văn bản có thể được in nghiêng, gạch chân và in đậm theo yêu cầu. thẻ gạch chân. Để thay đổi màu của phần gạch chân, chúng ta cần thêm một số kiểu dáng bằng CSS (nội tuyến/nội bộ/bên ngoài) . Theo mặc định, màu của đường gạch dưới là màu đen.

  Màu của gạch dưới trong siêu liên kết là gì?

  Theo mặc định, một liên kết sẽ xuất hiện như thế này (trong tất cả các trình duyệt). Liên kết chưa được truy cập được gạch dưới và màu xanh lam . Một liên kết đã truy cập được gạch chân và có màu tím.

  Bạn có thể thay đổi màu siêu liên kết trong CSS không?

  Có thể định kiểu liên kết bằng bất kỳ thuộc tính CSS nào (e. g. màu sắc, họ phông chữ, nền, v.v. ).