Cách thực hiện trang trí văn bản bằng CSS



Bài viết này sẽ cung cấp cho bạn kiến ​​thức chi tiết và toàn diện về Các kiểu trang trí văn bản bằng CSS với các ví dụ.

Gạch chân một tài liệu hoặc một văn bản luôn được coi là dễ dàng. Nhưng nếu chúng ta xem xét trường hợp cho các trang web, nó có dễ dàng chưa? Hầu hết chúng ta sẽ nói có nhưng việc tạo một đường ngang bao gồm một số thiết kế tùy chỉnh khiến nhiệm vụ đơn giản này trở nên mệt mỏi. Hãy bắt đầu Hành trình trang trí văn bản bằng CSS theo cách sau:

Trang trí văn bản là gì?

Nó thiết lập sự xuất hiện của các đường trang trí trên văn bản. Nó là một thuộc tính viết tắt cho:





  • văn bản-trang trí-dòng
  • văn bản-trang trí-màu sắc
  • văn bản-trang trí-phong cách

Nó được chỉ định là một hoặc nhiều giá trị được phân tách bằng dấu cách đại diện cho te tay dàitính chất trang trí xt.

Cú pháp:



văn bản-trang trí: || ||

Ở đâu,

php insert vào $ table
  • văn bản-trang trí-dòng: Nó được sử dụng để thiết lập các loại trang trí được sử dụng nhưgạch dưới, gạch ngang và gạch ngang.

  • văn bản-trang trí-màu sắc:Nó được sử dụng để thiết lập màu sắc của trang trí.



  • văn bản-trang trí-phong cách: Nó được sử dụng để thiết lập kiểu của dòng, chẳng hạn nhưrắn, lượn sóng, chấm, gạch ngang, kép

Các loại trang trí văn bản trong CSS

  • Gạch ngang:
#decoration {text-decoration: overline}

Overline-text-decoration-using-css

  • Đường cắt ngang:
#decoration {text-decoration: line-through}

  • Gạch chân:
#decoration {text-decoration: underline}

  • Sự phối hợp:
#decoration {text-decoration: underline line-through overline}

Đầu ra:

Trang trí văn bản bằng CSS: Mã

Mã:

  

Mã CSS:

init làm gì trong python
#overline {text-decoration: wavy overline chanh} #underover {text-decoration: gạch chân gạch ngang} #dotted {text-decoration: gạch dưới gạch ngang có chấm đỏ} #wavy {text-decoration: line-through wavy}

Đầu ra:

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

Một thuộc tính được gọi là text-decoration-bỏ qua cũng có thể được sử dụng khi văn bản gạch ngang, gạch ngang và gạch chân. Nó giúp trang trí văn bản. Nó chỉ đơn giản chỉ định cách gạch ngang và gạch chân được vẽ khi chúng chuyển qua các dấu thăng và giảm.

#decoration {văn bản-trang trí-bỏ qua: mực}

Các giá trị có thể được sử dụng với các bỏ qua trang trí văn bản là:

  • các đối tượng : (mặc định) dòng bỏ qua các đối tượng nội tuyến, như hình ảnh hoặc các phần tử khối nội tuyến.

  • không ai : đường cắt ngang mọi thứ.

  • không gian : dòng trang trí bỏ qua khoảng trắng, ký tự phân cách từ và bất kỳ khoảng trắng nào được đặt bằng khoảng cách giữa các chữ cái hoặc khoảng cách từ.

    cách tạo một gói
  • mực : đường trang trí bỏ qua glyphs, giảm dần hoặc tăng dần.

  • các cạnh : dòng trang trí bắt đầu một chút sau mép bắt đầu của nội dung và kết thúc một chút trước mép kết thúc của nội dung.

  • hộp trang trí : dòng trang trí bỏ qua lề, đường viền và phần đệm được kế thừa.

Vì thuộc tính này không được bất kỳ trình duyệt nào hỗ trợ nên không có bản trình diễn nào, nhưng đây là một ví dụ trong hình ảnh bên dưới về cách mỗi giá trị có thể trông như thế nào khi triển khai văn bản-trang trí-bỏ qua.

Với điều này, chúng ta đến phần cuối của blog Trang trí văn bản bằng CSS. Nếu bạn có bất kỳ thắc mắc nào liên quan đến chủ đề này, vui lòng để lại bình luận bên dưới và chúng tôi sẽ liên hệ lại với bạn.

Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Trang trí văn bản bằng CSS” và chúng tôi sẽ liên hệ lại với bạn.