Tùy Chỉnh Gạch Chân Với Trang Trí Văn Bản Trong CSS

Bài viết / Web / Css Thứ năm, 03/09/2020 | 00:00 GMT+7 Tùy chỉnh gạch chân với trang trí văn bản trong CSS

Họ nói rằng những điều tốt đẹp sẽ đến với những người biết chờ đợi , và điều này hóa ra lại rất đúng khi nói đến trang trí văn bản trên web. Mô-đun trang trí văn bản CSS cấp độ 3 xác định một số cách mới tuyệt vời để trang trí văn bản trên web và các trình duyệt cuối cùng cũng bắt đầu hỗ trợ tốt cho chúng. Thời gian sử dụng đường viền dưới cùng thay vì gạch dưới văn bản thích hợp để có được một màu gạch dưới khác cuối cùng có thể trôi qua.

Kết quả có thể khác nhau: hỗ trợ vẫn còn hạn chế, vì vậy các ví dụ trong bài đăng này có thể không hiển thị chính xác tùy thuộc vào trình duyệt bạn đang sử dụng.

trang trí văn bản

Thuộc tính text-decoration sử dụng để chỉ về một sự lựa chọn giữa các giá trị của none, gạch dưới, overline và dòng qua, nhưng với đề nghị mới là trở thành một cách viết tắt cho cái mới text-decoration màu, text-decoration-phong cách và văn bản thuộc tính -decoration-line . Ví dụ, đây là một gạch chân kép màu:

.fancy { -webkit-text-decoration: hotpink double underline; text-decoration: hotpink double underline; }

Gạch chân lạ mắt

văn bản-trang trí-màu sắc

Hoạt động giống như bạn tưởng tượng. Cuối cùng là cách thay đổi màu trang trí chữ!

văn bản-trang trí-phong cách

text-decoration-style được sử dụng để xác định kiểu trang trí văn bản và đề xuất mới mang lại hai giá trị mới: gấp đôi và gợn sóng :

.wavy { text-decoration: underline; -webkit-text-decoration-color: salmon; text-decoration-color: salmon; -webkit-text-decoration-style: wavy; text-decoration-style: wavy; }

Trang trí gợn sóng

văn bản-trang trí-dòng

text-decoration-line chấp nhận giá trị của gạch dưới, overline, line-through và chớp (chớp bị phản đối tuy nhiên):

.strike { -webkit-text-decoration-color: red; text-decoration-color: red; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; }

Tấn công cái này

văn bản-trang trí-bỏ qua

Với văn bản-trang trí-bỏ qua, ta có thể tránh có bước trang trí trên các phần của phần tử được áp dụng. Các giá trị có thể là đối tượng , khoảng trắng , mực , cạnh và trang trí hộp .

• ink : Cuối cùng, một cách để ngăn trang trí văn bản khỏi các dấu gạch chéo glyph chồng lên nhau:

.ink { -webkit-text-decoration: darkturquoise solid underline; text-decoration: darkturquoise solid underline; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; }

Hà mã

• đối tượng : Trang trí văn bản bỏ qua các phần tử có hiển thị khối nội tuyến . Nó cũng là giá trị ban đầu:

<p class="super"> Getting <span style="display: inline-block;">Very</span> Fancy </p> .super { -webkit-text-decoration: peru solid overline; text-decoration: peru solid overline; -webkit-text-decoration-skip: objects; text-decoration-skip: objects; }

Bắt rất thích

Các giá trị còn lại chưa được trình duyệt hỗ trợ tốt:

• dấu cách : Trang trí bỏ qua khoảng trắng và dấu chấm câu.
• edge : Tạo khoảng cách khi hai phần tử có trang trí văn bản ở cạnh nhau.
• hộp trang trí : Trang trí bỏ qua bất kỳ lề, phần đệm hoặc đường viền được thừa kế nào.

text-underline-position

Với text-underline-position, ta có một cách khác để kiểm soát vị trí của trang trí văn bản liên quan đến glyphs. Các giá trị có thể là tự động , dưới , trái và phải .

Với tự động , giá trị ban đầu , các trình duyệt thường sẽ đặt trang trí gần với đường cơ sở văn bản:

.auto { -webkit-text-decoration: slateblue solid underline; text-decoration: slateblue solid underline; -webkit-text-underline-position: auto; text-underline-position: auto; }

Hà mã

... và thông báo tại như thế nào, với dưới, trang trí được đặt sau khi xuống của văn bản:

.under { -webkit-text-decoration: slateblue solid underline; text-decoration: slateblue solid underline; -webkit-text-underline-position: under; text-underline-position: under; }

Hà mã

Các giá trị bên trái và bên phải cho văn bản-gạch dưới-vị trí được sử dụng để điều khiển trang trí văn bản ở chế độ viết dọc.

Bây giờ hãy tiếp tục và gây ấn tượng với ta với một số trang trí văn bản lạ mắt!

Hỗ trợ trình duyệt: Kể từ năm 2020, Tôi có thể sử dụng trang trí văn bản không? cho thấy rằng 94% trình duyệt trên toàn thế giới có hỗ trợ ít nhất một phần cho thuộc tính.

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy 2020-09-03 Cắt image trong CSS với đối tượng phù hợp 2020-09-03 Inline so với Inline-Block Display trong CSS 2020-09-03 Bố cục lưới CSS: Đơn vị Fr 2020-09-03 CSS Grid: Hợp lý và Căn chỉnh 2020-09-03 Giải thích về đơn vị CSS 2020-09-03 Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS 2020-09-03 Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu 2020-09-03 Thuộc tính khoảng trắng CSS 2020-09-03 Giới thiệu về Clipping Sử dụng clip-path trong CSS 2020-09-03