Các thuộc tính trang trí văn bản mới cho phép chúng tôi thay đổi màu sắc hoặc bỏ qua các bộ giảm dần glyph. Dưới đây là tóm tắt nhanh về những gì có thể xảy ra

Bạn đang xem: gạch chân trang trí văn bản css

Mặc dù chúng tôi tin rằng nội dung này mang lại lợi ích cho cộng đồng của chúng tôi, nhưng chúng tôi vẫn chưa xem xét kỹ lưỡng nội dung đó . Nếu bạn có bất kỳ đề xuất cải tiến nào, vui lòng cho chúng tôi biết bằng cách nhấp vào nút “báo cáo sự cố” ở cuối hướng dẫn.

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 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ó màu gạch chân khác cuối cùng có thể đã thành công.

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.

text-decoration

Thuộc tính text-decoration trước đây chỉ là sự lựa chọn giữa các giá trị không có, gạch dưới, gạch ngang và dòng, nhưng với đề xuất mới, nó trở thành một cách viết tắt cho văn bản mới-trang trí-màu, văn bản-trang trí- thuộc tính kiểu và văn bản-trang trí-dòng. Ví dụ: đây là một gạch chân kép màu:

  

. ưa thích

{

- webkit-text-decoration

:

hotpink kép gạch dưới

;

text-decoration

:

hotpink kép gạch dưới

;

}

Gạch chân lạ mắt

Xem Thêm  Download Code::Blocks for Windows - code blocks 13.12

text-decoration-color

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

text-decoration-style

text-decoration-style được sử dụng để xác định loại 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

:

gạch chân

;

- webkit-text-decoration-color

:

cá hồi

;

text-decoration-color

:

cá hồi

;

- webkit-text-decoration-style

:

wavy

;

text-decoration-style

:

wavy

;

}

Trang trí gợn sóng

text-decoration-line

text-decoration-line chấp nhận các giá trị gạch chân, gạch ngang, dòng qua và nhấp nháy (tuy nhiên, nhấp nháy không được dùng nữa):

  

. đình công

{

- webkit-text-decoration-color

:

red

;

text-decoration-color

:

red

;

- webkit-text-decoration-line

:

line-through

;

text-decoration-line

:

line-through

;

}

Thông báo điều này

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

Với văn bản-trang trí-bỏ qua, chúng ta có thể tránh phải thực hiện 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á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 chồng chéo các ký tự glyph:
  

. ink

{

- webkit-text-decoration

:

darkturquoise gạch dưới đặc

;

text-decoration

:

dấu gạch chân đậm darkturquoise

;

- webkit-text-decoration-bỏ qua

:

ink

;

text-decoration-bỏ qua

:

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:
  

& lt;

p

class

=

"

super

"

& gt;

Nhận

& lt;

span

style

=

"

hiển thị

:

-block

;

"

& gt;

Rất

& lt; /

span

& gt;

Lạ mắt

& lt; /

p

& gt;

  

. super

{

- webkit-text-decoration

:

peru solid overline

;

text-decoration

:

peru solid overline

;

- webkit-text-decoration-bỏ qua

:

đối tượng

;

text-decoration-bỏ qua

:

đối tượng

;

}

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.
  • các cạnh: 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 kế thừa nào.

text-underline-position

Với text-underline-position, chúng tôi 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ở của 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à bây giờ hãy để ý xem trang trí được đặt như thế nào sau khi chữ giảm dần:

  

. dưới

{

- webkit-text-decoration

:

slateblue solid underline

;

text-decoration

:

slateblue solid underline

;

- webkit-text-underline-position

:

trong

;

text-underline-position

:

trong

;

}

Hà mã

Các giá trị bên trái và bên phải cho text-underline-position đượ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 chúng tôi bằng 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.


Xem thêm những thông tin liên quan đến chủ đề gạch chân trang trí văn bản css

Gradient Colored Text in HTML | CSS

  • Tác giả: Royal 420 KE
  • Ngày đăng: 2022-06-20
  • Đánh giá: 4 ⭐ ( 6257 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Gradient Colored Text in HTML | CSS for beginners

Thuộc tính text-decoration và text-indent CSS

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 3160 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trang trí dòng chữ với text-decoration CSS để gạch chân, gạch giữa và thụt đầu dòng với text-indent, tìm hiểu thuộc tính text-decoration-line, text-decoration-color, text-decoration-style

[Tự học CSS] Tìm hiểu mọi thứ về Text(Văn bản) trong CSS

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 9448 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ cho ace về Text(Văn bản) với đặt màu, căn chỉnh, trang trí, space, shadow nó trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Hiệu ứng Text trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 3908 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng Text trong CSS | Thuộc tính Text trong CSS | Định dạng văn bản trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Tùy chỉnh gạch chân với trang trí văn bản trong CSS

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 7107 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định dạng văn bản trong CSS (CSS Text Decoration)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 5804 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thay đổi màu sắc của văn bản, Thay đổi màu nền của văn bản, Căn chỉnh văn bản trong CSS, Gạch chân văn bản, Chữ hoa và chữ thường trong văn bản,Khoảng cách văn bản trong CSS, Bóng của văn bản

Trang trí văn bản trong CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 4 ⭐ ( 9212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php