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
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ạnKhi tôi kiểm tra thẻ
Selector { text-decoration-color: /*value*/ }
5, họ đã sử dụng nội dungSelector { text-decoration-color: /*value*/ }
6Tô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ậtSelector { text-decoration-color: /*value*/ }
8 cũ
✅cá nhân, tôi thích
Selector { text-decoration-color: /*value*/ }
6 hơnSelector { text-decoration-color: /*value*/ }
8. Công cụ phù hợp cho công việc phù hợp. Tôi không biếtSelector { text-decoration-color: /*value*/ }
6Selector { text-decoration-color: /*value*/ }
6 là cách đơn giản nhất để gạch chân văn bản
1 là những gì chúng ta cầna { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; }
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ú.
2 dành cho Safaria { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; }
🌈Đâ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]
1a { 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óa { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; }
2-
7a { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; }
Thuộc tính này sẽ bỏ qua bảng chữ cái sắc nét như
8,a { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; }
9,a { text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; }
Selector { text-decoration-color: /*value*/ }
40. Nó đã không đi qua nó. ví dụ3-
Selector { text-decoration-color: /*value*/ }
41Selector { 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 SVGDưới đây là các giá trị có sẵn mà bạn có thể sử dụng
Selector { text-decoration-color: /*value*/ }
43Selector { text-decoration-color: /*value*/ }
44Selector { text-decoration-color: /*value*/ }
45Selector { text-decoration-color: /*value*/ }
46Selector { 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*/ }
52Thuộ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*/ }
8từ 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ínhSelector { text-decoration-color: /*value*/ }
6 làSelector { text-decoration-color: /*value*/ }
56. Sau đó, chúng tôi thêm thuộc tínhSelector { text-decoration-color: /*value*/ }
8 với 3 giá trị CSS ngắn gọn làSelector { text-decoration-color: /*value*/ }
58Selector { text-decoration-color: /*value*/ }
59 = Biến của chiều rộng gạch dưới tính bằng pixelSelector { 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*/ }
62Tô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ếtChú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. ].