Tóm tắt bài viết
1. Mở mã của bạn để chỉnh sửa.
2. Di chuyển đến văn bản được gạch chân.
3. Chèn thẻ SPAN trước và sau văn bản.
4. Sử dụng "trang trí văn bản. kiểu gạch chân".
5. Xác định phong cách trong CSS của bạn.
6. Lưu tài liệu của bạn.
Bản tóm tắt này có giúp ích gì cho bạn không? Có Không
Cảm ơn tất cả các tác giả đã tạo ra một trang đã được đọc 180.695 lần
Chúng tôi sử dụng thẻ, để gạch chân một văn bản trong HTML. Nó thể hiện một văn bản theo một phong cách khác với một văn bản khác trong nội dung của trang web
Chúng ta cũng có thể sử dụng thuộc tính style để gạch chân một văn bản trong HTML. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử. Thuộc tính này được sử dụng bên trong HTML
Tạo kiểu cho phần gạch chân nằm bên dưới các liên kết có thể là một công việc phức tạp và tôi thường xuyên quên cách tiếp cận tốt nhất tùy thuộc vào tình huống là gì. Tuy nhiên, rất may, John Jameson đã giúp chúng tôi bắt kịp tốc độ trong bài đăng của khách này
Có rất nhiều cách khác nhau để tạo kiểu cho gạch chân. Chắc các bạn còn nhớ bài Thủ thuật gạch chân link trên Medium. Phương tiện không cố gắng làm bất cứ điều gì điên rồ;
Đó là một đường gạch chân khá cơ bản, nhưng nó có kích thước phù hợp và nó cũng bỏ qua phần gạch dưới. Chắc chắn đẹp hơn mặc định của hầu hết các trình duyệt. Chà, hóa ra Medium đã phải trải qua rất nhiều khó khăn để có được phong cách đó trên web. Hai năm sau, thật khó để tạo kiểu cho một đường gạch chân đẹp
Bàn thắng
Có gì sai khi chỉ sử dụng text-decoration: underline
?
- Định vị chính nó bên dưới đường cơ sở
- Bỏ qua hậu duệ
- Thay đổi màu sắc, độ dày và kiểu dáng
- Lặp lại trên văn bản được bao bọc
- Làm việc trên bất kỳ nền nào
Tôi nghĩ rằng đây là tất cả những điều khá hợp lý để yêu cầu, nhưng theo như tôi biết, không có cách trực quan nào để đạt được tất cả chúng trong CSS
phương pháp tiếp cận
Vì vậy, tất cả những cách khác nhau mà chúng ta có thể gạch dưới văn bản trên web là gì?
Đây là những cái tôi có thể nghĩ ra
text-decoration
border-bottom
box-shadow
background-image
- bộ lọc SVG
- gạch dưới. js [vải]
text-decoration-*
Hãy đi xuống danh sách từng cái một và nói về những phần tốt và xấu của từng phương pháp
trang trí văn bản
text-decoration
là cách đơn giản nhất để gạch chân văn bản. Bạn áp dụng một thuộc tính duy nhất và đó là tất cả những gì cần làm. Ở kích thước nhỏ hơn, nó có thể trông khá ổn, nhưng tăng kích thước phông chữ và cùng một dòng bắt đầu cảm thấy vụng về
Xem bản trình diễn
Vấn đề lớn nhất với text-decoration
là nó thiếu khả năng tùy biến. Nó sử dụng màu sắc và kích thước phông chữ của bất kỳ văn bản nào được áp dụng cho nó và không có cách nào để thay đổi kiểu trên nhiều trình duyệt. Thêm về điều đó sau
- dễ sử dụng
- Định vị bên dưới đường cơ sở
- Bỏ qua hậu duệ theo mặc định trong Safari và iOS
- Kết thúc tốt đẹp trên các dòng
- Hoạt động trên mọi nền
- Không thể bỏ qua hậu duệ trong các trình duyệt khác
- Không thể thay đổi màu sắc, độ dày hoặc kiểu dáng
viền dưới
border-bottom
cung cấp sự cân bằng tốt giữa nhanh chóng và tùy biến. Cách tiếp cận này sử dụng đường viền CSS đã được thử và đúng, có nghĩa là bạn có thể thay đổi màu sắc, độ dày và kiểu dáng một cách dễ dàng
Đây là giao diện của border-bottom
trên các phần tử text-decoration
0
Xem bản trình diễn
Vấn đề quan trọng là phần gạch chân cách văn bản bao xa — nó hoàn toàn nằm dưới phần gạch dưới. Bạn có thể giải quyết vấn đề đó bằng cách tạo các phần tử text-decoration
1 và giảm text-decoration
2, nhưng sau đó bạn sẽ mất khả năng ngắt dòng văn bản. Tốt cho các dòng đơn, nhưng không nhiều
Xem bản trình diễn
Ngoài ra, bạn có thể sử dụng text-decoration
3 để che các phần của đường kẻ gần các đường kẻ đi xuống, nhưng bạn phải giả mạo nó bằng cách sử dụng cùng màu với bất kỳ nền nào mà nó có trên đó. Điều đó có nghĩa là nó chỉ hoạt động đối với nền đồng màu chứ không phải chuyển màu hoặc hình ảnh
Xem bản trình diễn
Tại thời điểm này, có bốn thuộc tính tạo kiểu cho một gạch dưới. Đó là công việc nhiều hơn text-decoration
- Có thể bỏ qua con cháu bằng cách sử dụng
text-decoration
3 - Có thể thay đổi màu sắc, độ dày và kiểu dáng
- Có thể chuyển đổi và tạo hiệu ứng màu sắc và độ dày
- Kết thúc theo mặc định trừ khi đó là
text-decoration
1 - Hoạt động trên mọi nền trừ khi sử dụng
text-decoration
3
- Vị trí xa và khó định vị lại
- Rất nhiều tài sản không liên quan để làm cho nó vừa phải
- Lựa chọn văn bản Janky khi sử dụng
text-decoration
3
bóng hộp
box-shadow
vẽ một đường gạch dưới với hai bóng hộp bên trong. một để tạo hình chữ nhật và một để che nó lại. Điều đó có nghĩa là bạn sẽ cần một nền tảng vững chắc để điều này hoạt động
Xem Bút Gạch Chân 5. bóng hộp của John D. Jameson [@johndjameson] trên CodePen
Bạn có thể sử dụng thủ thuật text-decoration
3 tương tự để giả mạo khoảng cách giữa phần gạch chân và phần xuống dòng của văn bản. Nhưng nếu dòng có màu khác với văn bản — hoặc thậm chí chỉ vừa đủ mỏng — thì nó không thực sự xung đột như text-decoration
- Có thể được định vị bên dưới đường cơ sở
- Có thể bỏ qua con cháu bằng cách sử dụng
text-decoration
3 - Có thể thay đổi màu sắc và độ dày
- Kết thúc tốt đẹp trên các dòng
- Không thể thay đổi phong cách
- Không hoạt động trên bất kỳ nền nào
hình nền
background-image
đến gần nhất với mọi thứ chúng tôi muốn và với ít vấn đề nhất. Ý tưởng là bạn sử dụng border-bottom
4 và border-bottom
5 để tạo một hình ảnh tự lặp lại theo chiều ngang trên các dòng văn bản
Bạn cũng sẽ phải border-bottom
6 cách tiếp cận này
Xem bản trình diễn
Cách tiếp cận này cũng không phải sử dụng border-bottom
4. Bạn có thể mang theo hình nền của riêng mình để có một số hiệu ứng thú vị
Xem bản trình diễn
- Có thể được định vị bên dưới đường cơ sở
- Có thể bỏ qua con cháu bằng cách sử dụng
text-decoration
3 - Có thể thay đổi màu sắc, độ dày [cho phép một nửa pixel] và kiểu
- Hoạt động với hình ảnh tùy chỉnh
- Kết thúc tốt đẹp trên các dòng
- Hoạt động trên mọi nền trừ khi sử dụng
text-decoration
3
- Hình ảnh có thể thay đổi kích thước khác nhau theo độ phân giải, trình duyệt và mức thu phóng
bộ lọc SVG
Đây là một cách tiếp cận mà tôi đã thử nghiệm. bộ lọc SVG. Bạn có thể tạo một phần tử SVG box-shadow
0 nội tuyến để vẽ một dòng và sau đó mở rộng văn bản để che đi các phần của dòng mà chúng ta muốn làm trong suốt. Sau đó, bạn có thể cung cấp cho box-shadow
0 một box-shadow
2 và tham chiếu nó trong CSS bằng một cái gì đó như box-shadow
3
Ưu điểm ở đây là bộ lọc bổ sung độ trong suốt mà không cần dựa vào text-decoration
3. Điều đó có nghĩa là bạn có thể bỏ qua phần giảm dần trên bất kỳ nền nào, bao gồm cả độ dốc và hình nền. Tuy nhiên, cái này chỉ hoạt động trên một dòng văn bản, vì vậy hãy chú ý đến điều đó
Xem bản trình diễn
Đây là giao diện của nó trong Chrome và Firefox
Hỗ trợ trình duyệt trong IE, Edge và Safari có vấn đề. Thật khó để kiểm tra hỗ trợ bộ lọc SVG trong CSS. Bạn có thể sử dụng box-shadow
5 với box-shadow
0, nhưng điều đó chỉ kiểm tra xem tham chiếu có hoạt động hay không — không phải bản thân bộ lọc được áp dụng. Cách tiếp cận của tôi cuối cùng cũng thực hiện một số thao tác đánh hơi trình duyệt khá thô thiển, vì vậy hãy đề phòng gấp đôi về điều đó
- Định vị bên dưới đường cơ sở
- Bỏ qua hậu duệ
- Có thể thay đổi màu sắc, độ dày và kiểu dáng
- Hoạt động trên mọi nền
- Không quấn ngang dòng
- Không hoạt động trong IE, Edge hoặc Safari, nhưng bạn có thể quay lại
text-decoration
. Dù sao thì phần gạch dưới của Safari trông vẫn đẹp
gạch dưới. js [Canvas]
gạch dưới. js thật hấp dẫn. Tôi nghĩ những gì Wenting Zhang có thể làm với JavaScript và sự chú ý đến từng chi tiết là cực kỳ ấn tượng. Nếu bạn chưa thấy phần gạch dưới. js tech demo trước đây, chắc chắn hãy dừng đọc một phút và xem thử. Có một cuộc nói chuyện hấp dẫn kéo dài 9 phút về cách thức hoạt động của nó, nhưng tôi sẽ cung cấp cho bạn phiên bản ngắn. nó vẽ gạch dưới với các yếu tố box-shadow
8. Đó là một cách tiếp cận mới hoạt động tốt một cách đáng ngạc nhiên
Mặc dù cái tên hấp dẫn, Underline. js chỉ là bản demo công nghệ. Điều đó có nghĩa là bạn sẽ không thể thả nó vào bất kỳ dự án nào mà không sửa đổi toàn bộ nó trước.
Thật đáng để đưa nó lên đây như một bằng chứng về khái niệm. box-shadow
8 có khả năng tạo ra những gạch dưới tương tác, đẹp mắt, nhưng bạn sẽ phải viết một số JavaScript tùy chỉnh để chúng hoạt động
thuộc tính text-decoration-*
Bạn có nhớ phần “thêm về điều đó sau” không?
Bản thân text-decoration
hoạt động tốt nhưng bạn có thể thêm một số thuộc tính thử nghiệm để tùy chỉnh giao diện của nó
background-image
1background-image
2background-image
3
Đừng quá phấn khích. Bạn biết đấy, hỗ trợ trình duyệt
văn bản-trang trí-màu sắcbackground-image
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ó. Thuộc tính thậm chí còn hỗ trợ trình duyệt tốt hơn mong đợi — nó hoạt động trong Firefox và có tiền tố trong Safari. Đây là bắt. Nếu bạn không xóa dòng xuống, Safari sẽ đặt dòng này lên trên văn bản. 🙃
firefox
Cuộc đi săn
background-image
2 bật/tắt bỏ qua phần xuống dưới trong văn bản được gạch chân
Thuộc tính này không chuẩn và hiện chỉ hoạt động trong Safari, vì vậy bạn cần có tiền tố background-image
6 để sử dụng thuộc tính này. Mặc dù vậy, Safari bật thuộc tính này theo mặc định, đó là lý do tại sao gạch dưới bỏ qua phần xuống ngay cả trên các trang web không chỉ định nó
Nếu bạn đang sử dụng Chuẩn hóa, hãy biết rằng các phiên bản gần đây sẽ vô hiệu hóa thuộc tính này để giữ cho mọi thứ nhất quán giữa các trình duyệt. Bạn cần bật lại nếu muốn có những đường gạch chân đẹp như mơ đó
background-image
3 cung cấp các loại dòng giống như bạn mong đợi từ background-image
8, nhưng cũng thêm vào dòng background-image
9
Dưới đây là các giá trị khác nhau mà bạn có thể sử dụng
text-decoration-*
0text-decoration-*
1text-decoration-*
2text-decoration-*
3background-image
9
Hiện tại, background-image
3 chỉ hoạt động trong Firefox, vì vậy đây là ảnh chụp màn hình
Một loạt các kiểu gạch chân đồng màu
Nhìn quen không?
Cái gì còn thiếu?Thuộc tính text-decoration-*
trực quan hơn nhiều so với việc sử dụng các thuộc tính CSS khác để tạo kiểu cho phần gạch chân. Nhưng nếu chúng ta xem xét lại các yêu cầu trước đây của mình, các thuộc tính này không cung cấp cách xác định độ dày hoặc vị trí của đường kẻ
Sau khi thực hiện một nghiên cứu nhỏ, tôi đã tìm thấy hai thuộc tính này
text-decoration-*
7text-decoration-*
8
Có vẻ như chúng đã được giới thiệu trong các bản nháp CSS trước đó, nhưng chưa bao giờ được triển khai do thiếu sự quan tâm. Này, đừng đổ lỗi cho tôi
mang đi
Vì vậy, cách tốt nhất để gạch chân văn bản là gì?
nó phụ thuộc
Đối với văn bản nhỏ, tôi khuyên bạn nên sử dụng text-decoration
và sau đó áp dụng một cách lạc quan background-image
2 ở trên cùng. Nó trông hơi nhạt nhẽo trong hầu hết các trình duyệt, nhưng phần gạch chân đã trông như vậy mãi mãi và mọi người dường như không bận tâm. Ngoài ra, luôn có khả năng nếu bạn đủ kiên nhẫn, tất cả các đường gạch dưới của bạn sẽ trông tuyệt vời sau này mà bạn không cần phải thay đổi bất cứ điều gì
Đối với nội dung văn bản, có thể sử dụng cách tiếp cận background-image
. Nó hoạt động, trông rất tuyệt và có Sass mixin cho nó. Bạn có thể bỏ qua nó text-decoration
3 nếu gạch dưới quá mỏng hoặc có màu khác với văn bản
Đối với một dòng văn bản, hãy sử dụng border-bottom
và bất kỳ thuộc tính nào khác mà bạn muốn đi cùng với nó
Và để bỏ qua các phần giảm dần ở trên cùng của hình nền hoặc gradient, hãy thử sử dụng các bộ lọc SVG. Hoặc chỉ cần tránh sử dụng gạch chân hoàn toàn
Trong tương lai khi trình duyệt hỗ trợ tốt hơn, câu trả lời là text-decoration-*
luôn
Ngoài ra, hãy xem bài đăng CSS Underlines Suck của Benjamin Woodruff, bài đăng này tình cờ tiếp cận vấn đề này theo cách tương tự